「时光不负,创作不停,本文正在参加2021年终总结征文大赛」
最近了解到github提供的 actions ci/cd服务功能。它能让你的更轻松的实现项目的部署,解放你的双手。关键是免费啊!话不多说开干。
准备
在这之前你需要在github配置好一个Access token用于用户访问页面, 具体怎么操作看官方文档。
-
生成的token访问权限勾选
workflow -
配置secret方便在构建文件中使用变量的形式引用token。
name: access_token value: 刚才生成的token在项目的settings下配置secret
-
在node项目的package.json新增
"homepage"字段。这是用户访问该项目入口地址"homepage": "https://[github用户名].github.io/[当前要部署的仓库名称]"
创建工作流
点击项目的Actions选项创建一个工作流,github提供了很多工作流,我们选择一个符合自己项目的工作流即可,当然也可以自己创建,我这里是自定义创建的一个。
创建成功后会在仓库的.github/workflows/下创建一个构建文件如下:
# 当前工作流的名称
name: XXX CI
# ci触发的条件
on:
push: # 什么请求触发
branches:
- master: # 作用在哪些分支上
jobs: # 构建的任务,一个工作流有多个构建任务,
build-and-deploy:
runs-on: ubuntu-latest # 在什么服务器上面执行这些任务,这里使用最新版本的ubuntu
steps: # 构建任务的步骤,一个任务可分为多个步骤
# 步骤1 拉取仓库代码
- name: Checkout # 步骤名称
uses: actions/checkout@v2
# 步骤2 给当前服务器安装node
- name: use node
uses: actions/setup-node@v2
with:
node-version: 16 # node版本
cache: "yarn"
# 步骤3 下载项目依赖
- name: install
run: yarn install
# 步骤4 打包node项目
- name: build
run: yarn xxx:build # 此处是你node项目的构建脚本
# 步骤5 部署项目
- name: deploy
uses: JamesIves/github-pages-deploy-action@4.1.6
with:
# 供用户访问的github access_token 下面的变量是在准备阶段自定义的变量
access_token: ${{ secrets.access_token }}
# 发布到指定分支
branch: gh-pages
# 指定发布的打包后的文件
folder: xx/xxx/xx
文件写好后点击右上角start commit构建,然后点击Actions查看当前的构建进度
最后访问在package.json配置的homepage地址:https://[github用户名].github.io/[当前要部署的仓库名称]