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等资源文件时能引用到正确的路径。

格式为：https://[你的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脚本。

1. name。这个工作流的名称，没什么好说的。

name: CI

1. on。定义工作流触发的时机，这里表示master分支有push事件时，本工作流会触发。

on:
  push:
    branches:
      - master

1. jobs。表示任务，可以有多个任务，注意，如果不特殊指定，️多个任务默认是同时执行的，我们可以通过设定needs来控制执行顺序，如下面的shell脚本,表示当first job执行完后才执行second job。

jobs:
  first_job: 

  second_job:
    needs: first_job

而对于当前项目来说，拆分多个job感觉有点没必要，因为一共也就才那么几行shell脚本，我们写在一个job里面就好。

1. runs-on，指定这个工作流会运行在哪个虚拟机，可选windows、macos、ubuntu，除了辣鸡windows，其他两个都可以，默认的是ubuntu。

runs-on: ubuntu-latest

1. 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地址，即可看到如下效果：