這是第 96 篇不摻水的原創，想獲取更多原創好文，請搜尋公眾號關注我們吧~ 本文首發於政採雲前端部落格：手把手教你用 Github Actions 部署前端專案
為什麼使用 Github Actions ？
眾所周知，前端部署無非就是把打包之後的程式碼丟到 nginx html 目錄下就完事了，但是每逢產品頻繁改需求，甚至只是讓你改線上一個字的時候，你總要重複一遍遍以下動作：修改，打包，登入伺服器，上傳程式碼，重啟伺服器。久而久之，別說是你受不了了，擱我旁邊看著都受不了。這個時候，有沒有想過有個機器人，能幫我們完成以上這些重複又沒技術含量的活。沒錯，你猜對了，Github Actions 就是我們需要的那個機器人。
Github Actions 是什麼？
大家知道，持續整合由很多操作組成，比如拉取最新程式碼、執行測試、登入伺服器、部署伺服器等，GitHub 把這些操作統一稱為 Actions 。
我們再梳理下正常需求的開發流程（如上圖），以上操作是可重複利用的，利用這一概念，Github 整合了 Actions 市場，允許開發者把操作寫成獨立的指令碼，釋出到 Actions 市場，允許所有開發者使用，這裡有點像 npm 和 vscode 中的外掛。
Github 給我們提供了一個以下配置的伺服器來執行我們配置對應的 Actions
- 2-core CPU
- 7 GB of RAM memory
- 14 GB of SSD disk space
這個配置足夠我們使用了，當然，如果你有網路時延的需求，（比如推送及拉取映象時產生的網路時延），你也可以自建伺服器。
開始：部署自己的前端專案
1、選擇 Github 專案倉庫
這裡我選擇了剛開始很久以前學習 vue 時做的模仿bilibili做的專案 bilibili-vue ，進入專案倉庫，可以看到對應的 Actions 標籤，點選進入。
2、新建工作流，配置 Actions
進入 Actions 後可以看到很多推薦的工作流模版，這裡可以根據需要自行選擇需要的模版，或者跳過模版，自行設定。
這裡因為我是純前端專案，所以我選擇 Node.js 模版。
點選 node.js 模版，會自動在專案 .github/workflows 目錄下生成 node.js.yml 檔案，我們可以把檔名字改成我們工作流的名稱。當然，這裡可以設定並存在很多工作流 yml 檔案，例如 deploy.yml、test.yml、gh-page.yml 等。
# workflow名稱。省略的話，預設為當前workflow檔名
name: Node.js CI
# 觸發workflow的條件，
on:
push:
# 只有master分支發生push事件時，才會觸發workflow
branches: [ master ]
pull_request:
branches: [ master ]
# jobs表示執行的一項或多項任務
jobs:
# 任務的job_id，具體名稱自定義，這裡build代表打包
build:
# runs-on欄位指定執行所需要的虛擬機器環境。注意：這個是必填欄位
runs-on: ubuntu-latest
# 用於配置當前workflow的引數
strategy:
matrix:
node-version: [10.x, 12.x, 14.x, 15.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
# steps欄位指定每個job的執行步驟，可以包含一個或多個步驟，每個步驟都可以配置指定欄位
steps:
# 切程式碼到 runner
- uses: actions/checkout@v2
# 在當前作業系統安裝node
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
# 該執行的命令或者action
# 安裝依賴、執行測試、打包
- run: npm install
- run: npm test
- run: npm run build
複製程式碼3、常見的 Actions 配置
打版本標籤 Create Tag Release
這裡使用 Actions 市場中的 Create Tag Release 外掛
on:
push:
# Sequence of patterns matched against refs/tags
tags:
- 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
name: Create Release
jobs:
build:
name: Create Release
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@master
- name: Create Release
id: create_release
uses: actions/create-release@latest
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
with:
tag_name: ${{ github.ref }}
release_name: Release ${{ github.ref }}
body: |
Changes in this Release
- First Change
- Second Change
draft: false
prerelease: false
複製程式碼建立 Github Pages 站點
這裡使用 Actions 市場中的 GitHub Pages v3 外掛
name: github pages
on:
push:
branches:
- master # default branch
jobs:
deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v2
- run: npm install
- run: npm run docs:build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./docs-dist
複製程式碼多人協作開發，雲端程式碼檢測
name: Test
on: [push, pull_request]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: '12.x'
- name: Install dependencies
uses: bahmutov/npm-install@v1
- name: Run linter
run: npm run lint
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: '12.x'
- name: Install dependencies
uses: bahmutov/npm-install@v1
- name: Run test
run: npm test
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: '12.x'
- name: Install dependencies
uses: bahmutov/npm-install@v1
- name: Build
run: npm run build
複製程式碼以上是 Github 中常見的一些配置，更多 Actions 配置可以參考官網。
4、搭配 docker
為什麼要使用 docker ？
沒有 docker 之前，我是使用 webhook 實現自動部署，但後面遇到了伺服器到期更換伺服器的時候，就只能一個個重複操作來做遷移，而且檔案目錄管理混亂，專案變多時，維護成本也會越來越高。再看 docker 五大優勢：持續整合、版本控制、可移植性、隔離性和安全性，是不是就是用來解決我們上述遇到的問題的。
舉例：bilibili-vue ，不明白的同學可以參考我的配置。
4.1 專案根目錄新建 Nginx 配置
專案根目新建 nginx 配置檔案命名 vhost.nginx.conf（名字隨便定，跟後面 Dockerfile 中引用一致即可）供後續使用，例：
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
proxy_set_header Host $host;
if (!-f $request_filename) {
rewrite ^.*$ /index.html break;
}
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
複製程式碼4.2 專案根目錄新建 Dockerfile 檔案
專案根目錄新建 Dockerfile 檔案，構建映象包使用，例：
FROM nginx
COPY ./dist/ /usr/share/nginx/html/
# 第一步nginx配置檔名稱
COPY ./vhost.nginx.conf /etc/nginx/conf.d/bilibili-vue.conf
EXPOSE 80
複製程式碼4.3 配置容器映象服務
這裡我選擇了阿里雲的容器映象服務，為什麼不使用國外的 dockhub 呢，因為這樣使用起來速度快一點，而且有免費的個人版足夠我們使用。
4.3.1 第一步
初次開啟需要開通服務，配置登入密碼（記下來，後面要用）。
4.3.2 第二步
然後建立名稱空間，再建立我們的映象倉庫，這裡如果不想別人下載你的映象的話就可以選擇私有。然後點選下一步配置程式碼源，這裡我選擇了本地倉庫，一方面是為了日誌統一，可以在 Github Actions 看到所有日誌，一方面是可以通過命令列直接推送映象到映象倉庫，自由度比較高。
4.3.3 第三步
之後就可以在頁面看到我們建立的倉庫，點選倉庫名稱進入，可以看到倉庫的基本資訊和操作指南，這個時候一個映象倉庫就完全建立成功了。
4.4 如何跟 Actions 聯動
我們只用在 Actions 中 build 映象後登入阿里雲 Registry 例項就好了，但是這個時候如果明文直接寫在 yml 中肯定是不行的，Github 早就幫我們考慮到了這點，回到 Github 專案中，依次點選 Settings => Secrets => New repository secret ，設定 secret ，配置上述容器映象賬號的使用者名稱（阿里雲使用者名稱）和密碼（上述配置容器映象服務時設定的登入密碼）。
5、完整的 Actions
name: Docker Image CI # Actions名稱
on: [push] # 執行時機
jobs:
# 這裡我使用的是yarn，想用npm的同學將yarn命令修改為npm命令即可
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
# 安裝依賴
- name: install
run: yarn
# 打包
- name: build project
run: yarn run build
# 打包映象推送到阿里雲容器映象服務
- name: Build the Docker image
run: |
docker login --username=${{ secrets.DOCKER_USERNAME }} registry.cn-hangzhou.aliyuncs.com --password=${{ secrets.DOCKER_PASSWORD }}
docker build -t bilibili-vue:latest .
docker tag bilibili-vue registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
docker push registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest # 推送
- name: ssh docker login # 使用appleboy/ssh-action@master登入伺服器執行拉取映象指令碼，伺服器ip、使用者名稱、密碼配置方式同容器映象服務配置方式一樣
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.SSH_HOST }}
username: ${{ secrets.SSH_USERNAME }}
password: ${{ secrets.SSH_PASSWORD }}
script: cd ~ && sh bilibili-vue-deploy.sh ${{ secrets.DOCKER_USERNAME }} ${{ secrets.DOCKER_PASSWORD }}
複製程式碼最後一步登入伺服器後，我執行了一個指令碼來拉取雲端最新映象，並刪除舊映象，啟動新映象。指令碼內容如下。
echo -e "---------docker Login--------"
docker login --username=$1 registry.cn-hangzhou.aliyuncs.com --password=$2
echo -e "---------docker Stop--------"
docker stop bilibili-vue
echo -e "---------docker Rm--------"
docker rm bilibili-vue
docker rmi registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------docker Pull--------"
docker pull registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 8081:80 --name bilibili-vue registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------deploy Success--------"
複製程式碼6、測試流程，檢視日誌
我們推送一次程式碼測試，開啟 Actions 後可以看到自動執行的實時 workflow 結果，以及每步的日誌資訊。
總結
到此我們自動化部署成功，再也不要每次修改程式碼，手動更新線上了，後面遷移也會更方便，當然還有更多的自動化部署方式，比如直接使用 Github + 阿里雲映象倉庫的觸發器一樣可以做到，容器服務也不僅限於阿里雲，騰訊雲等其他雲服務廠商同樣也是一樣的使用方式。以上是我個人使用 Actions 的一些總結，如有錯誤，勞煩指正修改。當然對更多 Actions 玩法感興趣的同學歡迎一起交流學習。當然這個僅限於個人的專案玩法，公司內部的專案有更加成熟完善的自動化方案，比如我們內部所使用的雲長系統，就是解決此類問題的，具體雲長的功能，他做了些什麼，敬請期待。
參考文獻
推薦閱讀
招賢納士
政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 40 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的“老”兵，也有浙大、中科大、杭電等校的應屆新人。團隊在日常的業務對接之外，還在物料體系、工程平臺、搭建平臺、效能體驗、雲端應用、資料分析及視覺化等方向進行技術探索和實戰，推動並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。
如果你想改變一直被事折騰，希望開始能折騰事；如果你想改變一直被告誡需要多些想法，卻無從破局；如果你想改變你有能力去做成那個結果，卻不需要你；如果你想改變你想做成的事需要一個團隊去支撐，但沒你帶人的位置；如果你想改變既定的節奏，將會是“5 年工作時間 3 年工作經驗”；如果你想改變本來悟性不錯，但總是有那一層窗戶紙的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望參與到隨著業務騰飛的過程，親手推動一個有著深入的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我覺得我們該聊聊。任何時間，等著你寫點什麼，發給 ZooTeam@cai-inc.com