react应用如何部署

部署 React 应用的常见方法

React 应用的部署方式多样，可以根据项目需求、服务器环境或托管平台选择合适的方法。以下是几种主流部署方案：

使用静态文件托管服务

构建生产环境代码：

npm run build

生成 build 文件夹后，将内容上传至托管服务：

• Vercel：支持自动从 Git 仓库部署，直接拖拽 build 文件夹即可。
• Netlify：通过网页界面或 CLI 工具上传，支持自动 CI/CD。
• GitHub Pages：在 package.json 中配置 homepage 字段后，运行 npm run deploy。

部署到传统服务器

通过 FTP/SFTP 或 CI/CD 工具上传文件：

1. 运行 npm run build 生成静态文件。
2. 将 build 文件夹内容上传至服务器 Web 目录（如 Nginx 的 /var/www/html）。
3. 配置 Nginx/Apache 指向该目录：

   server {
     listen 80;
     root /var/www/html;
     index index.html;
     location / {
       try_files $uri /index.html;
     }
   }

使用 Docker 容器化部署

创建 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/GCP/Azure）

以 AWS S3 + CloudFront 为例：

1. 将 build 文件夹上传至 S3 存储桶。
2. 启用静态网站托管功能。
3. 通过 CloudFront 分发，配置 HTTPS 和自定义域名。

服务端渲染（SSR）应用部署

对于 Next.js 等框架：

next build
next start

需使用 Node.js 服务器或 PM2 进程管理：

pm2 start npm --name "next-app" -- start

注意事项

• 确保环境变量在构建时已注入，或通过服务器运行时配置。
• 路由应用需配置服务器回退到 index.html（客户端路由）。
• 大型项目可考虑 CDN 加速静态资源加载。