react如何部署

部署 React 应用的方法

构建生产环境代码
运行 npm run build 或 yarn build，生成优化后的静态文件（位于 build 或 dist 目录）。该过程会压缩代码并移除开发环境依赖。

静态服务器部署
使用 serve 或其他静态服务器工具快速部署：

npm install -g serve
serve -s build

默认端口为 3000，可通过 -l 指定其他端口。

Nginx 配置
将 build 目录文件放入 Nginx 的 HTML 目录（如 /usr/share/nginx/html），并配置 nginx.conf：

server {
  listen 80;
  server_name your_domain.com;
  root /usr/share/nginx/html;
  index index.html;
  location / {
    try_files $uri /index.html;
  }
}

重启 Nginx 使配置生效。

GitHub Pages 部署
安装 gh-pages 并添加部署脚本：

npm install --save-dev gh-pages

在 package.json 中添加：

"homepage": "https://username.github.io/repo-name",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

运行 npm run deploy 完成部署。

Netlify/Vercel 托管

• Netlify：拖拽 build 文件夹至网页界面，或连接 Git 仓库自动部署。
• Vercel：通过 CLI 或关联 Git 仓库，自动识别 React 项目并部署。

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
EXPOSE 80

构建并运行容器：

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

CDN 加速
将静态文件上传至 AWS S3、Cloudflare 或阿里云 OSS 等对象存储服务，配置 CDN 分发以提高访问速度。需注意设置正确的 MIME 类型和缓存策略。

注意事项

• 路由为 BrowserRouter 时，确保服务器配置了重定向到 index.html 的规则。
• 环境变量需在构建阶段注入，运行时变量需通过服务器动态配置。
• 检查跨域问题，尤其当与后端 API 交互时。