如何将create-react-app部署到网络主机（例如Siteground）？

Question

我正在使用create-react-app构建一个react项目，并尝试弄清楚如何将我的代码部署到Siteground托管服务器上。

有人知道最佳方式吗？我是否需要通过FTP导入我的build文件夹？还是可以通过GitHub自动化这个过程？

先感谢您的帮助！

- Dane W. Iliff

Answer 1

根据create-react-app文档，你可以运行npm run build,然后将输出结果FTP到Web服务器。然而，你的问题非常广泛--你可以通过GitHub或其他工具自动化处理，但这可能会在StackOverflow上引起不同意见的回答(这不是这种问题的正确论坛)。

- arthurakay

Answer 2

npm run build或yarn build

这个命令将应用程序构建为生产模式并放置在build文件夹中。它以生产模式正确地捆绑了React，并优化了构建以获得最佳性能。

npm run build将创建一个包含应用程序生产版本的构建目录。设置您喜欢的HTTP服务器，以便网站访问者可以使用index.html，并且静态路径的请求，如/static/js/main.<hash>.js，可以用/static/js/main.<hash>.js文件的内容响应。

来源：create-react-app

- salman.zare

Answer 3

我刚刚使用FileZilla将create-react-app上传到siteground，以下是步骤:

1. 一旦准备好所有生产环境所需的内容，运行 npm run build
2. 在浏览器中打开 siteGround，并进入我的帐户部分，点击 进入 cPanel，向下滚动并找到 FTP 帐户
3. 创建一个新帐户，指向目录 public_html
4. 创建后，在下方会显示，最右端点击配置 FTP 客户端，在手动设置下，你需要连接的内容就在那里
5. 打开FileZilla，在文件中进入 站点管理器 然后选择 新建站点
6. 主机(在 filezilla 中) === FTP 服务器 (在sitiGround 中)，端口 设置为 siteground 端口，协议和加密保持默认
7. 登录类型 设置为正常，用户 === FTP 用户(siteGround) 和密码 您用于创建该FTP用户的密码
8. 点击 连接，并将yourApp/build（来自左侧即您的 PC）的内容粘贴到（右侧的文件夹）即您在 siteGround 的public_html

就是这样！转到您的网站并检查，react 应用程序应在那里显示。

这是该过程的来源 https://www.siteground.com/tutorials/ftp/ 虽然其中使用快速连接用于fileZilla，但我有多个站点，所以站点管理器更干净，并可以为下一次存储您的凭据。

- RamiroIsBack

Answer 4

通常，主机供应商会提供指导策略。

例如： Heroku Create React App Build S3 Cloudfront 否则，您将不得不自己管理它，注册一个自定义构建脚本，使用以下命令：

npm run build

然后移动构建文件夹。如果您使用的是Maven，您可以使用插件来管理整个构建过程，例如： Frontend Maven Plugin

- Black.Jack

Answer 5

如果您正在使用create-react-app，则可以执行以下操作：

1. npm run build or yarn build
2. Copy everything that is inside of the build folder as a result of the previous point
3. In order to get the routes working, add .htaccess file with the following content:

   <IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteCond %{REQUEST_FILENAME} !-l
     RewriteRule . /index.html [L]
   </IfModule>
   

4. Export it to the root folder of your server (normally public_html)

点击查看更多信息的好文章 :)

希望能帮到您！

- Alvaro

Answer 6

我在Siteground上部署时遇到了问题，简单的解决方案是为您的构建创建一个git仓库，并设置Siteground上的public_html文件夹以跟踪该git仓库。

请确保还创建了名为“.htaccess”的文件，并将其内容设置为类似以下内容。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

如果您没有这个，您的路由将无法工作。

同时记得去“工具->速度->缓存”，如果您已经部署，请先清除缓存。

- Emmanuel Ajaero

---

我还发现每次部署后需要刷新缓存。我期望Siteground能够注意到我上传了新文件并继续从缓存中提供服务。我想知道是否有一种方法可以解决这个问题（而不失去缓存的优势）。 - Marc Stober