github actions实现前端自动化更新部署(nuxtjs示例)基于github actions, 搞定大部分前端

以下是nuxtjs的一个自动化更新部署的示例, 其他前端项目可以触类旁通

配置 Github Access Token

用来操作github仓库

把所有权限勾选, 然后记录好生成的token

配置要发布github项目的secrets(密钥)

配置name为TOKEN, value为Access Token(也就是上一步记录的token), 以下为参考:

配置name为HOST, value为自己服务器的ip
配置name为USERNAME, value为自己服务器的用户名
配置name为PASSWORD, value为自己服务器的密码
配置name为PORT, value为自己服务器的端口号, 默认填: 22

配置 GitHub Actions 执行脚本

在项目根目录创建 .github/workflows 目录

配置main.yml到workflows目录中 (仅供参考)

这个yml所做的功能是:

在git push一个tag并且以'v‘开头执行具体动作, 如: git push origin v0.1.0

下载github上的源码

打包构建源代码, 并压缩要上传到服务器的代码

发布一个github的release (如果没有需要, 可以省略)

把第三步打包的压缩代码上传到 Release (如果没有需要, 可以省略)

部署到服务器

name: Publish And Deploy
on:
  push:
    tags:
      - 'v*'

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

    # 下载github上的源码
    - 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


    # 发布一个github的release (如果没有需要, 可以省略)
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        tag_name: ${{ github.ref }}
        release_name: Release ${{ github.ref }}
        draft: false
        prerelease: false

    # 第三步打包的压缩代码上传到 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 }}
        asset_path: ./release.tgz
        asset_name: release.tgz
        asset_content_type: application/x-tgz

    # 部署到服务器
    - name: Deploy 🚀
      uses: cross-the-world/ssh-scp-ssh-pipelines@latest # 因为构建之后，需要把代码上传到服务器上，所以需要连接到ssh，并且做一个安全拷贝(security copy)操作
      env:
          WELCOME: "ssh scp ssh pipelines"
          LASTSSH: "Doing something after copying"
      with:
         host: ${{ secrets.HOST }}
         user: ${{ secrets.USERNAME }}
         pass: ${{ secrets.PASSWORD }}
         port: ${{ secrets.PORT }}
         connect_timeout: 10s
         first_ssh: |
           
         scp: |
           './release.tgz' => /Users/wang/projects/realworld-nuxtjs
         last_ssh: |
            cd /Users/wang/projects/realworld-nuxtjs
            tar -xzvf release.tgz
            npm install --production
            pm2 reload pm2.config.json

扩展

在执行deploy脚本的时候, 使用appleboy/ssh-action下载github资源受国内服务器影响, 会有很多问题, 如下:

在需要使用ssh操作服务器资源的时候, deploy推荐使用cross-the-world/ssh-scp-ssh-pipelines@latest这个action, 相关代码:

    # 部署到服务器
    - name: Deploy 🚀
      uses: cross-the-world/ssh-scp-ssh-pipelines@latest # 因为构建之后，需要把代码上传到服务器上，所以需要连接到ssh，并且做一个安全拷贝(security copy)操作
      env:
          WELCOME: "ssh scp ssh pipelines"
          LASTSSH: "Doing something after copying"
      with:
         host: ${{ secrets.HOST }}
         user: ${{ secrets.USERNAME }}
         pass: ${{ secrets.PASSWORD }}
         port: ${{ secrets.PORT }}
         connect_timeout: 10s
         first_ssh: |
           
         scp: |
           './release.tgz' => /Users/wang/projects/realworld-nuxtjs
         last_ssh: |
            cd /Users/wang/projects/realworld-nuxtjs
            tar -xzvf release.tgz
            npm install --production
            pm2 reload pm2.config.json

如果只是简单的使用ssh将前端资源拷贝到服务器, deploy推荐使用easingthemes/ssh-deploy@v2.1.5这个action, 相关代码:

# 部署到服务器
- name: Deploy
  uses: easingthemes/ssh-deploy@v2.1.5
  env:
      SSH_PRIVATE_KEY: ${{ secrets.BRUCE_SSH_KEY }} # 服务器的key
      ARGS: '-rltgoDzvO --delete'  #(optional, default '-rltgoDzvO')
      SOURCE: release/ # 这是要复制到服务器的文件夹名称
      REMOTE_HOST: ${{ secrets.HOST }} # 你的服务器公网地址
      REMOTE_USER: ${{ secrets.USERNAME }} # 服务器登录用户名
      TARGET: /Users/wang/projects/realworld-nuxtjs # 放到的目标地址