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

引言

在现代软件开发中，自动化部署和持续集成/持续部署（CI/CD）已成为提高开发效率、保证代码质量和加速交付过程的关键实践。通过自动化的流程，团队可以减少人为错误，加快发布周期，并确保每次部署的一致性和可靠性。

CI/CD基础概念

持续集成（Continuous Integration）

持续集成是一种软件开发实践，开发人员频繁地将代码变更集成到共享仓库中，每次集成都会通过自动化构建和测试来验证。

持续部署（Continuous Deployment）

持续部署是在持续集成的基础上，自动将通过测试的代码变更部署到生产环境。

持续交付（Continuous Delivery）

持续交付确保软件可以随时发布到生产环境，但发布决定仍需人工确认。

主流CI/CD平台

GitHub Actions

# .github/workflows/deploy.ymlname:Deploy Applicationon:push:branches:[main]pull_request:branches:[main]jobs:test:runs-on:ubuntu-lateststrategy:matrix:node-version:[14.x,16.x,18.x]steps:-uses:actions/checkout@v3-name:Use Node.js ${{matrix.node-version}}uses:actions/setup-node@v3with:node-version:${{matrix.node-version}}cache:'npm'-name:Install dependenciesrun:npm ci-name:Run testsrun:npm testenv:CI:true-name:Run lintingrun:npm run lintbuild-and-deploy:needs:testruns-on:ubuntu-latestif:github.ref == 'refs/heads/main'steps:-uses:actions/checkout@v3-name:Setup Node.jsuses:actions/setup-node@v3with:node-version:'18.x'cache:'npm'-name:Install dependenciesrun:npm ci-name:Build applicationrun:npm run buildenv:NODE_ENV:production-name:Deploy to serverrun:|echo "部署应用到服务器" # 部署脚本env:DEPLOY_KEY:${{secrets.DEPLOY_KEY}}

GitLab CI/CD

# .gitlab-ci.ymlstages:-test-build-deployvariables:NODE_VERSION:"18"before_script:-echo "开始执行任务"-npm citest:stage:testimage:node:$NODE_VERSIONscript:-npm run test:unit-npm run test:e2ecoverage:'/Coverage:\s(\d+\.\d+%)/'artifacts:reports:coverage_report:coverage_format:coberturapath:coverage/cobertura-coverage.xmlbuild:stage:buildimage:node:$NODE_VERSIONscript:-npm run buildartifacts:paths:-dist/expire_in:1 weekdeploy_staging:stage:deployimage:node:$NODE_VERSIONscript:-echo "部署到测试环境"-npm run deploy:stagingenvironment:name:stagingurl:https://staging.example.comonly:-developdeploy_production:stage:deployimage:node:$NODE_VERSIONscript:-echo "部署到生产环境"-npm run deploy:productionenvironment:name:productionurl:https://example.comwhen:manualonly:-main

Docker自动化部署

Dockerfile配置

# Dockerfile FROM node:18-alpine AS builder WORKDIR /app # 复制依赖文件 COPY package*.json ./ RUN npm ci --only=production && npm cache clean --force # 复制源代码 COPY . . # 构建应用 RUN npm run build # 生产阶段 FROM nginx:alpine # 复制构建结果 COPY --from=builder /app/dist /usr/share/nginx/html # 复制nginx配置 COPY nginx.conf /etc/nginx/nginx.conf # 暴露端口 EXPOSE 80 # 健康检查 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ CMD curl -f http://localhost/health || exit 1 CMD ["nginx", "-g", "daemon off;"]

Docker Compose配置

# docker-compose.ymlversion:'3.8'services:app:build:.ports:-"80:80"environment:-NODE_ENV=production-API_URL=https://api.example.comdepends_on:-redis-dbnetworks:-app-networkrestart:unless-stoppedredis:image:redis:7-alpineports:-"6379:6379"volumes:-redis