前端自动部署、自动分支合并 || 掘金自动签到——Github Actions

分支合并

假设当前项目的分支有 master(正式)、staging(预发布)、develop(测试)
场景：

• master更新，代码同步到 staging和develop
• staging更新，代码同步到develop

以上，为了保持测试分支代码同步主分支新的feature，减少人工手动合并的工作（注📢：不同团队分支管理以及CI/CD不一样，我是刚好有这个需求）

第一版：git命令

• 设置当前git用户
• 更新代码
• 设置上游仓库
• 切需要同步的分支
• merge后提交

name: develop Merge master
on:
  # 推送代码后触发
  push:
    branches:
      - master
  # 定时任务触发，使用 cron 规则，这里默认一小时执行一次
  #   schedule:
  #     - cron: '0 * * * *'
jobs:
  merge:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Merge origin master
        run: |
          git config --global user.name 'Autumn'
          git config --global user.email '439661734@qq.com'
          git pull --unshallow
          # 设置上游仓库
          # git remote add upstream https://github.com/upstream/upstream.git
          # git fetch upstream
          git checkout -b develop origin/develop
          git merge --no-edit origin/master
          git push origin develop

第二版，Github API

以上合并默认committer信息是Autumn，按道理应该是Giuhub去执行的操作（为了甩锅），调用强大的
GitHub REST API

GitHub REST API You can use the GitHub REST API to create calls to get the data you need to integrate with GitHub.

直接curl命令调用API，主要文档比较难找，给大伙贴上merge API
📢：secrets.ACCESS_TOKEN是自己在repository的Settings——Secrets中添加的变量(有找不着的小伙伴，评论区提问哟~)。需要注意的是如果直接用Github_Token一次只会触发一个workflow。

name: develop Merge master

on:
  # 推送代码后触发
  push:
    branches:
      - master
jobs:
  merge:
    runs-on: ubuntu-latest
    steps:
      - name: Using REST API pre-master2 Merge pre-master
        run: |
          curl \
          -X POST \
          -H "Accept: application/vnd.github.v3+json" \
          -H "content-type: application/json" \
          -H "authorization: Bearer ${{ secrets.ACCESS_TOKEN }}" \
          https://github.com/AutumnWhj/GithubAction/merges \
          -d '{"base":"develop","head":"master"}'

第三版，node执行Actions

领导要求合并后得有通知发送出来，不用自己手动去看，因此就想既然只是个接口请求，node中使用我们熟悉的axios，进行分支合并以及发送通知，另外发送通知到企业微信调用机器人🤖webhook即可。分步处理：

• 集成node环境
• 安装所需依赖
• 执行package.json scripts预定义好的命令

name: staging merge master & send Commits
on:
  push:
    branches:
      - master
jobs:
  exec_node_job:
    env:
      BASE_BRANCH: staging
      HEAD_BRANCH: master
      ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
      COMMIT_SIZE: 5
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.16.1]
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }} #使用action安装node环境
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm install axios # 安装axios依赖
      - run: npm run actions # 命令行执行node文件

env是定义job的环境变量的，后续就可在process.env中拿到定义的环境变量
strategy就安装制定后续安装的node依赖版本
Workflow syntax for GitHub Actions 可对照在看看。
npm run actions是在package.json scripts中定义好的脚本执行命令，如：

"scripts": {
  "actions": "node ./node-ci/index.js"
}

以上由分支合并小需求，而进行的各种方案思考，目前任务node执行，是更加方便，更易拓展的。

前端项目构建与部署

新建vue项目——github-actions-docs

新建一个github-actions-docs项目，修改vue.config.js文件，修改publicPath

// 之后要通过https://autumnwhj.github.io/github-actions-docs/访问，因此资源文件的路径要做对应配置
// 如果你最终站点访问路径是https://autumnwhj.github.io/docs-other/,则这里的值就是/docs-other/,
module.exports = {
// publicPath 配置指定应用程序中所有资源的基础路径。
  publicPath: '/github-actions-docs/'
}

创建Personal access tokens

这一步主要为了有权限操作github中的所有仓库，比如以下的权限设置。
先登录github，点击链接🔗 直达。或github右上角头像👤——settings——developer settings——personal access token设置。有效时间可自定义设置。

​

创建项目的Action secrets——github-actions-docs

这一步主要设置该repositoryworkflow执行时访问的变量，设置好后在GitHub Action中的环境变量secrets可访问到。

​

新建Github Page项目-AutumnWhj.github.io

这一步新建一个repository，专门做为Github Page静态站点。
点击右上角，新建项目。

这里要注意，设置名字要相同，否则下面你会发现你的站点会加长，不会自动覆盖，比如这样 [https://autumnwhj.github.io/](https://autumnwhj.github.io/)autumn.github.io ，正确简洁显示如下：

新建github action 自动打包部署——github-actions-docs

这里发布使用的是封装好的action，非常方便，deploy-to-github-pages

name: Vue project Build and Deploy
on:
  push:
    branches:
      - master # 当master分支有变更，则执行以下jobs操作
jobs:
  deploying_vue_project:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2.3.1  
        with:
          persist-credentials: false
      - name: building
        # 执行shell命令
        run: |
          npm install
          npm run build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          branch: master
          folder: dist
          token: ${{ secrets.ACCESS_TOKEN }}
          repository-name: AutumnWhj/AutumnWhj.github.io # github page 仓库
          target-folder: github-actions-docs

最后访问：预览地址 就可以访问新部署的vue项目啦！
以上注意区分两个不同仓库的操作，每步操作在哪个仓库操作我也标出来了哈。
仓库代码：
AutumnWhj.github.io
github-actions-docs

掘金自动签到

通过networks查看签到的接口，copy curl下来，放到Github Actions定时触发就好，社区有聪明的小伙伴已经实现了，这里就不加赘述咯，大家可以参照看看。
掘金免漏签！自动签到&自动免费抽奖

总结

本人也是刚接触GitHub Actions不久，这里把学习过程中的一些应用分享给大家，也以此来对自己的学习进行总结。
认知决定格局，一起拓展知识的边界吧。