前端 CI/CD 流程与自动化部署实践

前端 CI/CD 流程与自动化部署实践

常见误区

CI/CD 并非万能，配置不当可能增加维护成本。不同的工具配置方式不同，坑也不同。例如 Jenkins 的配置文件较为复杂，GitLab CI 的 YAML 语法也需要仔细处理。

引入 CI/CD 的价值

1. 自动化部署：自动完成代码测试、构建和部署，减少手动操作，提高效率。
2. 减少人为错误：避免手动部署时的人为失误，提高可靠性。
3. 快速反馈：代码提交后立即进行测试和构建，及时发现问题。
4. 持续集成：确保代码持续集成，避免冲突。
5. 环境一致性：确保不同环境的配置一致，避免差异导致的问题。

手动部署的局限性

# 这是一个典型的手动部署流程
# 1. 手动运行测试
npm test
# 2. 手动构建项目
npm run build
# 3. 手动上传构建文件到服务器
scp -r build/* user@server:/var/www/html/
# 4. 手动重启服务
ssh user@server "sudo systemctl restart nginx"

问题：

• 手动部署容易出错，如忘记运行测试或构建
• 部署过程不透明，难以追踪历史
• 环境配置不一致，导致失败
• 部署速度慢，影响效率
• 无法实现自动化回滚

主流工具配置方案

GitHub Actions 配置

name: Deploy to Production
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Set up