写作认知体系
  • 《技能记录》
  • devops
  • github
samy
2020-07-07

Github Action自动打包部署

# 简介

Github提供了Action功能，可以在如push行为的时候执行仓库.github/workflows下的yml文件，利用这个功能，可以完成静态博客的自动发布部署。

# 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
2
3
4
5
6
7
8
9
  1. jobs，看字面意思就是一系列的作业，你可以在 jobs 字段下面定义很多作业，例如 job1、job2 等等，并且它们是并行执行的。
jobs:
  job1:
  	...
  job2:
  	...
  job3:
	...
1
2
3
4
5
6
7

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

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

img

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

# setps 步骤讲解

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

- a
- b
- c
1
2
3

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

  1. name，小步骤的名称。
  2. uses，小步骤使用的 actions 库名称或路径，Github Actions 允许你使用别人写好的 Actions 库。
  3. run，小步骤要执行的 shell 命令。
  4. env，设置与小步骤相关的环境变量。
  5. with，提供参数。

img

# 详细示范

综上所述，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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  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 的结果为：

# 实践

这里我分别部署到了Github和Coding。

首先需要创建Token：

Github:https://github.com/settings/tokens

Coding:https://[用户名].coding.net/user/account/setting/tokens

然后设置到Github仓库的环境变量里： 名字可以和我一样 github使用: ACCESS_TOKEN coding使用: CODING_TOKEN 之后编写ci.yml，放到.github/workflows下

name: CI
#on: [push]
# 在master分支发生push事件时触发。
on: 
  push:
    branches:
      - master
jobs: # 工作流
  build: # 自定义名称
    runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]
    steps: # 步骤
      - name: Checkout # 步骤1
        uses: actions/checkout@v1 # 使用的动作。格式：userName/repoName。作用：检出仓库，获取源码。 官方actions库：https://github.com/actions
      - name: Use Node.js ${{ matrix.node-version }} # 步骤2
        uses: actions/setup-node@v1 # 作用：安装nodejs
        with:
          node-version: ${{ matrix.node-version }} # 版本
      - name: run deploy.sh # 步骤3 （同时部署到github和coding）
        env: # 设置环境变量
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
          CODING_TOKEN: ${{ secrets.CODING_TOKEN }}
        run: npm install && npm run deploy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

编写脚本文件，deploy.sh

#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
npm run build          # 生成静态文件
cd docs/.vuepress/dist # 进入生成的文件夹

# deploy to github
echo 'samyz.cn' >CNAME
if [ -z "$GITHUB_TOKEN" ]; then
  msg='deploy'
  githubUrl=git@github.com:moxiaolong/moxiaolong.github.io.git
else
  msg='来自github action的自动部署'
  githubUrl=https://moxiaolong:${GITHUB_TOKEN}@github.com/moxiaolong/moxiaolong.github.io.git
  git config --global user.name "moxiaolong"
  git config --global user.email "975425198@qq.com"
fi
git init
git add -A
git commit -m "${msg}"
echo "上传github开始"
git push -f $githubUrl master:master # 推送到github
echo "上传github完成"
# deploy to coding
if [ -z "$CODING_TOKEN" ]; then # -z 字符串 长度为0则为true；$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量
  codingUrl=git@e.coding.net:moxiaolong/dram/dram.git
else
#注意，coding访问令牌的用户名（替换JPzWHIuoAv）是在https://[登陆用户名].coding.net/user/account/setting/tokens显示的
  codingUrl=https://JPzWHIuoAv:${CODING_TOKEN}@e.coding.net/moxiaolong/dram/dram.git
fi
echo "上传coding开始"
git push -f $codingUrl master # 推送到coding
echo "上传coding完成"

cd -
rm -rf docs/.vuepress/dist
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在package.json中设置脚本

{
"scripts": {
    "deploy": "bash deploy.sh"
  }
}
1
2
3
4
5

之后push了项目后，就会执行ci.yml --> 调用npm run deploy 调用->deploy.sh 了

# 一键部署设置

# 配置

下面的内容默认你已经会创建Github Action，官方提供了很多Github Action 配置模版，可以根据自己的需求随意选择，不是太了解的可以先参考阮一峰 GitHub Actions入门教程 (opens new window)，了解一下Github Action。

我们来看看Github Action配置文件的基本构成，配置文件格式是.yml，示例如下：

# main.yml
# 一个 workflow，名字为Github Action Example
name: Github Action Example

# 触发 workflow 的事件
on:
  push:
    # 分支随意
    branches:
      - master

# 一个workflow由执行的一项或多项job
jobs:
    # 一个job任务，任务名为build
    build:
        # runs-on 指定job任务运行所需要的虚拟机环境(必填字段)
        runs-on: ubuntu-latest
        # steps是每个Job的运行步骤，可以包含一个或多个步骤
        steps:
            # action命令，切换分支获取源码
            - name: Checkout
                # 使用action库  actions/checkout获取源码
                uses: actions/checkout@master
            # action命令，安装Node10
            - name: use Node.js 10
                # 使用action库  actions/setup-node安装node
                uses: actions/setup-node@v1
                with:
                    node-version: 10
            # action命令，install && test
            - name: npm install and test
                # 运行的命令或者 action
                run: |
                    npm install
                    npm run test
                # 环境变量
                env:
                    CI: true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
  • Action是工作流中最小的可移植构建块。你可以创建自己的动作，使用从GitHub社区共享的action库 (opens new window)，以及自定义公共action库。
  • Step是Job执行的一组任务。Job中的每个步骤都在同一运行程序中执行，从而允许该Job中的操作使用文件系统共享信息，Step可以运行命令或action。
  • Job由Step构成。你可以定义工作流文件中Job的运行方式的依赖关系规则。Job可以同时并行运行，也可以依赖于先前Job的状态依次运行。
  • Workflow由一个或多个Job组成，可以通过事件 (opens new window)进行计划或激活。你可以在存储库中设置一个可配置的自动化过程，以在GitHub上构建，测试，打包，发布或部署任何项目。

Github: Github Action插件查询库 (opens new window)，可以查询你需要的action库，这些都是共享的，如果满足不了需求也可以自己定义。

# 发布阿里云ECS

下面就是我发布到阿里云ECS的 Github Action配置文件

# main.yml
name: deploy to aliyun
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 切换分支
      - name: Checkout
        uses: actions/checkout@master
      # 下载 git submodule
      - uses: srt32/git-actions@v0.0.3
        with:
          args: git submodule update --init --recursive
      # 使用 node:10
      - name: use Node.js 10
        uses: actions/setup-node@v1
        with:
          node-version: 10
      # npm install
      - name: npm install and build
        run: |
          npm install
          npm run build
        env:
          CI: true
      # Deploy
      - name: Deploy
        uses: easingthemes/ssh-deploy@v2.0.7
        env:
          SSH_PRIVATE_KEY: ${{ secrets.ACCESS_TOKEN }}
          ARGS: "-avz --delete"
          SOURCE: "[Current File Dir]"
          REMOTE_HOST: "[Domain]"
          REMOTE_USER: "[UserName]"
          TARGET: "[Server Dir]"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

以上是我的配置文件，action插件请根据自己的需求合理选择。我是要博客网站，发布到阿里云服务上，所以采用以上配置，而最后的action Deploy中action插件的选择，也是根据需求，在Github: action插件库 (opens new window)中选择的。

# 参考资料

上次更新: 2022/04/15, 05:41:30
Jenkins推送设置
gitpage设置

← gitpage设置→

Copyright © 2015-2022 友一升 | yessz
×