当前位置：首页 > React

react前端如何部署

2026-02-26 16:11:19React

部署 React 前端项目的常见方法

使用静态文件服务器部署

React 项目通过 npm run build 生成静态文件（位于 build 文件夹）。这些文件可以部署到任何支持静态文件的服务器，例如：

Nginx/Apache：配置服务器指向 build 文件夹。
Vercel/Netlify：直接拖拽 build 文件夹或连接 Git 仓库自动部署。

通过 Docker 容器化部署

创建 Dockerfile 文件，基于 Node 镜像构建并复制静态文件到 Nginx 容器：

react前端如何部署

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

# 运行阶段
FROM nginx:alpine
COPY --from=builder /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 启动。

云服务平台部署

Vercel：支持零配置部署，连接 Git 仓库后自动触发构建。
Netlify：类似 Vercel，提供 CI/CD 和自定义域名。
AWS S3 + CloudFront：上传 build 文件到 S3，通过 CloudFront 加速分发。

使用 CI/CD 自动化流程

react前端如何部署

在 GitHub Actions 或 GitLab CI 中配置自动化部署脚本。例如 GitHub Actions 的示例：

name: Deploy React App
on: [push]
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

SSR 项目部署（如 Next.js）

服务器端渲染项目需要 Node 环境运行。部署方式包括：