react项目如何打包部署
安装依赖
确保项目根目录下已安装最新版本的 react-scripts 或 vite（根据项目构建工具选择）。运行以下命令安装生产环境依赖：
npm install --production构建生产版本
使用构建工具生成优化后的静态文件。对于 create-react-app 项目：
npm run build对于 Vite 项目：
npm run build构建完成后，静态文件默认输出到 build 或 dist 目录。
配置服务器
将构建后的目录映射到 Web 服务器（如 Nginx、Apache）。以 Nginx 为例，修改配置文件：
server {
listen 80;
server_name yourdomain.com;
root /path/to/react-project/build;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}确保启用 try_files 以支持前端路由。
部署到云服务
通过 FTP 或 CI/CD 工具（如 GitHub Actions、Jenkins）上传文件到服务器。示例 GitHub Actions 配置：
- name: Deploy
uses: peaceiris/actions-ftp@v2
with:
host: ${{ secrets.FTP_HOST }}
user: ${{ secrets.FTP_USER }}
password: ${{ secrets.FTP_PASSWORD }}
localDir: ./build
remoteDir: /public_html环境变量处理
生产环境变量需注入到构建过程中。在项目根目录创建 .env.production 文件：
REACT_APP_API_URL=https://api.example.com构建时自动加载该文件。
启用 HTTPS
通过 Let's Encrypt 获取免费 SSL 证书并配置到服务器。Nginx 配置示例：
server {
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
}性能优化
在 package.json 中添加资源压缩：
"scripts": {
"build": "react-scripts build && gzip -r build/static"
}或通过 Web 服务器启用 Gzip 压缩。
缓存策略
配置静态资源长期缓存。Nginx 示例：
location /static {
expires 1y;
add_header Cache-Control "public";
}错误监控
集成 Sentry 或 LogRocket 捕获生产环境错误。安装 SDK 并初始化：
import * as Sentry from '@sentry/react';
Sentry.init({ dsn: 'YOUR_DSN' });回滚机制
保留旧版本构建目录，通过符号链接快速切换版本：
ln -snf /path/to/build-v2 /var/www/current
