如何部署react项目

部署 React 项目到生产环境

方法一：使用静态服务器部署（如 Nginx、Apache）

构建生产版本：运行 npm run build 或 yarn build，生成优化后的静态文件（位于 build 文件夹）。

配置服务器：将 build 文件夹内容上传到服务器，并配置服务器指向该目录。以 Nginx 为例：

server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/build;
    index index.html;
    location / {
        try_files $uri /index.html;
    }
}

方法二：部署到云平台（如 Vercel、Netlify）

连接代码仓库：在 Vercel 或 Netlify 平台关联 GitHub/GitLab 仓库。

自动部署：平台会自动检测 React 项目并完成构建部署，每次代码推送会触发自动更新。

自定义域名：在平台设置中添加自定义域名并配置 DNS。

方法三：使用 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 -d -p 80:80 react-app

部署注意事项

路由问题：单页应用需配置服务器将所有路径重定向到 index.html（HashRouter 可避免此问题）。

环境变量：生产环境变量需以 REACT_APP_ 前缀命名，并在构建前设置好。

CDN 加速：建议将静态文件托管在 CDN 上提高加载速度。

性能优化：启用代码分割、压缩和缓存策略。