react服务如何部署
部署 React 服务的常见方法
使用静态文件托管服务
React 应用通常通过 npm run build 生成静态文件,可直接部署到托管服务。
- Vercel:支持自动从 GitHub 部署,配置简单,适合前端项目。
- Netlify:提供 CI/CD 功能,支持自定义域名和 HTTPS。
- GitHub Pages:免费托管静态站点,需配置
homepage字段并推送build文件夹。
通过 Node.js 服务器部署
若需服务端渲染(SSR)或 API 集成,可使用 Node.js 服务器:
- 使用
express托管静态文件:const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'build'))); app.listen(3000); - 结合
pm2守护进程:pm2 start server.js --name "react-app"
容器化部署(Docker)
适合需要隔离环境或微服务架构的场景:
- 创建
Dockerfile:FROM node:alpine WORKDIR /app COPY package.json . RUN npm install COPY . . RUN npm run build CMD ["npm", "start"] - 构建并运行容器:
docker build -t react-app . docker run -p 3000:3000 react-app
云平台部署(AWS、GCP 等)
- AWS S3 + CloudFront:将
build文件上传至 S3,通过 CloudFront 加速分发。 - Google Firebase:使用
firebase deploy快速部署到 Firebase Hosting。
CI/CD 自动化
集成 GitHub Actions 或 GitLab CI:

- 示例 GitHub Actions 配置:
jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - run: npm install && npm run build - uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./build
注意事项
- 确保
build文件夹的路径正确,避免 404 错误。 - 生产环境需配置环境变量(如
.env.production)。 - 启用 HTTPS 并设置合理的缓存策略。
- 使用
react-router时,服务器需配置重定向到index.html以支持客户端路由。






