利用GitHub Actions自動化打包部署服務器

傳統的部署方式是更新代碼 -> 本地構建 -> 上傳服務器發布；而現代化的部署方式是CI/CD(持續集成/持續部署)

CI/CD服務有很多：

• Jenkins
• Gitlab CI
• Github Actions
• Travis CI
• Circle CI
• ...

開始前需要准備Linux服務器；把本地代碼提交GitHub遠程倉庫。

然后生成配置GitHub Actions Token

• 生成Token：https://github.com/settings/tokens
• 或者可以點擊，頭像 -> Settings -> Developer settings -> Personal access tokens -> Generate new Token
• Token名稱填寫Token，Select scopes勾選repo，然后滾動到網頁最下面點擊提交按鈕。生成了Token，復制保存（該Token只顯示一次，忘記了就再生成）

• 配置到項目的Secrets中：進入項目-> Settings -> Secrets -> New secret
  * Name：建議和剛才生成Token保持一致
  * Value：為剛才生成的Token

除了配置Token，還要配置服務器的HOST、USERNAME、PASSWORD、PORT，這些配置在GitHub把項目部署到服務器的時候使用到

這里GitHun的配置已經完成，接下要配置GitHub Actions執行腳本

• 在項目根目錄創建.githun/workflows目錄
• 在workflows目錄創建main.yml文件，文件內容如下，這是GitHub Actions執行識別的文件

name: Publish And Deploy Demo # 自動部署的名稱
on:
  push:
    tags: # 當我們提交代碼為tag 是以'v'開頭的時候才會觸發自動部署到服務端 如 git push tag v0.1.0
      - 'v*'

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 運行環境，告訴它運行在什么環境
    steps: # 步驟

    # 第一步：下載源碼（CI/CD拉取代碼到自己的本地）
    - name: Checkout
      uses: actions/checkout@master

    # 第二步：打包構建
    - name: Build
      uses: actions/setup-node@master
    - run: npm install # 安裝第三方包
    - run: npm run build # 打包
    - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json
      # 把.nuxt、nuxt.config.js等文件，打包壓縮為release.tgz

    # 第三步：發布 Release
    - name: Create Release # 創建Release，可以在倉庫看到一個個版本
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }} # 之前GitHub添加的Token
      with:
        tag_name: ${{ github.ref }} # (tag)標簽名稱
        release_name: Release ${{ github.ref }}
        draft: false # 是否是草稿
        prerelease: false # 是否是預發布

    # 第四步：上傳構建結果到 Release（把打包的tgz上傳到Release）
    - name: Upload Release Asset
      id: upload-release-asset
      uses: actions/upload-release-asset@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        upload_url: ${{ steps.create_release.outputs.upload_url }} # 上傳地址，通過創建Release獲取到的
        asset_path: ./release.tgz # 要上傳文件
        asset_name: release.tgz # 上傳后的文件名
        asset_content_type: application/x-tgz

    # 第五步：部署到服務器
    - name: Deploy
      uses: appleboy/ssh-action@master # 使用ssh鏈接服務器
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        port: ${{ secrets.PORT }}
        script: | # 執行命令（運行到服務器）cd：要確保服務器有這個目錄； wget：下載上一步的release到服務器； tar：解壓； 安裝依賴；啟動服務
          cd /root/realworld-nuxtjs
          wget https://github.com/YuYun95/realworld-nuxtjs/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

到此全部配置已經完成，把代碼提交GitHub倉庫

• git add .
• git commit -m "feat: 第一次發布部署"
• git push(此時只是推送了提交記錄，並不會觸發自動化構建部署)
• git add .
• git tag v0.1.0(通過tag打版)
• git tag(查看版本)
• git push origin v0.1.0(把本地標簽推送到遠程倉庫，會觸發自動構建部署)
  執行完上面的命令GitHub Actions將自動打包部署到服務器

可以點擊項目倉庫的Actions可以查看打包部署過程和結果，全部勾綠色為部署成功，瀏覽器輸入服務器地址即可打開