[开发工具]Github Actions 自动构建前端项目并部署到服务器

参考文章
在开始操作之前，需要先在项目仓库建立page站点。

1. 创建yml文件

在你需要部署到 Github Page 的项目下，建立一个 yml 文件，放在 .github/workflow 目录下。你可以命名为 ci.yml，它类似于 Jenkins 的 Jenkinsfile 文件，里面包含的是要自动执行的脚本代码。

文件内容为

name: A TO A:GH_PAGES
on: # 监听 master 分支上的 push 事件
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 构建环境使用 ubuntu
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: Build and Deploy
      uses: jenkey2011/vuepress-deploy@master
      env:
        ACCESS_TOKEN: ${{ secrets.VUEAD }} # VUEAD 是我的 secret 名称，需要替换成你的
        # 你要操作的目标仓库，注意：是项目仓库名
        TARGET_REPO: longweixia/vue-ad
        # 构建结果存储的分支
        TARGET_BRANCH: master
        # 要使用的构建命令
        BUILD_SCRIPT: npm install && npm run build # 下载依赖 打包项目
        # 构建结果存储目录，dist里面会有index.html，如果没有这个文件，显示不了，可在本地构建后去校验
        BUILD_DIR: dist
  # sync: //gitee配置
  #   needs: build-and-deploy
  #   runs-on: ubuntu-latest
  #   steps:
  #   - name: Sync to Gitee
  #     uses: wearerequired/git-mirror-action@master
  #     env:
  #       SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
  #     with:
  #       # 来源仓库
  #       source-repo: "git@github.com:linzowo/linzowo.github.io.git"
  #       # 目标仓库
  #       destination-repo: "git@gitee.com:linzowo/linzowo.git"
  # reload-pages:
  #   needs: sync
  #   runs-on: ubuntu-latest
  #   steps:
  #     - name: reload
  #       uses: mizuka-wu/gitee-pages-action@v1.0.0
  #       with:
  #         repository: linzowo/linzowo
  #         cookie: ${{ secrets.GITEE_COOKIE }}
  #         branch: gh_pages

2. 配置密钥

上面有一个 ACCESS_TOKEN 变量需要自己配置。

1. 打开 Github 网站，点击你右上角的头像，选择 settings。

2. 点击左下角的 developer settings。

3. 在左侧边栏中，单击 Personal access tokens（个人访问令牌）。

4. 单击 Generate new token（生成新令牌）。

5. 输入名称并勾选 repo。

6. 拉到最下面，点击 Generate token，并将生成的 token 保存起来。

7. 打开你的 Github 项目，点击 settings。

点击 secrets->new secret。

创建一个密钥，名称随便填（中间用下划线隔开），内容填入刚才创建的 token。

可以看到创建成功了：

将上文代码中的 ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }} 替换成刚才创建的 secret 名字，替换后代码如下 ACCESS_TOKEN: ${{ secrets.TEST_A_B }}。保存后，提交到 Github。

以后你的项目只要执行 git push，Github Actions 就会自动构建项目并发布到你的 Github Page 上。

Github Actions 的执行详情点击仓库中的 Actions 选项查看。

构建中：

效果：

3. 错误处理

注意，很大可能会出现Git Page上因为路径问题访问不到打包后的文件，即引入的css，js都是404，这是因为打包后的资源都没有加上仓库路径，所以访问不到

修复

1. package.json,homepage项填写仓库全名

  "homepage": "https://longweixia.github.io/vue-ad",

2. vue.config.js的publicPath填写仓库名

module.exports = {
    publicPath: '/vue-ad/',
}

修改好后，git push 就会触发自动构建了