前端项目自动化部署——超详细教程（Jenkins、Github Actions）（三）

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 变量需要自己配置。

1. 打开 Github 网站，点击你右上角的头像，选择 settings。

1. 点击左下角的 developer settings。

1. 在左侧边栏中，单击 Personal access tokens（个人访问令牌）。

1. 单击 Generate new token（生成新令牌）。

1. 输入名称并勾选 repo。

1. 拉到最下面，点击 Generate token，并将生成的 token 保存起来。

1. 打开你的 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 部署到阿里云

初始化阿里云服务器

1. 购买阿里云服务器，选择操作系统，我选的 ubuntu
2. 在云服务器管理控制台选择实例->更多->密钥->重置实例密码（一会登陆用）
3. 选择远程连接->VNC，会弹出一个密码，记住它，以后远程连接要用（ctrl + alt + f1~f6 切换终端，例如 ctrl + alt + f1 是第一个终端）
4. 进入后是一个命令行 输入 root（默认用户名），密码为你刚才重置的实例密码
5. 登陆成功， 更新安装源 sudo apt-get update && sudo apt-get upgrade -y
6. 安装 npm sudo apt-get install npm
7. 安装 npm 管理包 sudo npm install -g n
8. 安装 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 主要做了两件事：

1. 克隆你的项目，下载依赖，打包。
2. 用你的阿里云私钥以 SSH 的方式登录到阿里云，把打包的文件上传（使用 rsync）到阿里云指定的文件夹中。

如果还是不懂，建议看一下我的 demo。

ci.yml 配置文件讲解

1. name，表示这个工作流程（workflow）的名称。
2. on，表示监听的意思，后面可以加上各种事件，例如 push 事件。

下面这段代码表示要监听 master 分支的 push 事件。当 Github Actions 监听到 push 事件发生时，它就会执行下面 jobs 定义的一系列操作。

name: Build app and deploy to aliyun
on:
  #监听push操作
  push:
    branches:
      # master分支，你也可以改成其他分支
      - master
jobs:
...

1. jobs，看字面意思就是一系列的作业，你可以在 jobs 字段下面定义很多作业，例如 job1、job2 等等，并且它们是并行执行的。

jobs:
  job1:
      ...
  job2:
      ...
  job3:
    ...

回头看一下 ci.yml 文件，它只有一个作业，即 build，作业的名称是自己定义的，你叫 good 也可以。

1. runs-on，表示你这个工作流程要运行在什么操作系统上，ci.yml 文件定义的是最新稳定版的 ubuntu。除了 ubuntu，它还可以选择 Mac 或 Windows。

1. steps，看字面意思就是一系列的步骤，也就是说这个作业由一系列的步骤完成。例如先执行 step1，再执行 step2...

setps 步骤讲解

setps 其实是一个数组，在 YAML 语法中，以 - 开始就是一个数组项。例如 ['a', 'b', 'c'] 用 YAML 语法表示为：

- a
- b
- c

所以 setps 就是一个步骤数组，从上到下开始执行。从 ci.yml 文件来看，每一个小步骤都有几个相关选项：

1. name，小步骤的名称。
2. uses，小步骤使用的 actions 库名称或路径，Github Actions 允许你使用别人写好的 Actions 库。
3. run，小步骤要执行的 shell 命令。
4. env，设置与小步骤相关的环境变量。
5. 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

1. 使用 actions/checkout@v1 库克隆代码到 ubuntu 上。
2. 使用 actions/setup-node@v1 库安装 nodejs，with 提供了一个参数 node-version 表示要安装的 nodejs 版本。
3. 在 ubuntu 的 shell 上执行 npm install 下载依赖。
4. 执行 npm run build 打包项目。
5. 使用 easingthemes/ssh-deploy@v2.1.5 库，这个库的作用就是用 SSH 的方式远程登录到阿里云服务器，将打包好的文件夹复制到阿里云指定的目录上。

从 env 上可以看到，这个 actions 库要求我们提供几个环境变量：

1. SSH_PRIVATE_KEY: 阿里云密钥对中的私钥（需要你提前写在 github secrets 上），
2. ARGS: '-rltgoDzvO --delete'，没仔细研究，我猜是复制完文件就删除掉。
3. SOURCE：打包后的文件夹名称
4. REMOTE_HOST: 阿里云公网 IP 地址
5. REMOTE_USER: 阿里云服务器的用户名
6. TARGET: 你要拷贝到阿里云服务器指定目录的名称

如果你想了解一下其他 actions 库的实现，可以直接复制 actions 库的名称去搜索引擎搜索一下，例如搜索 actions/checkout 的结果为：

都看到这了，给个赞再走吧。

参考资料

• Jenkins 用户手册
• GitHub Actions 文档
• GitHub Pages 文档
• Gitea 文档
• GitHub 操作的工作流程语法

更多文章，敬请关注