如何部署react网站
部署 React 网站的方法
使用 Vercel 部署
Vercel 是专门为前端框架优化的部署平台，支持 React 项目一键部署。
注册 Vercel 账号并连接 GitHub/GitLab 仓库，导入项目后自动触发构建和部署流程。
Vercel 提供免费的 HTTPS、CDN 和全球边缘网络，适合静态站点或服务端渲染（Next.js）项目。
通过 Netlify 部署
Netlify 提供类似的自动化部署服务，支持从 Git 仓库直接部署。
在 Netlify 控制台关联项目仓库，设置构建命令（如 npm run build）和发布目录（如 build/）。
可配置自定义域名、环境变量和预览分支，支持表单处理、Serverless 函数等扩展功能。
静态托管（如 GitHub Pages）
适用于纯静态 React 项目，需在 package.json 中添加 homepage 字段。
执行 npm run build 生成优化后的 build 文件夹，将其内容推送到 GitHub 仓库的 gh-pages 分支。
通过 GitHub Pages 设置启用站点，访问格式为 https://<username>.github.io/<repo-name>。
传统服务器部署
将 build 文件夹上传至服务器，配置 Nginx/Apache 指向该目录。
Nginx 示例配置：
server {
listen 80;
server_name yourdomain.com;
root /path/to/build;
index index.html;
location / {
try_files $uri /index.html;
}
}需确保服务器安装 Node.js 并配置 HTTPS（如 Let's Encrypt）。
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构建镜像并运行容器：
docker build -t react-app .
docker run -d -p 80:80 react-app注意事项
- 路由问题：使用
BrowserRouter时需配置服务器回退到index.html（如 Nginx 的try_files）。 - 环境变量：生产环境变量需以
REACT_APP_前缀命名，并通过构建工具注入。 - 性能优化：启用代码分割（
React.lazy）、压缩资源（如 Brotli）和 CDN 加速。
