github actions 入门指南及博客自动部署实践

自从 github 提供了 github actions 后，我的或者依赖于 github 的公司能够考虑把持续集成方案迁到 github actions。

github 会提供一个如下配置的服务器作为 runner，能够说至关良心了。

• 2-core CPU
• 7 GB of RAM memory
• 14 GB of SSD disk space

另外若是你有网络时延的需求，也能够自建 runner。(好比构建及拉取镜像)

本文将介绍 github actions 的用法，以及如何使用它自动部署我的博客或者前端应用

• 原文连接: github actions 入门指南及实践
• 系列文章: 我的服务器运维指南

快速开始

在 github 上进入我的仓库，找到 Actions 的标签页

若是你是一个前端项目，可使用 Node.js 的模板，点击 Set up this workflow

此时生成了一个文件 .github/workflows/nodejs.yaml，修改内容以下

name: Git Action Test

on: [push]

jobs:
 build:

 runs-on: ubuntu-latest

 steps:
 - uses: actions/checkout@v1
 - name: Use Node.js 10.x
 uses: actions/setup-node@v1
 with:
 node-version: 10.x
 - name: npm install, build
 run: | npm install npm run build --if-present  env:
 CI: true
复制代码

执行 git push 操做，此时能够在 github 的 Actions 标签页看到执行结果

术语

• runner: github 分配的用来执行 CI/CD 的构建服务器 (也能够自建 runner)
• workflow: CI/CD 的工做流
• job: 任务，好比构建，测试和部署。每一个 workflow 由多个 job 组成
• step: 每一个 job 由多个 step 组成

配置

参考官方文档: Workflow syntax for GitHub Actions

on

该 CI/CD 触发时的事件。若是须要上传代码自动部署的功能时，应该选择 on: push

on: push
复制代码

更多事件能够参考官方文档 Events that trigger workflows

另外，咱们能够利用 issues 事件作不少事情，如邮件通知之类

若是是 Issue 类博客，则能够经过监听 issues.opened 事件，调用 github api，自动生成网址博客

on:
 issues:
 types: [opened, edited, milestoned]
复制代码

jobs

一个 CI/CD 的工做流有许多 jobs 组成，好比最典型的 job 是 lint，test，build 或者 deploy。

jobs:
 test:
 build: 
 deploy:
复制代码

全部的 job 都是并行的，但每每会有依赖关系：你总得经过测试了，才能再去部署吧

jobs.<job_id>.needs

needs 肯定 job 的依赖关系

jobs:
 test:
 deploy:
 needs: test
复制代码

jobs.<job_id>.runs-on

当你使用 github actions 时，github 会十分大方的给你分配一个配置还不错的服务器做为构建服务器，用来跑你的 workflow

• 2-core CPU
• 7 GB of RAM memory
• 14 GB of SSD disk space

恩，比我本身的服务器要强

使用 runs-on 指定服务器系统，用的最多的应该就是 ubuntu-latest 了

runs-on: ubuntu-latest

runs-on: windows-latest
复制代码

jobs.<job_id>.steps

即某个任务的一系列动做，如部署一个前端须要安装依赖，编译代码等等

jobs.<job_id>.steps.name

为 step 指定一个名称，将会在 github action 的控制台中显示

jobs.<job_id>.steps.run

该 step 须要在 shell 中执行的命令

# 单行
- name: Install Dependencies
 run: npm install

# 多行
- name: Install and Build
 run: | npm install npm run build 复制代码

jobs.<job_id>.steps.uses

选择一个 action，能够理解为若干 steps.run，有利于代码复用。这也是 github action 最主要的功能。

若是你想找一个好用的 github action，能够在 github marketplace 浏览并检索

这是一个在当前操做系统中安装 node:10 的 action 示例

- name: use Node.js 10.x
 uses: actions/setup-node@v1
 with:
 node-version: 10.x
复制代码

固然，这里怎么能少得了 docker 的身影呢，在 actions 中也可使用 docker。若是对 docker 不太了解，能够看个人文章: docker 简易入门

如下是 npm install 的一个示例

jobs:
 build:
 steps:
 - name: Install
 uses: docker://node:alpine
 with:
 args: npm install
复制代码

secret and context

如何在 github action 上访问敏感数据？如使用 ssh 登陆时如何维护密码。

咱们能够在 github repo 上依次点击 Settings -> Secrets 设置 secret

- name: setup aliyun oss
 uses: manyuanrong/setup-ossutil@master
 with:
 endpoint: oss-cn-beijing.aliyuncs.com
 access-key-id: ${{ secrets.OSS_KEY_ID }}
 access-key-secret: ${{ secrets.OSS_KEY_SECRET }}
复制代码

这里的 secret 就是一种 context，描述 CI/CD 一个 workflow 中的上下文信息，使用 ${{ expression }} 语法表示。除了 secret，还有

• github: workflow 的信息，如 github.sha 能够获取当前的 commit SHA，咱们能够利用它为 sentry 或者 docker image 打入版本号
• env: 环境变量
• job: 当前执行 job 的信息，如 job.status 表示当前 job 的执行状态
• matrix: 描述一些构建信息，如 node 以及 os 版本号

更多 context 信息能够参考官方文档 Contexts and expression syntax for GitHub Actions

实践自动部署

个人博客目前托管在阿里云OSS上，如下 action.yaml 描述了自动部署的流程。能够参考个人配置 shfshanyue/blog

name: deploy to aliyun oss

on: [push]

jobs:
 build:

 runs-on: ubuntu-latest

 steps:
    # 切代码到 runner
 - uses: actions/checkout@v1
 with:
 submodules: true
    # 下载 git submodule
 - uses: srt32/git-actions@v0.0.3
 with:
 args: git submodule update --init --recursive
    # 使用 node:10
 - name: use Node.js 10.x
 uses: actions/setup-node@v1
 with:
 node-version: 10.x
    # npm install
 - name: npm install and build
 run: | npm install npm run build  env:
 CI: true
    # 设置阿里云OSS的 id/secret，存储到 github 的 secrets 中
 - name: setup aliyun oss
 uses: manyuanrong/setup-ossutil@master
 with:
 endpoint: oss-cn-beijing.aliyuncs.com
 access-key-id: ${{ secrets.OSS_KEY_ID }}
 access-key-secret: ${{ secrets.OSS_KEY_SECRET }}
 - name: cp files to aliyun
 run: ossutil cp -rf .vuepress/dist oss://shanyue-blog/
复制代码

部署成功

更多文章

• 前端部署发展史
• docker 简易入门
• 我的服务器运维指南
• 当我有一台服务器时我作了什么
• 若是你想搭建一个博客
• github actions 入门指南及博客自动部署实践
• 使用 k8s 部署你的第一个应用: Pod，Deployment 与 Service
• 使用 k8s 为你的应用配置域名: Ingress
• 使用 k8s 为你的域名加上 https

---

我是山月，我会按期分享全栈文章在我的公众号中。若是你对全栈面试，前端工程化，graphql，devops，我的服务器运维以及微服务感兴趣的话，能够关注我。若是想进群交流，能够添加我微信 shanyue94，备注加群。