github actions 入門指南及部落格自動部署實踐

shanyue發表於2019-11-25
Github

自從 github 提供了 github actions 後，個人或者依賴於 github 的公司可以考慮把持續整合方案遷到 github actions。

github 會提供一個以下配置的伺服器做為 runner，可以說相當良心了。

  • 2-core CPU
  • 7 GB of RAM memory
  • 14 GB of SSD disk space

另外如果你有網路時延的需求，也可以自建 runner。(比如構建及拉取映象)

本文將介紹 github actions 的用法，以及如何使用它自動部署個人部落格或者前端應用

快速開始

在 github 上進入個人倉庫，找到 Actions 的標籤頁

Actions

如果你是一個前端專案，可以使用 Node.js 的模板，點選 Set up this workflow

Actions Setup

此時生成了一個檔案 .github/workflows/nodejs.yaml，修改內容如下

name: Git Action Test

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js 10.x
      uses: actions/setup-node@v1
      with:
        node-version: 10.x
    - name: npm install, build
      run: |
        npm install
        npm run build --if-present
      env:
        CI: true
複製程式碼

執行 git push 操作，此時可以在 github 的 Actions 標籤頁看到執行結果

Actions Start

術語

  • runner: github 分配的用來執行 CI/CD 的構建伺服器 (也可以自建 runner)
  • workflow: CI/CD 的工作流
  • job: 任務，比如構建，測試和部署。每個 workflow 由多個 job 組成
  • step: 每個 job 由多個 step 組成

配置

參考官方文件: Workflow syntax for GitHub Actions

on

該 CI/CD 觸發時的事件。如果需要上傳程式碼自動部署的功能時，應該選擇 on: push

on: push
複製程式碼

更多事件可以參考官方文件 Events that trigger workflows

另外，我們可以利用 issues 事件做很多事情，如郵件通知之類

如果是 Issue 類部落格，則可以通過監聽 issues.opened 事件，呼叫 github api，自動生成網址部落格

on:
  issues:
    types: [opened, edited, milestoned]
複製程式碼

jobs

一個 CI/CD 的工作流有許多 jobs 組成，比如最典型的 job 是 lint，test，build 或者 deploy。

jobs:
  test:
  build: 
  deploy:
複製程式碼

所有的 job 都是並行的，但往往會有依賴關係：你總得通過測試了，才能再去部署吧

jobs.<job_id>.needs

needs 確定 job 的依賴關係

jobs:
  test:
  deploy:
    needs: test
複製程式碼

jobs.<job_id>.runs-on

當你使用 github actions 時，github 會十分大方的給你分配一個配置還不錯的伺服器作為構建伺服器，用來跑你的 workflow

  • 2-core CPU
  • 7 GB of RAM memory
  • 14 GB of SSD disk space

恩，比我自己的伺服器要強

使用 runs-on 指定伺服器系統，用的最多的應該就是 ubuntu-latest 了

runs-on: ubuntu-latest

runs-on: windows-latest
複製程式碼

jobs.<job_id>.steps

即某個任務的一系列動作，如部署一個前端需要安裝依賴，編譯程式碼等等

jobs.<job_id>.steps.name

為 step 指定一個名稱，將會在 github action 的控制檯中顯示

jobs.<job_id>.steps.run

該 step 需要在 shell 中執行的命令

# 單行
- name: Install Dependencies
  run: npm install

# 多行
- name: Install and Build
  run: |
    npm install
    npm run build
複製程式碼

jobs.<job_id>.steps.uses

選擇一個 action，可以理解為若干 steps.run，有利於程式碼複用。這也是 github action 最主要的功能。

如果你想找一個好用的 github action，可以在 github marketplace 瀏覽並檢索

這是一個在當前作業系統中安裝 node:10 的 action 示例

- name: use Node.js 10.x
  uses: actions/setup-node@v1
  with:
    node-version: 10.x
複製程式碼

當然，這裡怎麼能少得了 docker 的身影呢，在 actions 中也可以使用 docker。如果對 docker 不太瞭解，可以看我的文章: docker 簡易入門

以下是 npm install 的一個示例

jobs:
  build:
    steps:
      - name: Install
        uses: docker://node:alpine
        with:
          args: npm install
複製程式碼

secret and context

如何在 github action 上訪問敏感資料？如使用 ssh 登入時如何維護密碼。

我們可以在 github repo 上依次點選 Settings -> Secrets 設定 secret

Actions Secrect

- name: setup aliyun oss
  uses: manyuanrong/setup-ossutil@master
  with:
    endpoint: oss-cn-beijing.aliyuncs.com
    access-key-id: ${{ secrets.OSS_KEY_ID }}
    access-key-secret: ${{ secrets.OSS_KEY_SECRET }}
複製程式碼

這裡的 secret 就是一種 context，描述 CI/CD 一個 workflow 中的上下文資訊，使用 ${{ expression }} 語法表示。除了 secret，還有

  • github: workflow 的資訊，如 github.sha 可以獲取當前的 commit SHA，我們可以利用它為 sentry 或者 docker image 打入版本號
  • env: 環境變數
  • job: 當前執行 job 的資訊，如 job.status 表示當前 job 的執行狀態
  • matrix: 描述一些構建資訊，如 node 以及 os 版本號

更多 context 資訊可以參考官方文件 Contexts and expression syntax for GitHub Actions

實踐自動部署

我的部落格目前託管在阿里雲OSS上，以下 action.yaml 描述了自動部署的流程。可以參考我的配置 shfshanyue/blog

name: deploy to aliyun oss

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    # 切程式碼到 runner
    - uses: actions/checkout@v1
      with:
        submodules: true
    # 下載 git submodule
    - uses: srt32/git-actions@v0.0.3
      with:
        args: git submodule update --init --recursive
    # 使用 node:10
    - name: use Node.js 10.x
      uses: actions/setup-node@v1
      with:
        node-version: 10.x
    # npm install
    - name: npm install and build
      run: |
        npm install
        npm run build
      env:
        CI: true
    # 設定阿里雲OSS的 id/secret，儲存到 github 的 secrets 中
    - name: setup aliyun oss
      uses: manyuanrong/setup-ossutil@master
      with:
        endpoint: oss-cn-beijing.aliyuncs.com
        access-key-id: ${{ secrets.OSS_KEY_ID }}
        access-key-secret: ${{ secrets.OSS_KEY_SECRET }}
    - name: cp files to aliyun
      run: ossutil cp -rf .vuepress/dist oss://shanyue-blog/
複製程式碼

部署成功

部署成功

更多文章

我是山月，我會定期分享全棧文章在個人公眾號中。如果你對全棧面試，前端工程化，graphql，devops，個人伺服器運維以及微服務感興趣的話，可以關注我。如果想進群交流，可以新增我微信 shanyue94，備註加群。

如果你對全棧面試，前端工程化，graphql，devops，個人伺服器運維以及微服務感興趣的話，可以關注我

相關文章