Github Actions简单部署一个vue/react项目
大体介绍
本文对github actions部署前端项目做一个简单的总结，总体来说，我感觉用它想要部署一个前端项目，可以说非常简单，简单得令人震惊🤯。但是高度的封装，会让人没有那种以前travis书写shell的畅快体验感。
不过这也是github actions的初衷所在：开发者不用自己写很多脚本，而是直接拿别人写好的action，经过自己的搭配组合，形成自己项目的脚本。 所以从其诞生来说，就是为了共享而生，如果你无法忍受你的脚本里出现什么Bob、Nancy、Jack这样的字眼，选择自己手撸，那也就意味着你放弃了github actions的优势。
所以，这是一种天生的拿来主义，你可以在市场marketplace里自由挑选，搭配组合。
给项目一个token☝️
首先我们需要给即将开启github actions的项目一个token，这步操作的目的是给shell脚本的一些行为授权，正所谓没有规矩不成方圆，试想一下，假设有很多人都能向一个项目推送代码，假设某个小子突然有一天推送了一个脚本，这个脚本的目的是为了删除项目，然后项目真的被删除了，其他人都没得玩了。
所以这里必须要有一个授权的过程：只有该github所有者的做了某一步只能他自己完成的操作，给项目颁发了一个具有某些权限的令牌（权限完全由所有者配置），该项目的脚本拿到这个令牌，才能做一些权限内的事情。
首先进入github主页–>Settings–>Developer settings–>Personal access tokens–>Generate new token生成token，注意这里会让你输入密码，这就是为什么说这个授权的操作只能由github所有者本人来完成。
生成token时，你可以自由配置这个token所拥有的权限，勾选☑️得越多，这个token权限越高，像一个持续集成部署的token，我并不希望它拥有过多的权限，所以只勾选了repo项目基础权限和workflow工作流权限，足矣。
生成token后，复制它，然后切换到你希望开启github actions的项目目录中，依次点击该项目的Settings–>Secrets–>New Secrets。
将刚刚复制的token粘贴进去，并取一个名字，保存。一般这种大家都很喜欢叫ACCESS_TOKEN。当然喜欢叫其他的名字也可以，但是后面的脚本也要跟着改。
配置项目路径
关于如何创建一个react/vue项目，这里不再赘述，因为这确实属于非常基础的操作了。我们打开项目的package.json,配置一下项目地址。这一步的操作是为了确定✅项目的根目录，项目在加载js，css等资源文件时能引用到正确的路径。
格式为：//[你的github用户名].github.io/[你的项目名]。对照着图中改一下即可。
为项目开启actions
将上一步配置好的项目路径推送到远程，进入项目主页，可以看到一个很醒目的Actions。
点击Actions–>set up a workflow yourself，就会进入到一个yml文件的编辑页面，这个脚本默认放在项目根目录/.github/workflows/下面，然后书写以下脚本：
name: CI
on:
push:
branches:
- master
jobs:
main:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
# react项目为npm run-script build，vue项目改为npm run build
- name: Install and Build
run: |
npm install
npm run-script build
# react项目的FOLDER为build，vue项目改为dist
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: build
首先我们形成一个基本的观念，对于一个workflow来说，从大到小可以按以下划分： workflow（最大） –> job –> step –> action（最小）
然后依次解释一下这个shell脚本。
name。这个工作流的名称，没什么好说的。
name: CI
on。定义工作流触发的时机，这里表示master分支有push事件时，本工作流会触发。
on:
push:
branches:
- master
jobs。表示任务，可以有多个任务，注意⚠，如果不特殊指定，️多个任务默认是同时执行的，我们可以通过设定needs来控制执行顺序，如下面的shell脚本,表示当first job执行完后才执行second job。
jobs:
first_job:
second_job:
needs: first_job
而对于当前项目来说，拆分多个job感觉有点没必要，因为一共也就才那么几行shell脚本，我们写在一个job里面就好。
runs-on，指定这个工作流会运行在哪个虚拟机，可选windows、macos、ubuntu，除了辣鸡windows，其他两个都可以，默认的是ubuntu。
runs-on: ubuntu-latest
steps表示当前任务下的步骤，一个或多个都可以，从上到下依次执行。每个step可指定以下字段：
name步骤名run步骤执行的命令env步骤所需环境uses步骤使用的actions,可以是一个或多个
steps:
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
# react项目为npm run-script build，vue项目改为npm run build
- name: Install and Build
run: |
npm install
npm run-script build
# react项目的FOLDER为build，vue项目改为dist
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: build
这里首先第一步为Checkout，用到了一个checkout的action，其作用是拉取你的代码；
第二步为Install and Build,其作用就是安装依赖、打包。
第三步为Deploy，用到了一个名叫JamesIves写的action，我们传入一些基本配置，比如权限钥匙🔑ACCESS_TOKEN，要推送的分支BRANCH，取打包好的静态文件目录FOLDER。
注意⚠️：shell脚本文件是严格缩进的，因为它需要根据空格个数来区分数据结构。如果你的脚本运行报错了，首先检查一下shell的缩进是否正确。
写在最后
在master分支提交脚本后，等待工作流⌛️跑完（工作流流水线和日志可点击项目的Actions入口进入查看）。
打开之前在package.json文件书写homepage地址，即可看到如下效果：
