王玉军博客

Appearance

CI/CD 实践指南 ​

简介 ​

CI/CD（持续集成/持续部署）是现代软件开发的重要实践。本文将介绍 CI/CD 的核心概念、工具和最佳实践。

持续集成 (CI) ​

1. GitHub Actions ​

yaml
# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
        
    - name: Install dependencies
      run: pnpm install
      
    - name: Run tests
      run: pnpm test
      
    - name: Build
      run: pnpm build
      
    - name: Upload build artifacts
      uses: actions/upload-artifact@v2
      with:
        name: build
        path: dist/

2. GitLab CI ​

yaml
# .gitlab-ci.yml
stages:
  - test
  - build
  - deploy

test:
  stage: test
  image: node:16
  script:
    - npm install
    - npm test

build:
  stage: build
  image: node:16
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  image: alpine
  script:
    - echo "Deploying to production"
  only:
    - main

持续部署 (CD) ​

1. 自动部署配置 ​

yaml
# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    
    - name: Download build artifacts
      uses: actions/download-artifact@v2
      with:
        name: build
        
    - name: Deploy to server
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.SSH_KEY }}
        source: "dist/*"
        target: "/var/www/html"

2. Docker 部署 ​

dockerfile
# Dockerfile
FROM node:16-alpine as builder

WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install

COPY . .
RUN pnpm build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

自动化测试 ​

1. 单元测试 ​

yaml
# .github/workflows/test.yml
name: Test

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
        
    - name: Install dependencies
      run: pnpm install
      
    - name: Run unit tests
      run: pnpm test:unit
      
    - name: Run integration tests
      run: pnpm test:integration

2. E2E 测试 ​

yaml
# .github/workflows/e2e.yml
name: E2E Tests

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    
    - name: Cypress run
      uses: cypress-io/github-action@v2
      with:
        start: pnpm start
        wait-on: 'http://localhost:3000'

环境管理 ​

1. 环境配置 ​

yaml
# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    environment: production
    steps:
    - name: Deploy to production
      run: |
        echo "Deploying to ${{ github.event.repository.name }}"
        echo "Environment: ${{ github.event.repository.environment }}"

2. 环境变量 ​

yaml
# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    environment: production
    env:
      NODE_ENV: production
      API_URL: ${{ secrets.API_URL }}
    steps:
    - name: Deploy
      run: |
        echo "Deploying with API URL: ${{ env.API_URL }}"

监控和通知 ​

1. 部署通知 ​

yaml
# .github/workflows/notify.yml
name: Notify

on:
  workflow_run:
    workflows: ["Deploy"]
    types:
      - completed

jobs:
  notify:
    runs-on: ubuntu-latest
    steps:
    - name: Notify Slack
      uses: 8398a7/action-slack@v3
      with:
        status: ${{ github.event.workflow_run.conclusion }}
        fields: repo,message,commit,author,action,eventName,ref,workflow
      env:
        SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

2. 性能监控 ​

yaml
# .github/workflows/performance.yml
name: Performance

on:
  push:
    branches: [ main ]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    
    - name: Run Lighthouse CI
      uses: treosh/lighthouse-ci-action@v8
      with:
        uploadArtifacts: true
        temporaryPublicStorage: true

最佳实践 ​

  1. CI 最佳实践

    • 频繁提交代码
    • 自动化测试
    • 快速构建
    • 及时反馈

  2. CD 最佳实践

    • 自动化部署
    • 环境一致性
    • 回滚机制
    • 监控告警

  3. 安全实践

    • 密钥管理
    • 访问控制
    • 代码扫描
    • 依赖检查

工具链 ​

1. 常用工具 ​

yaml
# 工具配置示例
tools:
  - name: ESLint
    config: .eslintrc.js
  - name: Prettier
    config: .prettierrc
  - name: Jest
    config: jest.config.js
  - name: Cypress
    config: cypress.config.js

2. 监控工具 ​

yaml
# 监控配置示例
monitoring:
  - name: Sentry
    config: sentry.config.js
  - name: New Relic
    config: newrelic.js
  - name: Google Analytics
    config: analytics.config.js

总结 ​

CI/CD 是现代软件开发流程中不可或缺的一部分，通过自动化构建、测试和部署，可以提高开发效率和产品质量。

参考资源 ​