手把手教你用 Github Actions 部署前端項目

時間 2021-04-14

標籤 html 前端 vue node nginx git github web docker shell 欄目 Git 简体版

原文原文鏈接

這是第 96 篇不摻水的原創，想獲取更多原創好文，請搜索公衆號關注咱們吧~ 本文首發於政採雲前端博客：手把手教你用 Github Actions 部署前端項目

爲何使用 Github Actions ？

衆所周知，前端部署無非就是把打包以後的代碼丟到 nginx html 目錄下就完事了，可是每逢產品頻繁改需求，甚至只是讓你改線上一個字的時候，你總要重複一遍遍如下動做：修改，打包，登陸服務器，上傳代碼，重啓服務器。長此以往，別說是你受不了了，擱我旁邊看着都受不了。這個時候，有沒有想過有個機器人，能幫咱們完成以上這些重複又沒技術含量的活。沒錯，你猜對了，Github Actions 就是咱們須要的那個機器人。html

Github Actions 是什麼？

你們知道，持續集成由不少操做組成，好比拉取最新代碼、運行測試、登陸服務器、部署服務器等，GitHub 把這些操做統一稱爲 Actions 。前端

咱們再梳理下正常需求的開發流程（如上圖），以上操做是可重複利用的，利用這一律念，Github 集成了 Actions 市場，容許開發者把操做寫成獨立的腳本，發佈到 Actions 市場，容許全部開發者使用，這裏有點像 npm 和 vscode 中的插件。vue

Github 給咱們提供了一個如下配置的服務器來運行咱們配置對應的 Actionsnode

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

這個配置足夠咱們使用了，固然，若是你有網絡時延的需求，（好比推送及拉取鏡像時產生的網絡時延），你也能夠自建服務器。nginx

開始：部署本身的前端項目

一、選擇 Github 項目倉庫

這裏我選擇了剛開始好久之前學習 vue 時作的模仿bilibili作的項目 bilibili-vue ，進入項目倉庫，能夠看到對應的 Actions 標籤，點擊進入。git

二、新建工做流，配置 Actions

進入 Actions 後能夠看到不少推薦的工做流模版，這裏能夠根據須要自行選擇須要的模版，或者跳過模版，自行設置。github

這裏由於我是純前端項目，因此我選擇 Node.js 模版。web

點擊 node.js 模版，會自動在項目 .github/workflows 目錄下生成 node.js.yml 文件，咱們能夠把文件名字改爲咱們工做流的名稱。固然，這裏能夠設置並存在不少工做流 yml 文件，例如 deploy.yml、test.yml、gh-page.yml 等。docker

# 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

三、常見的 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 配置能夠參考官網。shell

四、搭配 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 ，配置上述容器鏡像帳號的用戶名（阿里雲用戶名）和密碼（上述配置容器鏡像服務時設置的登陸密碼）。

五、完整的 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--------"

六、測試流程，查看日誌

咱們推送一次代碼測試，打開 Actions 後能夠看到自動運行的實時 workflow 結果，以及每步的日誌信息。

總結

到此咱們自動化部署成功，不再要每次修改代碼，手動更新線上了，後面遷移也會更方便，固然還有更多的自動化部署方式，好比直接使用 Github + 阿里雲鏡像倉庫的觸發器同樣能夠作到，容器服務也不只限於阿里雲，騰訊雲等其餘雲服務廠商一樣也是同樣的使用方式。以上是我我的使用 Actions 的一些總結，若有錯誤，勞煩指正修改。固然對更多 Actions 玩法感興趣的同窗歡迎一塊兒交流學習。固然這個僅限於我的的項目玩法，公司內部的項目有更加成熟完善的自動化方案，好比咱們內部所使用的雲長系統，就是解決此類問題的，具體雲長的功能，他作了些什麼，敬請期待。

參考文獻

GitHub Actions 入門教程

持續集成是什麼？

招賢納士

政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 40 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的「老」兵，也有浙大、中科大、杭電等校的應屆新人。團隊在平常的業務對接以外，還在物料體系、工程平臺、搭建平臺、性能體驗、雲端應用、數據分析及可視化等方向進行技術探索和實戰，推進並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。

若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5 年工做時間 3 年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手推進一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com