react项目如何上线

打包 React 项目

运行以下命令生成生产环境代码，代码会被压缩并优化：

npm run build

打包后的文件默认输出到 build 目录，包含静态 HTML、CSS 和 JavaScript 文件。

选择部署方式

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

• 静态文件托管：适用于纯前端项目（如 Netlify、Vercel、GitHub Pages）。
• Node.js 服务器：需搭配 Express 或 Nginx 反向代理（适合服务端渲染或 API 集成）。
• 云服务容器化：使用 Docker 打包后部署到 AWS、Azure 或阿里云。

静态文件托管示例（以 Netlify 为例）

1. 注册 Netlify 并连接 GitHub/GitLab 仓库。
2. 指定构建命令为 npm run build，发布目录为 build。
3. 自动触发部署，生成线上访问链接。

使用 Nginx 部署

配置 Nginx 将请求指向打包后的 build 目录：

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/react-project/build;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

重启 Nginx 使配置生效：

sudo systemctl restart nginx

解决路由问题（单页应用）

确保服务器配置支持前端路由，避免 404 错误。Nginx 需添加 try_files 规则（如上例），其他服务器需类似处理。

环境变量配置

生产环境变量需在 .env.production 中定义，例如：

REACT_APP_API_URL=https://api.example.com

打包时变量会被嵌入到静态文件中。

启用 HTTPS

使用 Let’s Encrypt 生成免费 SSL 证书：

sudo certbot --nginx -d your-domain.com

自动配置 HTTPS 并强制跳转。

监控与优化

• 使用 Lighthouse 检查性能得分。
• 配置 CI/CD 自动化部署（如 GitHub Actions）。
• 启用 CDN 加速静态资源加载。