使用 JS 開發 Github Actions 實現自動部署前後台項目到自己伺服器

• 2020 年 7 月 15 日
• 筆記

不想看前面這麼多廢話的可以直接跳到具體實現

Github Actions 是什麼？

說到 Github Actions 不得不提一下。

• 持續集成（continuous integration）：高品質的讓產品快速迭代
• 持續交付（continuous delivery）：交付給團隊測試
• 持續部署（continuous deployment）：持續交付的下一步核心概念團隊測試完成後自動部署到生產環境

CI/CD 是由很多操作組成的(如：執行單元測試、語法檢查、打包、部署等等)。Github 把這些操作稱為action，不同的項目很多的操作都是類似，Github 把這些操作整合成了一個市場允許大家發布或使用別人寫好的action。

Github Actions 的核心概念

操作（Action）

• action是工作流中最小的可移植模組
• 可以創建屬於自己的action，使用 Github 社區提供的action以及自定義公開的action
• 在工作流中使用需要將其作為steps包含
• 使用是 用戶名/倉儲名/版本(或分支) 如：actions/checkout@master

事件（Event）

• 觸發工作流運行的特定事件
• Github 本身事件提交、創建問題、PR等
• 使用 webhook 配置發生在外部的事件

具體事件請參閱

GitHub-hosted runner

作業（Job）

• 在同一個運行程式上執行的一組步驟。
• 可以為作業在工作流文件中的運行方式定義依賴關係規則。
• 作業可以同時並行運行，也可以按順序運行，具體取決於前一個作業的狀態。例如，一個工作流可以有兩個連續的作業來生成和測試程式碼，其中測試作業取決於生成作業的狀態。如果生成作業失敗，測試作業將不會運行。
• 對於 GitHub 託管的運行程式，工作流中的每個作業都在虛擬環境的新實例中運行。

具體作業詳細配置請參閱

步驟（Step）

• 步驟是可以運行命令或操作的單個任務。
• 一個作業可配置一個或多個步驟。
• 作業中的每個步驟都在同一個運行器上執行，從而允許該作業中的操作使用文件系統共享資訊。

工作流（Workflow）

• 可配置的自動化過程。測試、打包、發布或部署等等。
• 工作流由一個或多個作業組成，可以通過事件計劃或激活。

工作流配置文件（Workflow file）

• 所有需要執行的工作流都必須放在 GitHub 存儲庫的根目錄下的.gitHub/workflows 目錄中。
• 需要使用YAML文件配置並以.yml後綴結尾

我為什麼要使用 Github Actions

在沒有使用 Github Actions 我部署程式是這樣的。

如何使用？

使用 Github Actions 後。

為什麼要自己寫一個 Github Actions

1. 出來很久一直在用有點好奇是怎麼處理的
2. 網上找了一些各種測試不成功(其實這才是主要原因哈哈)

開始動手了

目錄結構

shh-deploy
|—— dist（編譯後的目錄可用直接運行）
|   |—— index.js
|—— lib（TS輸出文件）
|—— src（源碼文件）
|   |—— main.ts
|   |—— sftp.ts
|   |—— ssh-deploy.ts
|   action.yml（Github Actions的配置文件）
|   tsconfig.json（TS配置文件）

思考？

我們既然要實現自動部署。

1. 需要連接到伺服器ip、port、username、password
2. 需要哪些文件(source)
3. 部署到伺服器哪個目錄下(target)
4. 文件複製完後需要執行安裝依賴重啟服務等等之內的工作(after command)

知道我們需要什麼後，接下來就來看具體實現。

Github Actions 具體實現

# action.yml 配置文件
name: 'SSH Auto Deploy' # 名稱
description: 'ssh auto deploy' # 描述
author: 'hengkx' # 作者
branding:
  icon: 'crosshair' # 使用的是Feather的圖標
  color: 'gray-dark' # 圖標顏色
inputs: # 輸入參數
  HOST: # 伺服器地址
    description: 'remote host' # 參數描述
    required: true # 是否必填
  USERNAME: # 用戶名
    description: 'username'
    required: true
  PASSWORD: # 密碼
    description: 'password'
    required: true
  PORT: # 埠
    description: 'port'
    default: 22 # 默認值
  SOURCE: # 源目錄
    description: 'local path'
    required: true
  TARGET: # 目標目錄
    description: 'remote target'
    required: true
  AFTER_COMMAND: # 文件上傳文成後執行
    description: 'upload success execute command'
runs: # 運行環境
  using: 'node12'
  main: 'dist/index.js' # 所執行的文件

有一點需要注意我們所提交的程式碼包含node_modules或者使用@zeit/ncc直接打包成可執行文件

// main.ts
import * as core from '@actions/core';
import { Client } from 'ssh2';
import Sftp from './sftp';

function exec(conn: Client, command: string) {
  return new Promise((resolve, reject) => {
    conn.exec(command, (err, stream) => {
      if (err) return reject(err);
      stream
        .on('close', function (code) {
          resolve(code);
        })
        .on('data', function (data) {
          core.info(data.toString());
        })
        .stderr.on('data', function (data) {
          core.error(data.toString());
        });
    });
  });
}

export async function run() {
  try {
    const host = core.getInput('HOST'); // 使用這個方法來獲取我們在action.yml配置文件中設置的輸入參數
    const port = parseInt(core.getInput('PORT'));
    const username = core.getInput('USERNAME');
    const password = core.getInput('PASSWORD');
    const src = core.getInput('SOURCE');
    const dst = core.getInput('TARGET');
    const afterCommand = core.getInput('AFTER_COMMAND');
    // 下面為ssh鏈接伺服器上傳文件並執行命令
    const conn = new Client();

    conn.on('ready', async () => {
      const sftp = new Sftp(conn);
      core.info('begin upload');
      await sftp.uploadDir(src, dst);
      core.info('end upload');
      let code: any = 0;
      if (afterCommand) {
        core.info('begin execute command'); // 輸出一條日誌
        code = await exec(conn, `cd ${dst} && ${afterCommand}`);
        core.info('end execute command');
      }
      conn.end();
      if (code === 1) {
        core.setFailed(`command execute failed`); // 告訴Github Actions執行失敗了
      }
    });
    conn.connect({ host, port, username, password });
  } catch (error) {
    core.setFailed(error.message);
  }
}

我的項目配置文件

name: Deploy

on: # 在master分支上提交程式碼執行
  push:
    branches: [master]

jobs: # 作業
  build-and-deploy: # 作業名稱
    runs-on: ubuntu-latest # 運行的環境

    steps: #步驟
      - name: Checkout # 步驟名
        uses: actions/checkout@master # 所使用的action

      - name: Setup Node.js environment
        uses: actions/[email protected]
        with:
          node-version: '12.x'

      - name: Build Project
        run: yarn && yarn run ci

      - name: Deploy to Server
        uses: hengkx/[email protected]
        with: # 以下為參數
          USERNAME: ${{ secrets.DEPLOY_USER }} # 為了用戶資訊安全對敏感數據可以在secrets中配置請看下圖
          PASSWORD: ${{ secrets.DEPLOY_PASSWORD }}
          HOST: ${{ secrets.DEPLOY_HOST }}
          SOURCE: 'dist'
          TARGET: '/root/task-market/api'
          AFTER_COMMAND: 'npm run stop && npm install --production && npm run start'

源碼地址

參考鏈接

• GitHub Actions 官方文檔
• GitHub Actions 入門教程