🎨
Notes
  • 持续更新中...
  • articles
    • browser
      • 深入理解现代浏览器 - 导航
      • 深入理解现代浏览器 - 架构
      • 深入理解现代浏览器 - 交互
      • 深入理解现代浏览器 - 渲染器进程
    • dsa
      • DSA - 并查集
      • DSA - 哈希表
      • DSA - AVL 树
      • DSA - 二叉树
      • 快速选择
      • Big O 算法复杂度
      • DSA - 栈和队列
      • DSA - 前缀树 Trie
      • DSA - 图
      • DSA - 链表
      • DSA - 递归
    • typescript
      • TypeScript 学习笔记 - 任意属性 (Indexable Types)
      • 力扣的 TypeScript 面试题
      • TypeScript 学习笔记 - as const
      • TypeScript 学习笔记 - infer
    • network
      • Internet Protocol (IP)
      • 计算机网络基础
      • 如何分辨同源和同站
      • DNS 如何查询 IP 地址?
    • vue
      • Nuxt.js 入门
      • 从零实现一个 Mini Vue
      • 从零实现一个简单的 VDOM 引擎
      • 从零实现一个响应式状态管理
    • sorting
      • 排序 - 归并排序
      • 排序 - 冒泡排序
      • 排序 - 选择排序
      • 排序 - 计数排序
      • 排序 - 插入排序
    • compile
      • Compiler and Interpreter
      • Just-In-Time (JIT) Compilers
      • 编译流程
    • others
      • 什么是上下文无关语法
      • 如何在终端打印出有颜色的字
    • dev-ops
      • github-actions
        • GitHub Action 简介
        • GitHub Actions for CI
    • workflow
      • 用 Node 写一个 cli
      • 如何规范 git commit 信息
      • 如何监听 git hooks
      • 如何规范代码风格 - prettier
      • 如何发布一个 npm package
      • 如何规范代码质量 - eslint
    • design-pattern
      • 代理模式
      • 单例模式
      • 策略模式
    • security
      • 点击劫持
      • CSP 内容安全策略
    • javascript
      • 尾调用优化
      • 4种常见的内存泄漏及解决方法
    • unit-test
      • Test Vuejs Application - Chapter 2
      • Test Vuejs Application - Chapter 1
      • Vue Unit Test Intro
    • performance
      • HTTP 缓存
      • 如何优化图片资源
Powered by GitBook
On this page
  • 使用 workflow 模板
  • 自定义 GitHub Actions workflow
  • build artifacts
  • 自动化 code review

Was this helpful?

  1. articles
  2. dev-ops
  3. github-actions

GitHub Actions for CI

使用 workflow 模板

社区里有很多别人写好的 workflow,我们可以直接引入。比如如果我们的项目是 node 写的话,可以引入 Node.js 模板。

去 GitHub Actions Market -> 选择要使用的 workflow 模板 -> 添加到自己的仓库中(跟着页面操作就行)

e.g. 这是 Node.js workflow 的内容

# .github/workflows/node.js.yml

name: Node.js CI

# on: 定义 action 执行的时机,这里是 push 和 pull request 事件触发时
on:
    push:
        branches: [master]
    pull_request:
        branches: [master]

jobs:
    build:
        runs-on: ubuntu-latest

        strategy:
            matrix:
                # 指定在不同环境下运行测试
                os: [ubuntu-latest, windows-2016]
                node-version: [12.x, 14.x]
        steps:
            # checkout: 复制一份仓库代码到 virtual machine 上
            - uses: actions/checkout@v2
            # setup-node: 安装 Node.js
            - uses: actions/setup-node@v1
            # 安装依赖
            - run: npm install

自定义 GitHub Actions workflow

引入的 workflow 模板,我们是可以根据自己的需求进行修改的。

比如上面 yml 文件中将打包和测试都写在了 build 里面,我们可以将它分成 build 和 test 两个 job:

jobs:
    build:

        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@v2
            - name: npm install and build webpack
              run: |
                npm install
                npm run build

    test:
        runs-on: ubuntu-latest

        strategy:
            matrix:
                # 在不同的操作系统和不同版本的 node 环境下运行测试
                os: [ubuntu-latest, windows-2016]
                node-version: [12.x, 14.x]

        steps:
            # 复制代码到 virtual machine
            - uses: actions/checkout@v2
            # 安装 node
            - name: Use Node.js ${{ matrix.node-version }}
              uses: actions/setup-node@v1
              with:
                  node-version: ${{ matrix.node-version }}
            - name: npm install, and test
                run: |
                    npm install
                    npm test
                env:
                    CI: true

但是这样子分开之后,两个 job 是在不同的 virtual machine 中运行的,这有可能会导致 test 失败,因为它没法用 build 中打包好的文件。

build artifacts

GitHub 内置的 artifact storage 可以让我们保存一个 job 的数据,并供另一个 job 使用。artifact 指的是在 workflow 运行中产生的文件。

我们可以用 actions/upload-artifacts 来将 artifact 上传到 artifact storage 里,然后在另一个 job 中使用 actions/download-artifact 下载 artifact。

另外,jobs 默认是同时运行的。如果 test 想要使用 build 产生的 artifact,就必须先等 build 执行完之后再执行,所以需要指定 needs: build。

jobs:
    build:
        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@v2
            - name: npm install and build webpack
              run: |
                  npm install
                  npm run build
            # 上传 artifact
            - uses: actions/upload-artifact@master
              with:
                  name: webpack artifacts
                  path: public/

    test:
        # 表示 test 需要等 build 执行完成之后再执行
        needs: build
        # ...
        steps:
            - uses: actions/checkout@v2
            # 下载 build artifact
            - uses: actions/download-artifact@master
              with:
                  name: webpack artifacts
                  path: public
            - name: Use Node.js ${{ matrix.node-version }}
              uses: actions/setup-node@v1
              with:
                  node-version: ${{ matrix.node-version }}
            - name: npm install, and test
                run: |
                    npm install
                    npm test
                env:
                    CI: true

自动化 code review

我们也可以自己新建一个 workflow:

.github/workflows/approval-workflow.yml

name: Team awesome's approval workflow
on: pull_request_review

jobs:
    labelWhenApproved:
        runs-on: ubuntu-latest
        steps:
            name: 'label when approved'
            # 当 pr 被 approved 之后,自动打上 label
            - uses: 'pullreminders/label-when-approved-action'
              # 这个 action 需要的变量
              env:
                # 需要 approved 的次数
                APPROVALS: 1
                # GITHUB_TOKEN 的使用可以去 github action 文档看
                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                # 自定义 label 名
                ADD_LABEL: 'approved'
PreviousGitHub Action 简介Nextworkflow

Last updated 4 years ago

Was this helpful?