<div id="js_content">
<p><img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-3dbdd18df4f87e4556dce711dd551b64.png">为什么使用 Github Actions ？</p>
<p style="text-align: left">众所周知，前端部署无非就是把打包之后的代码丢到 nginx html 目录下就完事了，但是每逢产品频繁改需求，甚至只是让你改线上一个字的时候，你总要重复一遍以下动作：修改，打包，登录服务器，上传代码，重启服务器。久而久之，别说是你受不了了，搁我旁边看着都受不了。这个时候，有没有想过有个机器人，能帮我们完成以上这些重复又没技术含量的活。没错，你猜对了，Github Actions 就是我们需要的那个机器人。</p>
<h1>Github Actions 是什么？</h1>
<p style="text-align: left">大家知道，持续集成 (https://www.ruanyifeng.com/blog/2015/09/continuous-integration.html?fileGuid=1PWJAvQBtLA5IGh3) 由很多操作组成，比如拉取最新代码、运行测试、登录服务器、部署服务器等，GitHub 把这些操作统一称为 Actions。</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-57b7f6a3330f5108b523d129daa04fe2.png">
<p style="text-align: left">我们再梳理下正常需求的开发流程（如上图），以上操作是可重复利用的，利用这一概念，Github 集成了 Actions 市场，允许开发者把操作写成独立的脚本，发布到 Actions 市场，允许所有开发者使用，这里有点像 Npm 和 VSCode 中的插件。</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-9fbe80fc88e32e62038473fa330f41ef.png">
<p style="text-align: left">Github 给我们提供了一个以下配置的服务器来运行我们配置对应的 Actions：</p>
<ul><li><p>2-core CPU</p></li><li><p>7 GB of RAM memory</p></li><li><p>14 GB of SSD disk space</p></li></ul>
<p style="text-align: left">这个配置足够我们使用了，当然，如果你有网络时延的需求，（比如推送及拉取镜像时产生的网络时延），你也可以自建服务器 (https://docs.github.com/cn/actions/hosting-your-own-runners?fileGuid=1PWJAvQBtLA5IGh3)。</p>
<h1>部署自己的前端项目</h1>
<h2>1、选择 Github 项目仓库</h2>
<p style="text-align: left">这里我选择了很久以前刚开始学习 Vue 时模仿 bilibili 做的项目 bilibili-vue (https://github.com/zlyyyy/bilibili-vue?fileGuid=1PWJAvQBtLA5IGh3)，进入项目仓库，可以看到对应的 Actions 标签，点击进入。</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-db9ef12a4ab0cc229c5aa1db4581cf57.png">
<h2>2、新建工作流，配置 Actions</h2>
<p style="text-align: left">进入 Actions 后可以看到很多推荐的工作流模版，这里可以根据需要自行选择的模版，或者跳过模版，自行设置。</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a1333522431089d1185f587aa25dede6.png">
<p style="text-align: left">这里因为我是纯前端项目，所以我选择 Node.js 模版。</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-bb15a8247b6c2f5ba96e88a374dfa21f.png">
<p style="text-align: left">点击 Node.js 模版，会自动在项目 <code>.github/workflows 目录下生成 node.js.yml</code> 文件，我们可以把文件名字改成我们工作流的名称。当然，这里可以设置并存在很多工作流 <code>yml</code> 文件，例如 deploy.yml、test.yml、gh-page.yml 等。</p>
<pre class="blockcode"><code class="language-go"># workflow名称。省略的话，默认为当前workflow文件名
name: Node.js CI
# 触发workflow的条件，
on:
push:
# 只有master分支发生push事件时，才会触发workflow
branches: [ master ]
pull_request:
branches: [ master ]
# jobs表示执行的一项或多项任务
jobs:
# 任务的job_id，具体名称自定义，这里build代表打包
build:
# runs-on字段指定运行所需要的虚拟机环境。注意：这个是必填字段
runs-on: ubuntu-latest
# 用于配置当前workflow的参数
strategy:
matrix:
node-version: [10.x, 12.x, 14.x, 15.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
# steps字段指定每个job的运行步骤，可以包含一个或多个步骤，每个步骤都可以配置指定字段
steps:
# 切代码到 runner
- uses: actions/checkout@v2
# 在当前操作系统安装node
- name: Use Node.js ${<!-- -->{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${<!-- -->{ matrix.node-version }}
# 该运行的命令或者action
# 安装依赖、运行测试、打包
- run: npm install
- run: npm test
- run: npm run build
</code></pre>
<h2>3、常见的 Actions 配置</h2>
<h3>打版本标签 Create Tag Release</h3>
<blockquote>
<p>这里使用 Actions 市场中的 Create Tag Release (https://github.com/marketplace/actions/create-tag-release?fileGuid=1PWJAvQBtLA5IGh3) 插件</p>
</blockquote>
<pre class="blockcode"><code class="language-go">on: |
|
转播
