第17章 构建与部署

使用Vercel或Netlify托管React应用

1. 为什么选择Vercel/Netlify？

  • 零配置部署：专为前端框架优化，自动识别React项目并配置构建命令
  • 全球CDN加速：边缘网络确保全球用户快速访问
  • Git集成：支持GitHub/GitLab等平台，实现提交即部署（CI/CD）
  • 免费套餐：适合个人项目和小型应用

2. Vercel部署流程

步骤1：项目准备

# 确保项目可本地构建
npm run build

步骤2：关联Vercel

  1. 登录Vercel官网
  2. 通过Git导入项目仓库
  3. 自动检测React项目并配置：
    • Build Command: npm run build
    • Output Directory: build

步骤3：环境变量配置

  • 在Dashboard中添加.env中的生产环境变量
  • 支持预览分支的环境变量隔离

高级功能

  • 自定义域名：绑定自己的域名并自动SSL加密
  • Serverless Functions：无缝集成API路由
  • 预览部署：每个Pull Request生成独立预览URL

3. Netlify部署指南

基本部署

  1. 拖拽build文件夹到Netlify网页
  2. 或通过Git仓库连接：
    • Build command: npm run build
    • Publish directory: build

特色功能

  • Forms Handling：自动收集静态表单提交
  • Split Testing：A/B测试不同分支版本
  • Redirects/Rewrites：通过_redirects文件配置路由规则

持续部署

# 示例配置文件
[build]
  command = "npm run build"
  publish = "build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

4. 对比与选型建议

特性VercelNetlify
React优化⭐️ 官方合作框架优先支持⭐️ 通用前端支持
Serverless内置Node.js/Python函数需手动配置AWS Lambda
部署速度极快（边缘网络）较快
适合场景Next.js项目/高频更新静态站点/传统SPA

5. 常见问题解决

  • 404错误：确保单页应用配置了重定向规则
  • 环境变量缺失：检查构建时变量是否注入
  • 构建失败：通过日志查看npm install错误

最佳实践：

  • 使用VERCEL_URL环境变量动态配置API地址
  • 通过npm install --omit=dev减少部署体积
  • 启用自动缓存依赖加速后续构建
Last Updated::