github actions 入門指南及博客自動部署實踐

自從 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 入門指南及實踐
• 系列文章: 我的服務器運維指南

快速開始

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

若是你是一個前端項目，可使用 Node.js 的模板，點擊 Set up this workflow

此時生成了一個文件 .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 標籤頁看到執行結果

術語

• 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

- 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/
複製代碼

部署成功

更多文章

• 前端部署發展史
• docker 簡易入門
• 我的服務器運維指南
• 當我有一臺服務器時我作了什麼
• 若是你想搭建一個博客
• github actions 入門指南及博客自動部署實踐
• 使用 k8s 部署你的第一個應用: Pod，Deployment 與 Service
• 使用 k8s 爲你的應用配置域名: Ingress
• 使用 k8s 爲你的域名加上 https

---

我是山月，我會按期分享全棧文章在我的公衆號中。若是你對全棧面試，前端工程化，graphql，devops，我的服務器運維以及微服務感興趣的話，能夠關注我。若是想進羣交流，能夠添加我微信 shanyue94，備註加羣。