react如何发布

发布 React 应用的常见方法

使用 npm run build 生成生产环境代码
在项目根目录运行以下命令，生成优化后的静态文件（位于 build 文件夹）：

npm run build

生成的文件包括压缩后的 JavaScript、CSS 和 HTML，可直接部署到服务器。

部署到静态文件托管服务

• Netlify/Vercel：拖拽 build 文件夹上传或关联 Git 仓库自动部署。
• GitHub Pages：安装 gh-pages 包，通过以下命令部署：

  npm install gh-pages --save-dev

  在 package.json 中添加配置：

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

  运行 npm run deploy 完成部署。

部署到传统服务器
将 build 文件夹内容上传至服务器的 Web 目录（如 Apache/Nginx 的 public_html），确保服务器配置支持单页应用（SPA）的路由重定向。
Nginx 示例配置：

server {
  listen 80;
  root /path/to/build;
  index index.html;
  location / {
    try_files $uri $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
COPY --from=builder /app/build /usr/share/nginx/html

构建并运行容器：

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

注意事项

• 环境变量需在构建时通过 .env.production 文件注入。
• 路由为 BrowserRouter 时，服务器需配置基础路径（如 basename="/app"）。
• 使用 CDN 加速静态资源加载，可通过 PUBLIC_URL 环境变量配置。