使用GitHub Actions實現前端自動化打包、部署

時間 2021-02-17

標籤前端 node react webpack git github web 數據庫 npm ubuntu 欄目 Git 简体版

原文原文鏈接

1、前言

做爲一名前端菜雞，服務器小白，剛開始在Linux服務器上部署網站時，前端代碼我通常都是打包後手動FTP傳上去，後端代碼直接在vscode中使用SSH鏈接服務器，直接同步代碼更改。前端

但小黑做爲一個生命不息折騰不止的程序猿，確定要探索更好玩更高效的方法，因此此次，咱就上手摺騰了下自動化部署方案node

2、準備工做

一、持續集成服務（CI）方案選擇

實現代碼提交的自動化工做流，要依靠持續集成（CI）（或者加上持續交付(CD)）服務。如今主流的公用免費的持續集成服務有：react

Travis CI
Jenkins
Circle CI
Azure Pipeline
GitHub Actions

其中GitHub Actions是GitHub自家的持續集成及自動化工做流服務，簡單易用，也是小黑本次使用的服務。它使用起來很是簡單，只要在你的倉庫根目錄創建.github/workflows文件夾，將你的工做流配置(YAML文件)放到這個目錄下，就能啓用GitHub Actions服務。webpack

小黑的網站是部署到騰訊雲服務器上的，因此配置過程當中用到了服務器相關配置，若是是想把網站放到GitHub Pages上，那隻須要有個Github倉庫就能夠開始折騰起來了，下文關於遠程服務器的配置能夠忽略掉。git

二、添加部署祕鑰

要把文件部署到遠程服務器，首先要解決登陸校驗的問題。github

比較常見的就是密碼登陸、SSH密鑰登陸或者VNC登陸。小黑推薦使用SSH密鑰登陸，既方便有安全。web

2.一、生成SSH密鑰對

相信須要遠程部署到服務器的小夥伴確定早就把SSH密鑰對配置好了，因此咱們能夠直接對應的私鑰文件內容複製一下，等下在GitHub中進行配置就能夠啦！這裏小黑就再也不贅述啦數據庫

2.二、GitHub填寫自動化配置項

SSH密鑰對生成後，其實準備工做就已經完成的差很少了，最後一步就是將YAML文件中所須要的配置項，配置到Github上npm

首先打開對應的倉庫，點擊Setting > Secrets > New sceret,而後將咱們複製的密鑰文件內容、服務器host和登陸用戶名都添加到配置以下圖對應的配置中，這樣的話即便像小黑同樣把項目開源，隱私信息也不會泄露啦。ubuntu

配置完上面這些，咱們的準備工做就大功告成了，接下來就能夠編寫工做流文件啦

3、配置過程

一、編寫工做流文件

在倉庫根目錄中建立.github/workflows文件夾，再建立一個YAML文件，文件名自定，我這裏起名叫deploy.yml，因此文件的完整路徑應該爲.github/workflows/deploy.yml，配置的意義寫在註釋中啦，固然小黑也會簡略的介紹下重點配置項

1.一、文件基礎配置

首先就是YAML文件比較基礎的配置

on裏的內容比較重要，指定自動觸發工做流文件的事件，也能夠將工做流設置爲只在某些分支、路徑或標記上運行。好比小黑就是在當master分支上進行push時纔會觸發,而後忽略掉README.md和LICENSE文件的變動

jobs裏就是接下來所要運行的全部工做流程，小黑就設置了build-production這一個job,根據須要也能夠設置多個

還有就是runs-on，小黑第一次還覺得是要填寫本身雲服務器的操做系統，就填了個centos,一跑就報錯，後來看了文檔才明白，這是配置用來運行job的GitHub託管的新虛擬機，和你所使用的操做系統及服務器系統無關，和小黑同樣配置爲ubuntu-latest就行

strategy中的node-version能夠不配置,爲了和本地node版本統一，小黑配置了一下

steps裏就是所須要運行的每個具體的步驟啦,下面就讓小黑一一道來

name: Blog CI/CD

on:

push:

branches:

- master # 只在master上push觸發部署

paths-ignore: # 下列文件的變動不觸發部署，能夠自行添加

- README.md

- LICENSE

jobs:

build-production:

runs-on: ubuntu-latest # 使用ubuntu系統鏡像運行自動化腳本(舒適提示：和你所使用的操做系統及服務器系統無關，我本地用的windows10,雲服務器用的centos)

strategy: (可選)

matrix:

node-version: [12.x] # 配置所需node版本

steps: # 自動化步驟

……

1.二、下載代碼

這一步就是檢出你的倉庫並下載裏面的代碼到runner中,actions/checkout@v2是官方本身造的輪子，直接拿來用就行

- uses: actions/checkout@v2 # 第一步，檢出倉庫副本

1.三、配置node版本(可選)

這一步就是安裝node,輪子也是官方的，版本能夠選填，使用npm進行打包(不須要打包的項目能夠省略1.3——1.5了)

- name: Use Node.js ${{ matrix.node-version }}

uses: actions/setup-node@v1

with:

node-version: ${{ matrix.node-version }} #規定node.js版本(可不配置)

1.四、安裝依賴

這一步就不用解釋了吧

- name: Install dependencies # 第二步，安裝依賴

run: npm install

1.五、打包代碼

這裏小黑用了--if-present標誌來避免腳本未定義時出現非零退出的狀況，親測在目前項目中寫不寫都行，沒必要糾結

- name: Build # 第三步，打包代碼

run: npm run build --if-present

在部署服務器時小黑踩到了很大的坑，就是明明打包完成了，但就是不結束任務，進入下一步

都帶薪如廁回來了居然尚未完成Build任務,這樣小黑都沒有煩躁也是多虧了和產品相愛相殺的磨練

換成yarn打包？失敗+1

修改node版本？失敗+2

……？？？？？？？失敗+N

是可忍叔不可忍,叔可忍他嬸子也不可忍了!

這是要逼小黑使出大殺招了！

面對疾風吧！

…%…（￥@*（￥@$(*$)

看我一頓操做猛如虎~

最後，在祭出三根寶貴的頭髮以後，終於讓小黑找到了問題所在

我變禿了，也變強了！ ——— 小黑

特麼的居然是打包後Node.js進程沒有終止，平時直接手動Ctrl + C就順便關了，根本沒注意到這個問題！

暴風哭泣~

這時問題又來了，做爲國服最菜前端，這webpack咱也只會個皮毛，觀察模式也並無開啓呀，百度谷歌一頓搜，文檔咱也看了又看，分析來分析去，也不曉得是哪一個在佔用Node.js進程，索性快刀斬亂麻，一行process.exit(0);直接亂殺！

push一下試試，果真Build任務成功完成，我特麼真是個天才，獎勵本身美味飼料一斤！

1.六、推送部署到服務器

打包成功，接下來就是激動人心的部署到服務器環節了，咱們這裏依然使用別人造好的輪子

DEPLOY_KEY、SERVER_IP、USERNAME就是咱們剛開始在Github裏配置好SSH私鑰、主機名、登陸名，這裏就再也不贅述

主要須要留意的就是FOLDER、和SERVER_DESTINATION，也就是咱們的推送文件夾及目標文件夾，這裏必定要將路徑寫正確。

源碼地址： rsync-deploy

- name: Deploy to Server # 第四步，rsync推送文件

uses: AEnterprise/rsync-deploy@v1.0 # 使用別人包裝好的步驟鏡像

env:

DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # 引用配置，SSH私鑰

ARGS: -avz --delete --exclude='*.pyc' # rsync參數，排除.pyc文件

SERVER_PORT: '22' # SSH端口

FOLDER: ./build/* # 要推送的文件夾，路徑相對於代碼倉庫的根目錄

SERVER_IP: ${{ secrets.SSH_HOST }} # 引用配置，服務器的host名（IP或者域名domain.com）

USERNAME: ${{ secrets.SSH_USERNAME }} # 引用配置，服務器登陸名

SERVER_DESTINATION: /www/wwwroot/lmsworld.cn/ # 部署到目標文件夾

我這裏是直接將build文件夾內文件替換到網站根目錄的，會存在非同名文件沒法替換的狀況，原本打算先刪除網站根目錄文件夾再替換的，但考慮到會有打包失敗或者部署失敗的可能性，刪除後網站會沒法訪問，遂暫時不用此方法，後續有時間再繼續改進，寫在此處仍是但願大佬們多多指點迷津~

1.七、重啓服務(視狀況而定)

若是是僅僅是部署了前端代碼的話，那有可能就不用重啓服務了，若是要後端代碼的話，就要從新啓動服務了

能夠在YAML配置文件裏另加一個後端部署的job，使用need控制下工做流，而後就在script裏依次寫下服務器上運行的命令行便可，小黑是用node寫的後臺，僅供參考

- name: Restart server # 第五步，重啓服務

uses: appleboy/ssh-action@master

with:

host: ${{ secrets.SSH_HOST }} # 下面三個配置與上一步相似

username: ${{ secrets.SSH_USERNAME }}

key: ${{ secrets.DEPLOY_KEY }}

# 重啓的腳本，根據自身狀況作相應改動，通常要作的是migrate數據庫以及重啓服務器

script: |

cd /www/server/web-server/

pm2 reload app.js

1.八、完整配置文件

貼一下完整的配置文件，根據本身的項目狀況修改下配置就行，不能用的話能夠給小黑留言

name: Blog CI/CD

on:

push:

branches:

- master # 只在master上push觸發部署

paths-ignore: # 下列文件的變動不觸發部署，能夠自行添加

- README.md

- LICENSE

jobs:

build-production:

runs-on: ubuntu-latest # 使用ubuntu系統鏡像運行自動化腳本(舒適提示：和你所使用的操做系統及服務器系統無關，我本地用的windows10,雲服務器用的centos)

strategy:

matrix:

node-version: [12.x] # 配置所需node版本

steps: # 自動化步驟

- uses: actions/checkout@v2 # 第一步，檢出倉庫副本

- name: Use Node.js ${{ matrix.node-version }} #規定node.js版本(可不配置)

uses: actions/setup-node@v1

with:

node-version: ${{ matrix.node-version }}

- name: Install dependencies # 第二步，安裝依賴

run: npm install

- name: Build # 第三步，打包代碼

run: npm run build --if-present

- name: Deploy to Server # 第四步，rsync推送文件

uses: AEnterprise/rsync-deploy@v1.0 # 使用別人包裝好的步驟鏡像

env:

DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # 引用配置，SSH私鑰

ARGS: -avz --delete --exclude='*.pyc' # rsync參數，排除.pyc文件

SERVER_PORT: '22' # SSH端口

FOLDER: ./build/* # 要推送的文件夾，路徑相對於代碼倉庫的根目錄

SERVER_IP: ${{ secrets.SSH_HOST }} # 引用配置，服務器的host名（IP或者域名domain.com）

USERNAME: ${{ secrets.SSH_USERNAME }} # 引用配置，服務器登陸名

SERVER_DESTINATION: /www/wwwroot/lmsworld.cn/ # 部署到目標文件夾

# - name: Restart server # 第五步，重啓服務

# uses: appleboy/ssh-action@master

# with:

# host: ${{ secrets.SSH_HOST }} # 下面三個配置與上一步相似

# username: ${{ secrets.SSH_USERNAME }}

# key: ${{ secrets.DEPLOY_KEY }}

# # 重啓的腳本，根據自身狀況作相應改動，通常要作的是migrate數據庫以及重啓服務器

# script: |

# cd /www/server/web-server/

# pm2 reload app.js