前端 CI/CD 自動化部署 GitHub / GitLab 項目到服務器

• GitHub篇
• GitLab篇

 

 GitHub 篇：

參考資料：

1. GitHub Actions 入門教程 - 阮一峰
2. GitHub Actions Documentation
3. Workflow syntax for GitHub Actions
4. Actions 插件：ssh deploy 配置
5. GitHub Action一鍵部署 - Yopai's Blog

 

1.配置工作流程：

• 在倉庫的根目錄，創建 .github/workflows 目錄
• 在 .github/workflows 目錄下 添加 xxx.yml 或 xxx.yaml 文件 (注意保持縮進, 文件名 xxx 隨意，語法：參考資料 3. )

　　

 

 2.配置服務器密鑰：(密鑰在文件在 ~/.ssh/ 目錄下)

• 生成密鑰：ssh-keygen -m PEM -t rsa -b 4096 -C "[e-mail]" （注意郵箱更換成自己GitHub上的郵箱, 一路回車就行）
• 將公鑰保存到 authorized_keys 文件中：cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys

 

 3.配置GitHub SSH、Secrets

• 配置路徑：當前倉庫 -> Settings -> Secrets （這里配置的變量是 xxx.yml 文件中 ${{secrets.你配置的名稱}} 需要用到的。請看參考資料 4. ）

　　

 

•  配置 SSH 公鑰 （將服務器公鑰添加到GitHub賬戶的SSH）

　　

 

工作流程文件示例：

name: Tser CI

on:
  push:
    branches:
      - master

jobs:
  # 發布到 GitHub Pages
  # build-and-deploy-to-github-pages:
  #   runs-on: ubuntu-latest
  #   steps:
  #     - name: Checkout
  #       uses: actions/checkout@master

  #     - name: Build and Deploy to GitHub Pages
  #       uses: JamesIves/github-pages-deploy-action@master
  #       env:
  #         ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
  #         BRANCH: gh-pages
  #         FOLDER: build
  #         BUILD_SCRIPT: npm install && npm run build

  # 發布到服務器
  build-and-deploy-to-server:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Setup Node.js environment
        uses: actions/setup-node@v1
        with:
          node-version: 12.x

      - name: Install Dependencies
        run: npm install
        env:
          CI: true

      - name: Build Project
        run: npm run build
        env:
          CI: true

      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@v2.1.2
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: '-rltgoDzvO --delete'
          SOURCE: 'build/'
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: ${{ secrets.REMOTE_TARGET }}

 

提交代碼，在 倉庫 -> Actions 下查看執行記錄

 

 

 

 GitLab 篇：

 （以windows為例）

參考資料：

1.  Install GitLab Runner on Windows
2. GitLab CI/CD Pipeline Configuration Reference
3. Registering Runners

 

1.安裝 GitLab Runner

• 按 win + q 鍵，輸入powershell ，以管理員身份運行

 

• 安裝 GitLab Runner （請看參考資料 1.）

1.  在打開的 powershell 中 創建 C:\GitLab-Runner 目錄 mkdir C:\GitLab-Runner
2. 把下載的gitlab-runner安裝包重命名成：gitlab-runner.exe 然后放到 C:\GitLab-Runner 目錄下
3. 在 powershell 中執行命令：cd C:\GitLab-Runner && .\gitlab-runner.exe install && .\gitlab-runner.exe start

 

• 注冊 runners (同樣以管理員身份在 powershell 中執行命令。請看參考資料 3.) 

　　注冊所需 URL 和 token：（倉庫 -> Settings -> CI/CD Pipelines）

　　

　　注冊步驟：

　　

 

 

 

2.項目根目錄下配置 .gitlab-ci.yml 文件 （不要隨意起名，語法：請看參考資料 2.）

 .gitlab-ci.yml 文件內容示例：

Deploy To Server:
  stage: deploy
  script:
    - ls
    - whoami
    - rm -r C:\inetpub\wwwroot\*
    - cp -r ./dist/* C:\inetpub\wwwroot\
  only:
    - master
  tags:
    - IFSDeploy

 注意：我這里把打包之后的文件（dist目錄）也提交到倉庫了，也可以把打包的步驟放到自動化部署中執行，需要去探索。