react 如何部署

部署 React 应用的方法

React 应用的部署可以通过多种方式实现，具体取决于项目需求、目标平台和团队偏好。以下是几种常见的部署方法：

静态文件部署

构建 React 应用后生成静态文件，可通过任何 Web 服务器托管。运行构建命令生成优化后的生产版本文件：

npm run build

构建完成后，build 目录中的文件可上传至静态文件托管服务如 Netlify、Vercel 或 GitHub Pages。

Netlify 部署

Netlify 提供自动化部署流程，支持从 Git 仓库直接部署。连接 Git 仓库后，Netlify 会自动检测 React 项目并配置构建命令。默认构建命令为：

npm run build

部署目录设置为 build，Netlify 会自动处理剩余步骤。

Vercel 部署

Vercel 为 React 应用提供开箱即用的支持，特别适合 Next.js 项目。通过 Vercel 仪表板导入 Git 仓库，自动识别项目类型并配置优化设置。构建命令和输出目录通常无需额外配置。

GitHub Pages 部署

GitHub Pages 适合开源项目的免费托管。需在 package.json 中添加 homepage 字段并安装 gh-pages 包：

npm install gh-pages --save-dev

添加部署脚本至 package.json：

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

运行部署命令：

npm run deploy

Docker 容器部署

将 React 应用容器化便于跨环境部署。创建 Dockerfile 配置多阶段构建以减小镜像体积：

# 构建阶段
FROM node:alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建并运行容器：

docker build -t react-app .
docker run -p 80:80 react-app

服务器手动部署

通过 SSH 将构建文件传输至服务器，使用 Nginx 或 Apache 配置 Web 服务。Nginx 基础配置示例：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /path/to/build;
        try_files $uri /index.html;
    }
}

重启 Nginx 使配置生效：

sudo systemctl restart nginx

CI/CD 自动化部署

配置 GitHub Actions 或 GitLab CI 实现自动化部署。GitHub Actions 示例配置：

name: Deploy
on: [push]
jobs:
  build-and-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

云服务部署

AWS、Google Cloud 或 Azure 等云平台提供多种部署选项。AWS S3 静态网站托管方案示例：

1. 创建 S3 存储桶并启用静态网站托管
2. 设置存储桶策略允许公开读取
3. 使用 AWS CLI 上传构建文件：

   aws s3 sync build/ s3://your-bucket-name

选择部署方法时应考虑项目规模、团队熟悉度和预算因素。现代前端部署工具如 Vercel 和 Netlify 极大简化了部署流程，适合快速迭代项目。