前端CI/CD流程:自动化部署的正确打开方式
毒舌时刻
CI/CD?听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为配置了CI/CD就能解决所有部署问题?别做梦了!到时候你会发现,CI/CD配置出错的概率比手动部署还高。
你以为随便找个CI/CD工具就能用?别天真了!不同的工具配置方式不同,坑也不同。比如Jenkins的配置文件就像是天书,GitLab CI的YAML语法也能让你崩溃。
为什么你需要这个
- 自动化部署:CI/CD可以自动完成代码测试、构建和部署,减少手动操作,提高部署效率。
- 减少人为错误:自动化部署可以避免手动部署时的人为错误,提高部署的可靠性。
- 快速反馈:CI/CD可以在代码提交后立即进行测试和构建,及时发现问题,提供快速反馈。
- 持续集成:CI/CD可以确保代码的持续集成,避免代码冲突和集成问题。
- 环境一致性:CI/CD可以确保不同环境的配置一致,避免环境差异导致的问题。
反面教材
# 这是一个典型的手动部署流程 # 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配置
# .github/workflows/deploy.yml 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 Node.js uses: actions/setup-node@v2 with: node-version: '16' - name: Install dependencies run: npm install - name: Run tests run: npm test - name: Build project run: npm run build - name: Deploy to server uses: easingthemes/ssh-deploy@v2 with: SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }} ARGS: '-rltgoDzvO --delete' SOURCE: 'build/' REMOTE_HOST: ${{ secrets.REMOTE_HOST }} REMOTE_USER: ${{ secrets.REMOTE_USER }} TARGET: ${{ secrets.REMOTE_TARGET }} - name: Restart server uses: appleboy/ssh-action@master with: host: ${{ secrets.REMOTE_HOST }} username: } key: } script: systemctl restart nginx

