介绍
github actions 部署前端项目做个总结。
GitHub Actions类似Jenkins用来做持续集成，只要提交代码，就可以自动做构建，发布操作。免去自己部署的麻烦
用它部署构建是非常简单的，也方便给做个属于自己的博客网站
github actions 的方便之处是在于，不用自己写很多脚本
接下来以react-boat项目为例
创建 token
首先需要给开启 github actions 的项目一个 token，让开发者拥有推送代码的权限等
进入github主页-->Settings-->Developer settings-->Personal access tokens-->Generate new token生成 token
勾上 workflow 工作流权限和 repo 项目基础权限
生成 token 后，复制，
然后到react-boat项目中，Settings-->Secrets-->Actions-->New repository secret
新建一个ACCESS_TOKEN，将前面复制的 token 写入
配置项目路径
在package.json中增加一个homepage，这一步是为了确定项目的根目录，在打包的时候，也要正确配置js,css的引用路径
开启 Actions
点击Actions-->set up a workflow yourself，进入一个 yml 的文件编辑页面，这个脚本默认放在项目根目录/.github/workflows/
配置以下相关文档
name: GitHub Actions Build and Deploy Demo
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
# 安装依赖
- name: install
run: yarn
# 打包构建
- name: build
run: yarn build:test
# 部署运行
- name: Deploy
uses: JamesIves/github-pages-deploy-action@v4.3.0
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: dist
从大到小可以按以下划分： workflow（最大） --> job --> step --> action（最小）
-
name：脚本名称 -
on: 定义工作流触发的时机，这里表示master分支有push时，该工作流会触发 -
jobs：表示任务，可以有多个任务
当前表示build-and-deploy这个任务
-
runs-on：指定工作流会在哪个虚拟机中运行，可选windows、macos、ubuntu -
steps: 表示当前任务下的步骤，从上到下一次执行
每个 step 有以下字段：
-
name：步骤名 -
run: 执行命令 -
env环境 -
uses: 使用的 actions，可以从marketplace中招 -
with:action 传入的参数
以上的 yml 中对应的说明：
checkout：用了一个checkout的action，拉取master的代码
install：安装依赖
build：打包测试环境
deploy：用到JamesIves写的一个 action，叫github-pages-deploy-action
传入基本配置：权限ACCESS_TOKEN，推送的分支：BRANCH，取打包的静态文件：FOLDER
配置好以后，随意修改下代码，再次推送到master分支，刷新 github 中的react-boat，会看到 Github Action 会自动运行，可以查看它打包的过程，构建完，会发现react-boat多了一个gh-pages分支，里面就是已经打包好的静态资源文件。
这时候去访问我们前面配置好的homepage，
会发现404
查看github pages文档发现还有一个 pages 要配置的
配置 github pages
点击Settings --> Pages
选择branch改为gh-pages，点击Save
actions又再一次做构建任务，
再次访问homepage，发现可以访问，但是资源文件报错了
经过排查发现https://yaolx.github.io/react-boat/assets/index.8656a302.js可以正常访问，
那说明是我的工程构建的时候根路径有问题，少了react-boat，跟 github 的没对应上
vite 构建出来的 js 地址是assets/*.js
需要改成${项目名}/assets/*.js*
调整 vite 构建路径
增加base
import pkg from './package.json'
base: `/${pkg.name}/`
本地试着yarn build:test
可以正常将根路径加上react-boat了
再次提交代码， push 到master分支
等待构建发布。
最终效果，可以正常访问了
