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

一、前言

作為一名前端菜雞，服務器小白，剛開始在Linux服務器上部署網站時，前端代碼我一般都是打包后手動FTP傳上去，后端代碼直接在vscode中使用SSH連接服務器，直接同步代碼更改。
但小黑作為一個生命不息折騰不止的程序猿，肯定要探索更好玩更高效的方法，所以這次，咱就上手折騰了下自動化部署方案

二、准備工作

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

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

• Travis CI
• Jenkins
• Circle CI
• Azure Pipeline
• GitHub Actions

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

小黑的網站是部署到騰訊雲服務器上的，所以配置過程中用到了服務器相關配置，如果是想把網站放到GitHub Pages上，那只需要有個Github倉庫就可以開始折騰起來了，下文關於遠程服務器的配置可以忽略掉。

2、添加部署秘鑰

要把文件部署到遠程服務器，首先要解決登錄校驗的問題。
比較常見的就是密碼登錄、SSH密鑰登錄或者VNC登錄。小黑推薦使用SSH密鑰登錄，既方便有安全。

2.1、生成SSH密鑰對

相信需要遠程部署到服務器的小伙伴肯定早就把SSH密鑰對配置好了，所以我們可以直接對應的私鑰文件內容復制一下，等下在GitHub中進行配置就可以啦！這里小黑就不再贅述啦

2.2、GitHub填寫自動化配置項

SSH密鑰對生成后，其實准備工作就已經完成的差不多了，最后一步就是將YAML文件中所需要的配置項，配置到Github上
首先打開對應的倉庫，點擊Setting > Secrets > New sceret,然后將我們復制的密鑰文件內容、服務器host和登錄用戶名都添加到配置如下圖對應的配置中，這樣的話即使像小黑一樣把項目開源，隱私信息也不會泄露啦。

配置完上面這些，我們的准備工作就大功告成了，接下來就可以編寫工作流文件啦

三、配置過程

1、編寫工作流文件

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

1.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.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 }} #規定node.js版本(可不配置)

1.4、安裝依賴

這一步就不用解釋了吧

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

1.5、打包代碼

這里小黑用了--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.6、推送部署到服務器

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

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.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 }}
        # 重啟的腳本，根據自身情況做相應改動，一般要做的是migrate數據庫以及重啟服務器
        script: |
          cd /www/server/web-server/
          pm2 reload app.js

1.8、完整配置文件

貼一下完整的配置文件，根據自己的項目情況修改下配置就行，不能用的話可以給小黑留言

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

2、最終效果

小黑迫不及待的將配置文件修改后push到倉庫，這次工作流跑的行雲流水，啥錯都沒報，簡直完美！

在這個面板里你可以看到具體每一步任務的耗時與輸出信息，報錯信息也可在這里查詢哦

最后如果你是部署到騰訊雲、阿里雲等雲服務平台的話，一般會收到一條安全警告通知，比如小黑用的就是騰訊雲

存在來自ip:40.122.43.158的異常登錄，這ip是誰的，讓小黑查一下

Microsoft數據中心？應該就是github服務器的ip了，問題不大，這里就先不管他了，后續咱們再找方法解決它

四、待優化部分

小黑最近工作太忙，只是先簡單實現了自動化部署功能，但是還沒來得及進行優化，先留個坑，后續再更

1、緩存依賴加快工作流

GitHub文檔-緩存的依賴關系

2、COS 優化部署

GitHub Actions + COS 優化部署

五、參考

由於小黑見識淺薄、水平有限，所寫內容肯定有很多不足之處，還請各位大佬不吝賜教，十分感激！

以下文檔、博客給了小黑極大的幫助，在此表示炒雞感謝！

1、GitHub Actions文檔
2、How to deploy a create-react-app with github-actions
3、使用 GitHub Actions 實現博客自動化部署