前端 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/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: ${{ secrets.REMOTE_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: sudo systemctl restart nginx

# .gitlab-ci.yml
stages:
  - test
  - build
  - deploy
test:
  stage: test
  image: node:16
  script:
    - npm install
    - npm test
  only:
    - main
build:
  stage: build
  image: node:16
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - build/
  only:
    - main
deploy:
  stage: deploy
  image: alpine:latest
  script:
    - apk add --no-cache rsync openssh
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - ssh-keyscan -H $REMOTE_HOST >> ~/.ssh/known_hosts
    - rsync -avz --delete build/ $REMOTE_USER@$REMOTE_HOST:$REMOTE_TARGET
    - ssh $REMOTE_USER@$REMOTE_HOST "sudo systemctl restart nginx"
  only:
    - main
  environment:
    name: production

// Jenkinsfile
pipeline {
  agent any
  stages {
    stage('Checkout') {
      steps {
        checkout scm
      }
    }
    stage('Install Dependencies') {
      steps {
        sh 'npm install'
      }
    }
    stage('Test') {
      steps {
        sh 'npm test'
      }
    }
    stage('Build') {
      steps {
        sh 'npm run build'
      }
    }
    stage('Deploy') {
      steps {
        sh '''
          scp -r build/* user@server:/var/www/html/
          ssh user@server "sudo systemctl restart nginx"
        '''
      }
    }
  }
  post {
    always {
      echo 'Pipeline completed'
    }
    success {
      echo 'Deployment successful'
    }
    failure {
      echo 'Deployment failed'
    }
  }
}

# .env
REMOTE_HOST=your-server.com
REMOTE_USER=deploy
REMOTE_TARGET=/var/www/html/
# SSH 密钥请在 CI/CD 平台的 secrets 中配置，勿直接写入