如何部署react网站

部署 React 网站的方法

使用 Vercel 部署
Vercel 是专门为前端框架优化的托管平台，支持一键部署 React 项目。
在 Vercel 官网注册账号，通过 GitHub、GitLab 或 Bitbucket 导入项目仓库。
Vercel 会自动检测项目类型并配置构建命令（如 npm run build）。
部署完成后，会生成一个可访问的 URL，支持自动更新和自定义域名。

通过 Netlify 部署
Netlify 提供类似的托管服务，适合静态站点和单页应用。
将代码推送到 Git 仓库后，在 Netlify 控制台选择仓库并设置构建命令。
配置环境变量（如 API 密钥）和部署目录（通常为 build/）。
Netlify 支持预览部署、分支部署和 HTTPS 自动配置。

使用 GitHub Pages 部署
在 package.json 中添加 homepage 字段，值为 https://<username>.github.io/<repo-name>。
安装 gh-pages 依赖：

npm install gh-pages --save-dev

在 package.json 的 scripts 中添加部署命令：

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

运行 npm run deploy 将构建文件推送到 gh-pages 分支。

部署到传统服务器（如 Nginx）
运行 npm run build 生成静态文件到 build 目录。
将 build 目录内容上传到服务器的 web 目录（如 /var/www/html）。
配置 Nginx 以指向该目录并处理单页应用路由：

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/html;
    index index.html;
    location / {
        try_files $uri /index.html;
    }
}

重启 Nginx 服务使配置生效。

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

构建并运行容器：

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

访问 http://localhost 即可查看部署结果。