react项目如何打包部署

安装依赖

确保项目根目录下已安装最新版本的 react-scripts 或其他构建工具（如 Vite）。运行以下命令安装生产依赖：

npm install --save-dev react-scripts

构建生产版本

使用以下命令生成优化后的生产代码，输出到 build 文件夹（默认路径）：

npm run build

若使用 Vite，命令为：

npm run build --mode production

配置静态服务器

对于单页应用（SPA），需确保服务器支持 HTML5 History API 回退。

• Node.js 服务器：使用 express 和 history 包处理路由：

  const express = require('express');
  const history = require('connect-history-api-fallback');
  const app = express();
  app.use(history());
  app.use(express.static('build'));
  app.listen(3000);

• Nginx：修改配置以重定向所有请求到 index.html：

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

部署到云服务

• Vercel/Netlify：直接拖拽 build 文件夹到控制台或关联 Git 仓库自动部署。
• AWS S3：启用静态网站托管，上传 build 内容并配置权限为公开读取。

环境变量处理

在项目根目录创建 .env.production 文件，定义生产环境变量：

REACT_APP_API_URL=https://api.example.com

构建时会自动注入这些变量。

CDN 加速

在 index.html 中引用 CDN 版本的库（如 React），替换本地依赖：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

启用压缩

在构建时生成 gzip 文件（需服务器支持）。通过 compression-webpack-plugin 实现：

// webpack.config.js
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  plugins: [new CompressionPlugin()],
};

监控与错误追踪

集成 Sentry 或 LogRocket 捕获生产环境错误。初始化代码需放在应用入口文件：

import * as Sentry from '@sentry/react';
Sentry.init({ dsn: 'YOUR_DSN' });