如何将react 部署
部署 React 应用的常见方法
使用静态文件服务器部署
构建 React 应用生成静态文件,通过 Nginx、Apache 等服务器托管。运行 npm run build 生成 build 文件夹,将文件夹内容上传至服务器配置的根目录。
部署到 Netlify 或 Vercel
Netlify 和 Vercel 提供自动化部署服务。连接 GitHub 仓库后,每次代码推送会自动触发构建和部署。Netlify 支持自定义域名和 HTTPS,Vercel 针对 Next.js 优化但同样适用于 React。
使用 GitHub Pages 部署
在 package.json 中添加 homepage 字段为 GitHub Pages 的 URL。安装 gh-pages 包,通过 npm run deploy 将构建文件推送到 gh-pages 分支。GitHub 自动托管该分支内容。
部署到 AWS S3 或 CloudFront
AWS S3 可托管静态文件,配合 CloudFront CDN 加速。上传 build 文件夹内容至 S3 存储桶,配置存储桶为静态网站托管。创建 CloudFront 分发指向 S3 存储桶以提高访问速度。
使用 Docker 容器化部署
创建 Dockerfile 基于 Node 镜像构建应用,复制文件并运行 npm run build。使用 Nginx 镜像托管构建文件,通过多阶段构建减小镜像体积。推送镜像至 Docker Hub 或私有仓库,在服务器上拉取并运行容器。
部署到 Heroku
Heroku 支持 Node.js 应用部署。在项目根目录添加 Procfile 文件,内容为 web: npm start。通过 Heroku CLI 登录并创建应用,推送代码后自动构建部署。需确保 package.json 中包含启动脚本。
使用 CI/CD 管道自动化部署
配置 GitHub Actions 或 GitLab CI 在代码推送时自动运行测试、构建和部署。编写 YAML 文件定义工作流,包括安装依赖、运行测试、构建项目和部署到目标环境。集成 Slack 或邮件通知构建状态。
部署到 Firebase Hosting
Firebase Hosting 提供快速安全的静态托管。安装 Firebase CLI 并登录,运行 firebase init 选择 Hosting 功能。配置项目后,使用 firebase deploy 上传 build 文件夹内容。支持自动 SSL 和全球 CDN。
注意事项

确保环境变量在构建时正确注入,敏感信息不直接暴露在代码中。路由问题可通过配置服务器将所有请求重定向到 index.html 解决。静态资源路径使用绝对路径避免加载问题。






