如何部署react项目
部署React项目的常见方法
使用Vercel部署
Vercel是专门为前端项目优化的部署平台，支持自动从Git仓库拉取代码并部署。注册Vercel账号后，连接GitHub/GitLab仓库，选择需要部署的React项目仓库。Vercel会自动检测项目类型并配置构建命令（如npm run build），生成的生产版本会部署到全球CDN。
使用Netlify部署
Netlify提供类似的Git集成部署服务。在Netlify控制台中选择"New site from Git"，授权访问代码仓库后，指定构建命令为npm run build，发布目录设置为build/。Netlify会自动触发部署流程，并为项目分配一个netlify.app的子域名。
传统服务器部署
对于自有服务器，需要手动构建项目并传输文件。在本地运行npm run build生成优化后的生产版本，所有静态文件会输出到build目录。使用SFTP/RSync将build目录内容上传到服务器的Web目录（如Nginx的/var/www/html）。配置Nginx/Apache将请求指向该目录，并确保路由请求都返回index.html。
使用GitHub Pages部署
在package.json中添加homepage字段为https://<username>.github.io/<repo-name>。安装gh-pages包后，添加部署脚本：
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}运行npm run deploy会将构建产物推送到gh-pages分支，自动启用GitHub Pages服务。
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
EXPOSE 80构建镜像后推送到容器仓库，在服务器上运行容器即可。
静态文件服务配置
无论采用何种部署方式，都需要确保：
- 生产环境使用
HTTPS - 设置正确的缓存策略（如长期缓存静态资源）
- 配置SPA路由回退（所有路径返回
index.html） - 启用Gzip/Brotli压缩
每种方法都有对应的自动化流程和手动配置选项，选择取决于项目需求和技术栈熟悉程度。云平台部署最简单快捷，自有服务器部署则提供完全控制权。
