当前位置：首页 > React

react项目如何上线

2026-02-26 08:52:32React

打包项目

使用 npm run build 或 yarn build 生成生产环境代码，输出到 build 目录（默认路径）。确保项目依赖已安装且无编译错误。

选择托管方式

静态服务器部署：适用于纯前端项目。将 build 目录内容上传至静态服务器（如 Nginx、Apache），配置根目录指向 build/index.html。
Node.js 服务器部署：若使用服务端渲染（如 Next.js），需启动 Node 服务并监听端口。通过 PM2 或 Docker 管理进程。
云服务平台：Vercel、Netlify 或 AWS S3 等支持直接拖拽上传或 CI/CD 自动化部署。

配置服务器

Nginx 示例配置：

react项目如何上线

server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/build;
    index index.html;

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

启用 Gzip 压缩并配置 HTTPS（如 Let's Encrypt 证书）。

域名与 HTTPS

绑定域名至服务器 IP，通过 Certbot 或云平台工具申请 SSL 证书。强制 HTTP 跳转 HTTPS 以提升安全性。

react项目如何上线

监控与优化

部署后使用 Lighthouse 检查性能，监控错误（如 Sentry）。配置 CDN 加速静态资源，按需开启 Brotli 压缩。

自动化部署（可选）

通过 GitHub Actions 或 GitLab CI 设置自动化流程，触发 build 后同步至服务器。示例 GitHub Actions 片段：

- name: Deploy to Server  
  uses: appleboy/scp-action@master  
  with:  
    host: ${{ secrets.SERVER_IP }}  
    username: ${{ secrets.USERNAME }}  
    key: ${{ secrets.SSH_KEY }}  
    source: "build/"  
    target: "/var/www/html"