在开发完一个 React 应用后，我们需要将其部署到生产环境中，以供用户访问。部署过程不仅涉及构建优化，还包括选择合适的服务器和环境配置。本章将详细介绍如何将 React 应用部署到不同的平台，包括静态托管服务、云服务提供商以及自建服务器。
构建优化
在部署之前，需要对应用进行构建优化，以确保最终的生产版本具有最佳性能。这通常涉及到使用 Webpack 或者其他构建工具来压缩代码、移除不必要的依赖以及生成最小化的文件。
使用 Create-React-App 进行构建
如果你使用的是 Create-React-App（CRA），可以通过运行 npm run build 命令来生成优化后的构建输出。该命令会自动执行一系列优化步骤，包括代码分割、资源压缩等。
自定义构建配置
对于更复杂的项目，可能需要自定义构建配置。在这种情况下，可以考虑使用诸如 Rollup 或 Webpack 这样的工具。以下是使用 Rollup 的示例配置：
-- -------------------- ---- -------
------ - ------ - ---- -----------------------
------ ------- ---- ------------------------------
------ -------- ---- --------------------------
------ ------- -
------ ---------------
------- -
----- ------------------
------- ------
--
-------- -
----------
-----------
--------
-
--静态托管服务
静态托管服务适合那些不需要后端逻辑支持的应用。这些服务通常提供简单易用的界面来上传文件或通过 Git 部署流程自动化部署过程。
GitHub Pages
GitHub Pages 是一个免费的静态网站托管服务，非常适合小型项目或个人博客。
- 在你的 GitHub 仓库中创建一个名为
gh-pages的分支。 - 使用
npm run build生成构建文件。 - 将生成的文件复制到
gh-pages分支的根目录。 - 提交并推送更改到
gh-pages分支。
Netlify
Netlify 是一个强大的静态站点生成器，它提供了许多高级功能，如自动构建、自定义域名支持等。
- 注册并登录 Netlify 账户。
- 连接你的 GitHub 仓库到 Netlify。
- 在 Netlify 上配置构建设置，指定入口点（通常是
public目录）。 - 启动部署流程。
云服务提供商
对于需要更多定制化和扩展性的应用，可以考虑使用云服务提供商的解决方案。
AWS Amplify
AWS Amplify 提供了一套完整的工具和服务来帮助开发者快速构建现代 web 和移动应用。
- 在 AWS 控制台注册并创建一个新的 Amplify 应用。
- 连接你的代码仓库（如 GitHub）。
- 配置构建和部署流程。
- 部署应用。
Vercel
Vercel 是另一个流行的云服务平台，特别适合 React 应用的部署。它提供了无缝的 CI/CD 流水线以及全球 CDN 支持。
- 注册并登录 Vercel 账户。
- 导入你的 GitHub 仓库。
- 在 Vercel 上配置构建设置。
- 自动触发部署流程。
自建服务器
对于有特定需求的企业级应用，可能需要自行搭建服务器。这通常涉及购买云主机或物理服务器，并安装必要的软件和服务。
Nginx 代理
使用 Nginx 作为反向代理服务器是一种常见的做法，它可以处理静态文件请求，并将动态请求转发给后端服务（如果有的话）。
- 安装 Nginx：
sudo apt-get install nginx（基于 Debian 系统）。 - 配置 Nginx 以服务静态文件：编辑
/etc/nginx/sites-available/default文件。 - 重启 Nginx 服务：
sudo systemctl restart nginx。
使用 PM2 运行 Node.js 后端
如果应用需要后端逻辑，可以使用 PM2 来管理 Node.js 应用进程。
- 安装 PM2：
npm install -g pm2。 - 将应用部署到服务器上。
- 使用 PM2 启动应用：
pm2 start app.js。 - 设置开机启动：
pm2 startup。
以上是 React 应用部署的一些基本方法和技术。根据项目的具体需求和规模，你可以选择最适合自己的部署方案。