Github Actions 自动构建前端项目并部署到服务器
如果你的项目是 Github 项目，那么使用 Github Actions 也许是更好的选择。
部署到 Github Page
接下来看一下如何使用 Github Actions 部署到 Github Page。
在你需要部署到 Github Page 的项目下，建立一个 yml 文件，放在 .github/workflow 目录下。你可以命名为 ci.yml，它类似于 Jenkins 的 Jenkinsfile 文件，里面包含的是要自动执行的脚本代码。
这个 yml 文件的内容如下：
name: Build and Deploy on: # 监听 master 分支上的 push 事件 push: branches: - master jobs: build-and-deploy: runs-on: ubuntu-latest # 构建环境使用 ubuntu steps: - name: Checkout uses: actions/checkout@v2.3.1 with: persist-credentials: false - name: Install and Build # 下载依赖 打包项目 run: | npm install npm run build - name: Deploy # 将打包内容发布到 github page uses: JamesIves/github-pages-deploy-action@3.5.9 # 使用别人写好的 actions with: # 自定义环境变量 ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }} # VUE_ADMIN_TEMPLATE 是我的 secret 名称，需要替换成你的 BRANCH: master FOLDER: dist REPOSITORY_NAME: woai3c/woai3c.github.io # 这是我的 github page 仓库 TARGET_FOLDER: github-actions-demo # 打包的文件将放到静态服务器 github-actions-demo 目录下
上面有一个 ACCESS_TOKEN 变量需要自己配置。
- 打开 Github 网站，点击你右上角的头像，选择
settings。
- 点击左下角的
developer settings。
- 在左侧边栏中，单击
Personal access tokens（个人访问令牌）。
- 单击
Generate new token（生成新令牌）。
- 输入名称并勾选
repo。
- 拉到最下面，点击
Generate token，并将生成的 token 保存起来。
- 打开你的 Github 项目，点击
settings。
点击 secrets->new secret。
创建一个密钥，名称随便填（中间用下划线隔开），内容填入刚才创建的 token。
将上文代码中的 ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }} 替换成刚才创建的 secret 名字，替换后代码如下 ACCESS_TOKEN: ${{ secrets.TEST_A_B }}。保存后，提交到 Github。
以后你的项目只要执行 git push，Github Actions 就会自动构建项目并发布到你的 Github Page 上。
Github Actions 的执行详情点击仓库中的 Actions 选项查看。
具体详情可以参考一下我的 demo 项目 github-actions-demo。
构建成功后，打开 Github Page 网站，可以发现内容已经发布成功。
Github Actions 部署到阿里云
初始化阿里云服务器
- 购买阿里云服务器，选择操作系统，我选的 ubuntu
- 在云服务器管理控制台选择实例->更多->密钥->重置实例密码（一会登陆用）
- 选择远程连接->VNC，会弹出一个密码，记住它，以后远程连接要用（ctrl + alt + f1~f6 切换终端，例如 ctrl + alt + f1 是第一个终端）
- 进入后是一个命令行 输入
root（默认用户名），密码为你刚才重置的实例密码 - 登陆成功， 更新安装源
sudo apt-get update && sudo apt-get upgrade -y - 安装 npm
sudo apt-get install npm - 安装 npm 管理包
sudo npm install -g n - 安装 node 最新稳定版
sudo n stable
创建一个静态服务器
mkdir node-server // 创建 node-server 文件夹 cd node-server // 进入 node-server 文件夹 npm init -y // 初始化项目 npm i express touch server.js // 创建 server.js 文件 vim server.js // 编辑 server.js 文件
将以下代码输入进去（用 vim 进入文件后按 i 进行编辑，保存时按 esc 然后输入 :wq，再按 enter），更多使用方法请自行搜索。
const express = require('express') const app = express() const port = 3388 // 填入自己的阿里云映射端口，在网络安全组配置。 app.use(express.static('dist')) app.listen(port, '0.0.0.0', () => { console.log(`listening`) })
执行 node server.js 开始监听，由于暂时没有 dist 目录，先不要着急。
注意，监听 IP 必须为 0.0.0.0 ，详情请看部署Node.js项目注意事项。
阿里云入端口要在网络安全组中查看与配置。
创建阿里云密钥对
请参考创建SSH密钥对和绑定SSH密钥对 ，将你的 ECS 服务器实例和密钥绑定，然后将私钥保存到你的电脑（例如保存在 ecs.pem 文件）。
打开你要部署到阿里云的 Github 项目，点击 setting->secrets。
点击 new secret
secret 名称为 SERVER_SSH_KEY，并将刚才的阿里云密钥填入内容。
点击 add secret 完成。
在你项目下建立 .github\workflows\ci.yml 文件，填入以下内容：
name: Build app and deploy to aliyun on: #监听push操作 push: branches: # master分支，你也可以改成其他分支 - master jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: Install Node.js uses: actions/setup-node@v1 with: node-version: '12.16.2' - name: Install npm dependencies run: npm install - name: Run build task run: npm run build - name: Deploy to Server uses: easingthemes/ssh-deploy@v2.1.5 env: SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }} ARGS: '-rltgoDzvO --delete' SOURCE: dist # 这是要复制到阿里云静态服务器的文件夹名称 REMOTE_HOST: '118.190.217.8' # 你的阿里云公网地址 REMOTE_USER: root # 阿里云登录后默认为 root 用户，并且所在文件夹为 root TARGET: /root/node-server # 打包后的 dist 文件夹将放在 /root/node-server
保存，推送到 Github 上。
以后只要你的项目执行 git push 操作，就会自动执行 ci.yml 定义的脚本，将打包文件放到你的阿里云静态服务器上。
这个 Actions 主要做了两件事：
- 克隆你的项目，下载依赖，打包。
- 用你的阿里云私钥以 SSH 的方式登录到阿里云，把打包的文件上传（使用 rsync）到阿里云指定的文件夹中。
如果还是不懂，建议看一下我的 demo。
ci.yml 配置文件讲解
name，表示这个工作流程（workflow）的名称。on，表示监听的意思，后面可以加上各种事件，例如push事件。
下面这段代码表示要监听 master 分支的 push 事件。当 Github Actions 监听到 push 事件发生时，它就会执行下面 jobs 定义的一系列操作。
name: Build app and deploy to aliyun on: #监听push操作 push: branches: # master分支，你也可以改成其他分支 - master jobs: ...
jobs，看字面意思就是一系列的作业，你可以在jobs字段下面定义很多作业，例如job1、job2等等，并且它们是并行执行的。
jobs: job1: ... job2: ... job3: ...
回头看一下 ci.yml 文件，它只有一个作业，即 build，作业的名称是自己定义的，你叫 good 也可以。
runs-on，表示你这个工作流程要运行在什么操作系统上，ci.yml文件定义的是最新稳定版的ubuntu。除了 ubuntu，它还可以选择 Mac 或 Windows。
steps，看字面意思就是一系列的步骤，也就是说这个作业由一系列的步骤完成。例如先执行step1，再执行step2...
setps 步骤讲解
setps 其实是一个数组，在 YAML 语法中，以 - 开始就是一个数组项。例如 ['a', 'b', 'c'] 用 YAML 语法表示为：
- a - b - c
所以 setps 就是一个步骤数组，从上到下开始执行。从 ci.yml 文件来看，每一个小步骤都有几个相关选项：
name，小步骤的名称。uses，小步骤使用的 actions 库名称或路径，Github Actions 允许你使用别人写好的 Actions 库。run，小步骤要执行的shell命令。env，设置与小步骤相关的环境变量。with，提供参数。
综上所述，ci.yml 文件中的 setps 就很好理解了，下面从头到尾解释一边：
steps: - uses: actions/checkout@v1 - name: Install Node.js uses: actions/setup-node@v1 with: node-version: '12.16.2' - name: Install npm dependencies run: npm install - name: Run build task run: npm run build - name: Deploy to Server uses: easingthemes/ssh-deploy@v2.1.5 env: SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }} ARGS: '-rltgoDzvO --delete' SOURCE: dist # 这是要复制到阿里云静态服务器的文件夹名称 REMOTE_HOST: '118.190.217.8' # 你的阿里云公网地址 REMOTE_USER: root # 阿里云登录后默认为 root 用户，并且所在文件夹为 root TARGET: /root/node-server # 打包后的 dist 文件夹将放在 /root/node-server
- 使用
actions/checkout@v1库克隆代码到ubuntu上。 - 使用
actions/setup-node@v1库安装 nodejs，with提供了一个参数node-version表示要安装的 nodejs 版本。 - 在
ubuntu的shell上执行npm install下载依赖。 - 执行
npm run build打包项目。 - 使用
easingthemes/ssh-deploy@v2.1.5库，这个库的作用就是用SSH的方式远程登录到阿里云服务器，将打包好的文件夹复制到阿里云指定的目录上。
从 env 上可以看到，这个 actions 库要求我们提供几个环境变量：
SSH_PRIVATE_KEY: 阿里云密钥对中的私钥（需要你提前写在 github secrets 上），ARGS: '-rltgoDzvO --delete'，没仔细研究，我猜是复制完文件就删除掉。SOURCE：打包后的文件夹名称REMOTE_HOST: 阿里云公网 IP 地址REMOTE_USER: 阿里云服务器的用户名TARGET: 你要拷贝到阿里云服务器指定目录的名称
如果你想了解一下其他 actions 库的实现，可以直接复制 actions 库的名称去搜索引擎搜索一下，例如搜索 actions/checkout 的结果为：
都看到这了，给个赞再走吧。
