react如何发布项目

发布 React 项目的步骤

构建生产环境代码
运行以下命令生成优化后的生产环境代码，代码会被打包到 build 目录：

npm run build

或使用 Yarn：

yarn build

选择部署方式
根据需求选择以下常见部署方式之一：

部署到静态文件托管服务
将 build 目录上传至托管服务如 Vercel、Netlify 或 GitHub Pages。以 Vercel 为例：

• 注册并登录 Vercel
• 拖拽 build 文件夹到 Vercel 仪表盘或通过 CLI 部署

部署到自定义服务器
将 build 目录内容复制到服务器 Web 目录（如 Nginx 或 Apache 的 html 目录）。确保服务器配置指向 index.html 并处理客户端路由：

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

配置环境变量
生产环境需替换 .env.production 中的变量，例如 API 基础 URL：

REACT_APP_API_BASE=https://api.example.com

测试生产环境
本地测试生产构建可使用 serve：

npx serve -s build

访问 http://localhost:5000 验证功能是否正常。

优化性能

• 启用压缩（如 Gzip）减少文件体积
• 使用 CDN 加速静态资源加载
• 通过 Lighthouse 工具分析并改进性能评分

持续集成/持续部署 (CI/CD)
配置 GitHub Actions 或类似工具自动化部署流程。示例 GitHub Actions 配置：

name: Deploy to Vercel
on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install && npm run build
      - uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}

注意事项

• 确保路由兼容性，使用 BrowserRouter 时服务器需支持 HTML5 History API
• 检查所有外部资源（如图片、字体）使用 HTTPS 协议
• 清除浏览器缓存测试更新后的版本