react如何部署

部署 React 应用的常见方法

使用静态服务器部署

React 应用在构建后会生成静态文件，可以直接通过静态服务器部署。常用的静态服务器包括 Nginx、Apache 等。

运行构建命令生成静态文件：

npm run build

将生成的 build 文件夹内容上传到服务器，配置 Nginx 如下：

server {
    listen 80;
    server_name yourdomain.com;

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

使用 Vercel 或 Netlify 部署

Vercel 和 Netlify 是流行的前端托管平台，支持一键部署 React 应用。

在 Vercel 或 Netlify 的控制台中，选择项目仓库并配置构建命令：

npm install && npm run build

设置输出目录为 build，平台会自动完成部署和 HTTPS 配置。

使用 GitHub Pages 部署

GitHub Pages 适合个人项目或文档的免费托管。

安装 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 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

构建并运行容器：

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

使用云服务（AWS、Azure、GCP）

云服务提供多种部署选项，如 AWS S3 + CloudFront、Azure Static Web Apps 或 Google Firebase。

以 AWS S3 为例：

1. 创建 S3 存储桶并启用静态网站托管。
2. 上传 build 文件夹内容到存储桶。
3. 配置 CloudFront CDN 以加速访问。

每种方法适用于不同场景，根据项目需求选择合适的部署方式。