第17章 构建与部署

CI/CD集成与自动化部署

什么是CI/CD？

持续集成（Continuous Integration, CI）和持续部署（Continuous Deployment, CD）是现代软件开发中用于自动化构建、测试和部署的关键实践。通过CI/CD，开发团队可以：

• 快速发现并修复错误：每次代码提交后自动运行测试
• 提高发布效率：自动化部署流程减少人工干预
• 确保一致性：所有环境使用相同的构建过程

React项目的CI/CD配置

1. 基础配置

# 示例：GitHub Actions配置 (.github/workflows/deploy.yml)
name: Build and Deploy

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build
      - run: npm run test

2. 主流平台集成方案

部署策略详解

静态资源部署

# 使用Vercel CLI部署
npm install -g vercel
vercel --prod

关键注意事项

1. 环境变量管理：

   • 使用.env.production文件存储生产环境变量
   • 在CI平台配置敏感信息为Secret

2. 缓存优化：

   # Nginx配置示例
   location /static {
     expires 1y;
     add_header Cache-Control "public";
   }
   

3. 回滚机制：

   • 保留最近3-5个生产版本
   • 通过Git Tag实现版本追踪

监控与后续维护

• 部署后检查清单：

  1. 自动化冒烟测试（Smoke Test）
  2. 错误监控（Sentry/LogRocket）
  3. 性能基准测试（Lighthouse CI）

• 常见问题处理：

  # 查看构建失败日志
  vercel logs --scope your-project
  

进阶技巧

• 多环境部署：通过分支区分staging/production
• 渐进式发布：使用Feature Flags控制新功能曝光
• CDN集成：自动上传静态资源到AWS CloudFront等CDN

最佳实践提示：始终在CI流程中包含npm audit安全检查步骤，确保依赖库没有已知漏洞。