react如何发布
发布React应用的步骤
构建生产版本
使用以下命令生成优化后的生产版本代码,代码会被压缩并移除开发环境中的调试工具:
npm run build
构建完成后会生成build文件夹,包含所有静态资源文件。
选择托管方式
常见的托管方式包括:
- 静态服务器:如Nginx、Apache,直接将
build文件夹部署到服务器。 - 云服务:如Vercel、Netlify、AWS S3等,支持自动化部署。
- Node.js服务器:结合Express等框架,通过
app.use(express.static('build'))提供服务。
配置路由兼容性
若使用React Router,需在静态服务器中添加重定向规则(以Nginx为例):
location / {
try_files $uri /index.html;
}
环境变量处理
生产环境变量需以REACT_APP_为前缀,并在构建前设置。使用.env.production文件定义:

REACT_APP_API_URL=https://api.example.com
启用HTTPS
通过Let's Encrypt等工具获取SSL证书,并在服务器配置中启用HTTPS,提升安全性。
CDN加速
将静态资源上传至CDN,修改public/index.html中的资源引用路径为CDN地址,提升加载速度。
版本控制与回滚
使用Git标记发布版本,保留历史构建文件以便快速回滚。结合CI/CD工具实现自动化流程。

部署到特定平台的示例
Vercel
安装Vercel CLI后,通过以下命令部署:
npm install -g vercel
vercel --prod
Netlify
拖拽build文件夹至Netlify面板,或关联Git仓库实现自动部署。
GitHub Pages
安装gh-pages包,添加以下脚本到package.json:
"scripts": {
"deploy": "gh-pages -d build"
}
运行npm run deploy完成部署。






