如何部署react项目

部署React项目的常见方法

使用Vercel部署 Vercel是专门为前端项目优化的部署平台，支持自动CI/CD。将项目代码推送到GitHub/GitLab等平台后，在Vercel控制台关联仓库即可自动部署。Vercel会自动识别React项目并完成构建配置。

通过Netlify部署 Netlify提供类似的自动化部署服务。在Netlify控制台拖拽build文件夹或连接Git仓库，设置构建命令为npm run build和发布目录为build即可完成部署。支持自定义域名和HTTPS。

传统服务器部署 将npm run build生成的build文件夹内容上传至服务器Web目录（如Nginx/Apache的public_html）。需配置服务器重定向规则，确保React Router正常工作：

location / {
  try_files $uri /index.html;
}

GitHub Pages部署 在package.json中添加homepage字段并安装gh-pages依赖。通过以下命令构建并推送至gh-pages分支：

npm run build
npm run deploy

Docker容器化部署 创建Dockerfile构建生产环境镜像：

FROM node:alpine as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx
COPY --from=builder /app/build /usr/share/nginx/html

部署前的关键步骤

构建生产版本前需确保环境变量正确配置，特别是API基础路径等参数。测试生产构建是否正常：

npm install -g serve
serve -s build

静态资源路径问题可通过在package.json设置homepage字段或在构建命令中添加PUBLIC_URL参数解决：

PUBLIC_URL=https://your-cdn.com npm run build