13. React 应用的部署与发布方案常见的 React 应用部署流程和方法，根据自己项目规模和需求，选择合适的部署

React 应用的部署与发布方案

React 应用的部署与发布 是将 开发完成 的应用部署到 服务器 或平台上，使用户可以通过 网络访问。以下是常见的 React 部署流程和方法：

1 React 应用打包

React 应用通过 npm run build 或 yarn build 命令进行打包，这会生成优化后的 静态资源。

1.1 打包命令

在 React 项目 的 根目录 运行以下命令：

npm run build

1.2 打包输出

打包后，build 文件夹 将包含以下内容：

HTML 文件：index.html，应用的 入口文件；
CSS 和 JS 文件：优化的 静态资源文件；
其他静态资源：如图片、字体等。

这些文件可以 部署到 任何 支持静态文件托管 的服务器。

2 部署方式

2.1 部署到静态网站托管平台

适合 初学者 和 小型项目，操作简单，自动化程度高。

GitHub Pages

安装 gh-pages 包：

npm install gh-pages --save-dev

修改 package.json：在 scripts 中添加：

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

添加 homepage 字段：

"homepage": "https://<username>.github.io/<repository-name>"

执行部署：

npm run deploy

2.2 部署到自定义服务器

适合需要更多控制的 大型项目 或 企业级应用。

使用 Nginx

打包应用：

npm run build

配置 Nginx：

将 build 文件夹 内容 复制到 服务器上的 指定目录（如 /var/www/html/）。

修改 Nginx 配置文件：

如 /etc/nginx/sites-available/default

server {
    listen 80;
    server_name example.com;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

重启 Nginx：

sudo systemctl restart nginx

使用 Node.js 和 Express

安装 Express：

npm install express

创建 Express 服务器：

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

启动服务器：

node server.js

2.3 部署到云服务平台

适合需要 灵活性 和 高可用性 的应用。

AWS S3 和 CloudFront

打包应用：

npm run build

上传 build 文件夹内容到 S3 存储桶；
配置 S3 存储桶为 静态网站托管；
使用 CloudFront 设置全局 CDN 加速。

3 注意事项

路由支持

React 使用 客户端路由，需要服务器配置 支持 SPA（单页面应用）；
用 try_files 或 .htaccess 文件处理 非文件路径请求。

环境变量

使用 .env 文件 管理 API 密钥等 环境变量；
确保在 生产环境 中设置正确的 环境变量。

安全性

确保 HTTPS 配置；
移除 敏感信息，如 .env 文件内容。

性能优化

开启 gzip 压缩；
使用 CDN 提高 静态资源加载速度；
减少 第三方依赖，优化 打包体积。

13. React 应用的部署与发布方案