使用GitHub Actions實現(xiàn)前端自動化打包、部署
一、前言
作為一名前端菜雞，服務器小白，剛開始在Linux服務器上部署網(wǎng)站時，前端代碼我一般都是打包后手動FTP傳上去，后端代碼直接在vscode中使用SSH連接服務器，直接同步代碼更改。
但小黑作為一個生命不息折騰不止的程序猿，肯定要探索更好玩更高效的方法，所以這次，咱就上手折騰了下自動化部署方案
二、準備工作
1、持續(xù)集成服務（CI）方案選擇
實現(xiàn)代碼提交的自動化工作流，要依靠持續(xù)集成（CI）（或者加上持續(xù)交付(CD)）服務。現(xiàn)在主流的公用免費的持續(xù)集成服務有：
Travis CIJenkinsCircle CIAzure PipelineGitHub Actions
其中GitHub Actions是GitHub自家的持續(xù)集成及自動化工作流服務，簡單易用，也是小黑本次使用的服務。它使用起來非常簡單，只要在你的倉庫根目錄建立.github/workflows文件夾，將你的工作流配置(YAML文件)放到這個目錄下，就能啟用GitHub Actions服務。
小黑的網(wǎng)站是部署到騰訊云服務器上的，所以配置過程中用到了服務器相關配置，如果是想把網(wǎng)站放到GitHub Pages上，那只需要有個Github倉庫就可以開始折騰起來了，下文關于遠程服務器的配置可以忽略掉。
2、添加部署秘鑰
要把文件部署到遠程服務器，首先要解決登錄校驗的問題。
比較常見的就是密碼登錄、SSH密鑰登錄或者VNC登錄。小黑推薦使用SSH密鑰登錄，既方便有安全。
2.1、生成SSH密鑰對
相信需要遠程部署到服務器的小伙伴肯定早就把SSH密鑰對配置好了，所以我們可以直接對應的私鑰文件內(nèi)容復制一下，等下在GitHub中進行配置就可以啦！這里小黑就不再贅述啦
2.2、GitHub填寫自動化配置項
SSH密鑰對生成后，其實準備工作就已經(jīng)完成的差不多了，最后一步就是將YAML文件中所需要的配置項，配置到Github上
首先打開對應的倉庫，點擊Setting > Secrets > New sceret,然后將我們復制的密鑰文件內(nèi)容、服務器host和登錄用戶名都添加到配置如下圖對應的配置中，這樣的話即使像小黑一樣把項目開源，隱私信息也不會泄露啦。
配置完上面這些，我們的準備工作就大功告成了，接下來就可以編寫工作流文件啦
三、配置過程
1、編寫工作流文件
在倉庫根目錄中創(chuàng)建.github/workflows文件夾，再創(chuàng)建一個YAML文件，文件名自定，我這里起名叫deploy.yml，所以文件的完整路徑應該為.github/workflows/deploy.yml，配置的意義寫在注釋中啦，當然小黑也會簡略的介紹下重點配置項
1.1、文件基礎配置
首先就是YAML文件比較基礎的配置
on里的內(nèi)容比較重要，指定自動觸發(fā)工作流文件的事件，也可以將工作流設置為只在某些分支、路徑或標記上運行。比如小黑就是在當master分支上進行push時才會觸發(fā),然后忽略掉README.md和LICENSE文件的變更
jobs里就是接下來所要運行的所有工作流程，小黑就設置了build-production這一個job,根據(jù)需要也可以設置多個
還有就是runs-on，小黑第一次還以為是要填寫自己云服務器的操作系統(tǒng)，就填了個centos,一跑就報錯，后來看了文檔才明白，這是配置用來運行job的GitHub托管的新虛擬機，和你所使用的操作系統(tǒng)及服務器系統(tǒng)無關，和小黑一樣配置為ubuntu-latest就行
strategy中的node-version可以不配置,為了和本地node版本統(tǒng)一，小黑配置了一下
steps里就是所需要運行的每一個具體的步驟啦,下面就讓小黑一一道來
name: Blog CI/CD
on:
push:
branches:
- master # 只在master上push觸發(fā)部署
paths-ignore: # 下列文件的變更不觸發(fā)部署，可以自行添加
- README.md
- LICENSE
jobs:
build-production:
runs-on: ubuntu-latest # 使用ubuntu系統(tǒng)鏡像運行自動化腳本(溫馨提示：和你所使用的操作系統(tǒng)及服務器系統(tǒng)無關，我本地用的windows10,云服務器用的centos)
strategy: (可選)
matrix:
node-version: [12.x] # 配置所需node版本
steps: # 自動化步驟
……
1.2、下載代碼
這一步就是檢出你的倉庫并下載里面的代碼到runner中,actions/checkout@v2是官方自己造的輪子，直接拿來用就行
- uses: actions/checkout@v2 # 第一步，檢出倉庫副本
1.3、配置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 }} #規(guī)定node.js版本(可不配置)
1.4、安裝依賴
這一步就不用解釋了吧
- name: Install dependencies # 第二步，安裝依賴
run: npm install
1.5、打包代碼
這里小黑用了--if-present標志來避免腳本未定義時出現(xiàn)非零退出的情況，親測在目前項目中寫不寫都行，不必糾結
- name: Build # 第三步，打包代碼
run: npm run build --if-present
在部署服務器時小黑踩到了很大的坑，就是明明打包完成了，但就是不結束任務，進入下一步
都帶薪如廁回來了竟然還沒有完成Build任務,這樣小黑都沒有煩躁也是多虧了和產(chǎn)品相愛相殺的磨練
換成yarn打包？失敗+1
修改node版本？失敗+2
……？？？？？？？失敗+N
是可忍叔不可忍,叔可忍他嬸子也不可忍了!
這是要逼小黑使出大殺招了！
面對疾風吧！
…%…（￥@*（￥@)
看我一頓操作猛如虎~
最后，在祭出三根寶貴的頭發(fā)之后，終于讓小黑找到了問題所在
我變禿了，也變強了！——— 小黑
特么的竟然是打包后Node.js進程沒有終止，平時直接手動Ctrl + C就順便關了，根本沒注意到這個問題！
暴風哭泣~
這時問題又來了，作為國服最菜前端，這webpack咱也只會個皮毛，觀察模式也并沒有開啟呀，百度谷歌一頓搜，文檔咱也看了又看，分析來分析去，也不曉得是哪個在占用Node.js進程，索性快刀斬亂麻，一行process.exit(0);直接亂殺！
push一下試試，果然Build任務成功完成，我特么真是個天才，獎勵自己美味飼料一斤！
1.6、推送部署到服務器
打包成功，接下來就是激動人心的部署到服務器環(huán)節(jié)了，我們這里依然使用別人造好的輪子
DEPLOY_KEY、SERVER_IP、USERNAME就是我們剛開始在Github里配置好SSH私鑰、主機名、登錄名，這里就不再贅述
主要需要留意的就是FOLDER、和SERVER_DESTINATION，也就是我們的推送文件夾及目標文件夾，這里一定要將路徑寫正確。
源碼地址：rsync-deploy
- name: Deploy to Server # 第四步，rsync推送文件
uses: AEnterprise/[email protected] # 使用別人包裝好的步驟鏡像
env:
DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # 引用配置，SSH私鑰
ARGS: -avz --delete --exclude='*.pyc' # rsync參數(shù)，排除.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文件夾內(nèi)文件替換到網(wǎng)站根目錄的，會存在非同名文件無法替換的情況，本來打算先刪除網(wǎng)站根目錄文件夾再替換的，但考慮到會有打包失敗或者部署失敗的可能性，刪除后網(wǎng)站會無法訪問，遂暫時不用此方法，后續(xù)有時間再繼續(xù)改進，寫在此處還是希望大佬們多多指點迷津~
1.7、重啟服務(視情況而定)
如果是僅僅是部署了前端代碼的話，那有可能就不用重啟服務了，如果要后端代碼的話，就要重新啟動服務了
可以在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 }}
# 重啟的腳本，根據(jù)自身情況做相應改動，一般要做的是migrate數(shù)據(jù)庫以及重啟服務器
script: |
cd /www/server/web-server/
pm2 reload app.js
1.8、完整配置文件
貼一下完整的配置文件，根據(jù)自己的項目情況修改下配置就行，不能用的話可以給小黑留言
name: Blog CI/CD
on:
push:
branches:
- master # 只在master上push觸發(fā)部署
paths-ignore: # 下列文件的變更不觸發(fā)部署，可以自行添加
- README.md
- LICENSE
jobs:
build-production:
runs-on: ubuntu-latest # 使用ubuntu系統(tǒng)鏡像運行自動化腳本(溫馨提示：和你所使用的操作系統(tǒng)及服務器系統(tǒng)無關，我本地用的windows10,云服務器用的centos)
strategy:
matrix:
node-version: [12.x] # 配置所需node版本
steps: # 自動化步驟
- uses: actions/checkout@v2 # 第一步，檢出倉庫副本
- name: Use Node.js ${{ matrix.node-version }} #規(guī)定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/[email protected] # 使用別人包裝好的步驟鏡像
env:
DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }} # 引用配置，SSH私鑰
ARGS: -avz --delete --exclude='*.pyc' # rsync參數(shù)，排除.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 }}
# # 重啟的腳本，根據(jù)自身情況做相應改動，一般要做的是migrate數(shù)據(jù)庫以及重啟服務器
# script: |
# cd /www/server/web-server/
# pm2 reload app.js
2、最終效果
小黑迫不及待的將配置文件修改后push到倉庫，這次工作流跑的行云流水，啥錯都沒報，簡直完美！
在這個面板里你可以看到具體每一步任務的耗時與輸出信息，報錯信息也可在這里查詢哦
最后如果你是部署到騰訊云、阿里云等云服務平臺的話，一般會收到一條安全警告通知，比如小黑用的就是騰訊云
存在來自ip:40.122.43.158的異常登錄，這ip是誰的，讓小黑查一下
Microsoft數(shù)據(jù)中心？應該就是github服務器的ip了，問題不大，這里就先不管他了，后續(xù)咱們再找方法解決它
四、待優(yōu)化部分
小黑最近工作太忙，只是先簡單實現(xiàn)了自動化部署功能，但是還沒來得及進行優(yōu)化，先留個坑，后續(xù)再更
1、緩存依賴加快工作流
GitHub文檔-緩存的依賴關系
2、COS 優(yōu)化部署
GitHub Actions + COS 優(yōu)化部署
五、參考
由于小黑見識淺薄、水平有限，所寫內(nèi)容肯定有很多不足之處，還請各位大佬不吝賜教，十分感激！
以下文檔、博客給了小黑極大的幫助，在此表示炒雞感謝！
1、GitHub Actions文檔2、How to deploy a create-react-app with github-actions
3、使用 GitHub Actions 實現(xiàn)博客自動化部署
