准备工作
- 所需部署的项目 arvin-components
- ssh key 配置
- Github Secrets 个人令牌创建
Github Actions
概述
GitHub Actions是一种持续集成和持续交付 (CI/CD) 平台，可用于自动执行生成、测试和部署管道。 您可以创建工作流程来构建和测试存储库的每个拉取请求，或将合并的拉取请求部署到生产环境。GitHub Actions不仅仅是DevOps，还允许您在存储库中发生其他事件时运行工作流程。 例如，您可以运行工作流程，以便在有人在您的存储库中创建新问题时自动添加相应的标签。GitHub提供Linux、Windows和macOS虚拟机来运行工作流程，或者您可以在自己的数据中心或云基础架构中托管自己的自托管运行器。
术语
- workflow (工作流程)：持续集成一次运行的过程，就是一个
workflow。 - job (任务)：一个
workflow由一个或多个jobs构成，含义是一次持续集成的运行，可以完成多个任务。 - step(步骤)：每个
job由多个step构成，一步步完成。 - action (动作)：每个
step可以依次执行一个或多个命令action。
工作流（workflows）
工作流程（workflows）是一种可配置的自动化流程，将运行一个或多个作业。工作流由签入存储库的 YAML 文件定义，并将在存储库中的事件触发时运行，也可以手动触发或按定义的计划触发。
# 工作流的名称，如果省略，则使用当前文件名
name: GitHub Actions Build Docs
# 从工作流生成的工作流运行的名称，如果省略，则使用提交时的commit信息
run-name: Deploy by @${{ github.actor }}
# 触发部署的条件
on:
# 每当 push 到 main 分支时触发部署
push:
branches:
- main
jobs:
build-and-deploy:
# 运行所需要的虚拟机环境
runs-on: ubuntu-latest
...
...
workflows 工作流配置如下：
- name 工作流的名称，如果省略，则使用当前文件名
- runs-name 从工作流生成的工作流运行的名称，如果省略，则使用提交时的
commit信息 - on 指定工作流的触发器，对特定分支、路径或标签执行指定操作时触发工作流的运行
- jobs 工作流下的任务组合
任务（jobs）
任务（jobs）是 workflow 的基本单元，一个 workflow 可以由多个 job 组成，每个 job 之间是并行关系，可以同时执行，也可以依赖关系，一个 job 执行完毕后再执行另一个 job。
# 当前流程要执行的任务，可以是多个。[build-and-deploy]就是一个任务
jobs:
build-and-deploy:
# 运行所需要的虚拟机环境
runs-on: ubuntu-latest
# 每个任务下的运行步骤，短横杠 - 表示一个步骤，从上至下依次执行。
steps:
# clone 该仓库的源码到工作流中
- name: Checkout
uses: actions/checkout@v3
with:
# "最近更新时间"等 git 日志相关信息，需要拉取全部提交记录
fetch-depth: 0
# 安装 Node 环境
- name: Setup Node.js
uses: actions/setup-node@v3
with:
# 选择要使用的 node 版本
node-version: '16'
...
...
job 任务配置如下：
- name 任务的名称，不设置则默认
build-and-deploy - runs-on 运行所需要的虚拟机环境
- need 设置当前任务需要依赖的任务名称
- steps 任务下的步骤组合，短横杠
-表示一个步骤，从上至下依次执行
步骤（step）
步骤（step）是 job 的基本单元，一个 job 可以由多个 step 组成，每个 step 之间是串行关系，一个 step 执行完毕后再执行另一个 step。
# 每个任务下的运行步骤，短横杠 - 表示一个步骤，从上至下依次执行。
steps:
# clone 该仓库的源码到工作流中
- name: Checkout
uses: actions/checkout@v3
with:
# "最近更新时间"等 git 日志相关信息，需要拉取全部提交记录
fetch-depth: 0
# 安装 Node 环境
- name: Setup Node.js
uses: actions/setup-node@v3
with:
# 选择要使用的 node 版本
node-version: '16'
...
...
...
step 运行步骤下短横杠 – 表示一个步骤，具体如下：
- name 步骤的名称
- run 需要运行的命令行程序 如：
npm run build - uses 一般直接使用别人预先设置好的
actions如：actions/setup-node@v3用来安装Node环境 - with 使用不同的
actions需要不同的参数，如：node-version: '16'用来选择安装的Node版本
动作（action）
动作（action）是 step 的基本单元，一个 step 可以由多个 action 组成，每个 action 之间是串行关系，一个 action 执行完毕后再执行另一个 action，更多详情请参考 About custom actions。
所有的 action 都是在 GitHub 上开源的，可以在 GitHub Marketplace 上找到。
# 每个任务下的运行步骤，短横杠 - 表示一个步骤，从上至下依次执行。
steps:
# clone 该仓库的源码到工作流中
- name: Checkout
# 使用 actions/checkout@v3 动作
uses: actions/checkout@v3
with:
# "最近更新时间"等 git 日志相关信息，需要拉取全部提交记录
fetch-depth: 0
# 安装 Node 环境
- name: Setup Node.js
# 使用 actions/setup-node@v3 动作
uses: actions/setup-node@v3
with:
# 选择要使用的 node 版本
node-version: '16'
...
...
...
创建工作流
在需要部署的项目跟路径下新增 .github/workflows 目录，并添加 deploy.yml 配置文件【配置文件名称可自由定义 xxx.yml】，如下图所示：
deploy.yml 配置文件完整内容如下：
# 工作流的名称，如果省略，则使用当前文件名
name: GitHub Actions Build Docs
# 从工作流生成的工作流运行的名称，如果省略，则使用提交时的commit信息
run-name: Deploy by @${{ github.actor }}
# 触发部署的条件
on:
# 每当 push 到 main 分支时触发部署
push:
branches:
- main
# 当前流程要执行的任务，可以是多个。[my_first_job]就是一个任务
jobs:
build-and-deploy:
# 运行所需要的虚拟机环境
runs-on: ubuntu-latest
# 每个任务下的运行步骤，短横杠 - 表示一个步骤，从上至下依次执行。
steps:
# clone 该仓库的源码到工作流中
- name: Checkout
uses: actions/checkout@v3
with:
# "最近更新时间"等 git 日志相关信息，需要拉取全部提交记录
fetch-depth: 0
# 安装 Node 环境
- name: Setup Node.js
uses: actions/setup-node@v3
with:
# 选择要使用的 node 版本
node-version: '16'
# 如果你的依赖是使用 pnpm 的，用这种
# 缓存 pnpm node_modules
- name: Cache dependencies
uses: pnpm/action-setup@v2
with:
version: ^7.0
# 安装依赖 pnpm
- name: Install dependencies
run: pnpm install
# # 如果你的依赖是使用 npm 的，用这种
# # 缓存 npm node_modules
# - name: Cache dependencies
# uses: actions/cache@v3
# with:
# path: ~/.npm
# key: ${{ runner.os }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
# restore-keys: |
# ${{ runner.os }}-npm-cache-
# # 安装依赖 npm
# - name: Install dependencies
# # 如果没有命中缓存才执行 npm install
# if: steps.cache-deps.outputs.cache-hit != 'true'
# run: npm install
# 如果你的依赖是使用yarn的，用这种
# 缓存 yarn node_modules
# - name: Cache dependencies
# uses: actions/cache@v3
# id: yarn-cache
# with:
# path: |
# **/node_modules
# key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
# restore-keys: |
# ${{ runner.os }}-yarn-
# 安装依赖 yarn
# - name: Install dependencies
# # 如果没有命中缓存才执行 npm install
# if: steps.npm-cache.outputs.cache-hit != 'true'
# run: yarn --frozen-lockfile
# 运行构建脚本
- name: Run Build Script
run: npm run docs:build
# 部署到 GitHub Pages
- name: Deploy to GitHub Pages
# 此actions的官方文档 https://github.com/JamesIves/github-pages-deploy-action
uses: JamesIves/github-pages-deploy-action@v4
with:
# 要部署的文件夹，必填，build 构建后的打包文件夹
FOLDER: docs-dist
# 希望部署的分支，默认gh-pages
BRANCH: gh-pages
# 默认情况是不需要填的，如果您需要更多权限，例如部署到另一个存储库才需要填写
# TOKEN_NAME 对应 GitHub Secrets 中设置的字段【配置详细步骤在文章下面内容中】，不要照搬
# 仓库范围的访问令牌，可以将个人令牌的值存储在 GitHub Secrets 中
TOKEN: ${{ secrets.TOKEN_NAME }}
# 部署到GitHub的不同仓库 <用户名>/<仓库名>
# 此选项必须配置了TOKEN才能正常执行
REPOSITORY-NAME: niezicheng/projectName
配置 GitHub Secrets
GitHub Secrets 是一种存储加密信息的方式，可以在 GitHub 仓库中使用。例如，如果你的工作流程需要使用 API 密钥，那么你可以将其存储在 GitHub Secrets 中，然后在工作流程中引用它。详细的配置可以查看我的另一篇文章 Github 个人令牌。
设置部署分支
依据 .github/workflows/deploy.yml 中设置的部署分支【BRANCH: gh-pages】在 github 项目中进行分支配置选择。如下图所示：
Github Pages 部署分支是否确可以在项目中点击 Settings => Pages 页面查看，如下图所示：
配置 Actions permissions
如果执行工作流遇到权限问题，可以查看 项目(arvin-components) => Settings => Actions【General】 页面权限是否正确，如下图所示：
部署、访问
当我们在 main 分支提交代码时，会自动触发 GitHub Actions 的工作流程，自动构建并部署到 GitHub Pages，如下图所示：
部署成功后，我们可以在 GitHub Pages 中查看部署后的项目线上地址，如下图所示：
结语
GitHub Actions 是一个非常强大的工具，可以帮助我们自动化构建、测试、部署等等，可以说是 CI/CD 的一种实现方式。本文只是简单的介绍了 GitHub Actions 的使用，更多的功能还需要大家自己去探索。
参考资料
原文链接：https://juejin.cn/post/7311907901047160882 作者：清香的orange
