自动化.md · Jay_Ohhh/front-end notes

CI/CD

CI/CD 可让持续自动化和持续监控贯穿于应用的整个生命周期（从集成和测试阶段，到交付和部署）。

这些关联的事务通常被统称为 CI/CD 管道。

持续集成(Continuous integration)

在持续集成环境中，开发人员将会频繁得提交代码到主干。这些新提交在最终合并到主线之前，都需要通过编译和自动化测试进行验证。这样做是基于之前持续集成过程中很重视自动化测试验证结果，以保障所有得提交在合并主干之后得质量问题，对可能出现得一些问题进行预计。

持续交付(Continuous Delivery)

持续交付就是应用发布出去的过程。这个过程可以确保我们尽量可能快的实现交付。这就意味着除了自动化测试，我们还需要有自动化的发布流，以及通过一个按键就可以随时随地实现应用的部署上线。

通过持续交付，可以决定每天，每周，每两周发布一次，这完全可以根据自己的业务进行设置。

但是，如果你真的希望体验持续交付的优势，就需要先进行小批量发布，尽快部署到生产线，以便在出现问题时方便进行故障排除。

持续交付旨在建立一个可随时将开发环境的功能部署到生产环境的代码库。

持续部署(Continuous Deployment)

对于一个完整、成熟的 CI/CD 管道来说，最后的阶段是持续部署。

如果我们想更加深入一步的话，就是持续部署了。通过这个方式，任何修改通过了所有已有的工作流就会直接和客户见面。没有人为干预(没有一键部署按钮)，只有当一个修改在工作流中构建失败才能阻止它部署到产品线。

持续部署是一个很优秀的方式，可以加速与客户的反馈循环，但是会给团队带来压力，因为不再有"发布日"了。开发人员可以专注于构建软件，他们看到他们修改在他们完成工作后几分钟就上线了。基本上，当开发人员在主分支合并一个提交时，这个分支将被构建，测试，如果一切顺利，则部署到生产环境中。

Github Actions

GitHub Actions 是什么？

https://docs.github.com/cn/enterprise-server@2.22/actions/learn-github-actions/workflow-syntax-for-github-actions

https://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html

持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为 actions。

很多操作在不同项目里面是类似的，完全可以共享。GitHub 注意到了这一点，想出了一个很妙的点子，允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。

如果你需要某个 action，不必自己写复杂的脚本，直接引用他人写好的 action 即可，整个持续集成过程，就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。

GitHub 做了一个官方市场，可以搜索到他人提交的 actions。另外，还有一个 awesome actions 的仓库，也可以找到不少 action。

上面说了，每个 action 就是一个独立脚本，因此可以做成代码仓库，使用userName/repoName的语法引用 action。比如，actions/setup-node就表示github.com/actions/setup-node这个仓库，它代表一个 action，作用是安装 Node.js。事实上，GitHub 官方的 actions 都放在 github.com/actions 里面。

既然 actions 是代码仓库，当然就有版本的概念，用户可以引用某个具体版本的 action。下面都是合法的 action 引用，用的就是 Git 的指针概念，详见官方文档。

actions/setup-node@74bc508 # 指向一个 commit
actions/setup-node@v1.0    # 指向一个标签
actions/setup-node@master  # 指向一个分支

基本概念

GitHub Actions 有一些自己的术语。

（1）workflow （工作流程）：持续集成一次运行的过程，就是一个 workflow。

（2）job （任务）：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务。

（3）step（步骤）：每个 job 由多个 step 构成，一步步完成。

（4）action （动作）：每个 step 可以依次执行一个或多个命令（action）。

使用限制

https://docs.github.com/en/actions/learn-github-actions/usage-limits-billing-and-administration

每个 Workflow 中的 job 最多可以执行 6 个小时
每个 Workflow 最多可以执行 72 小时
每个 Workflow 中的 job 最多可以排队 24 小时
在一个存储库所有 Action 中，一个小时最多可以执行 1000 个 API 请求
并发工作数：Linux：20，Mac：5
Job matrix - A job matrix can generate a maximum of 256 jobs per workflow run.
在10秒钟的时间间隔内最多只能排队500次工作流运行。

workflow 文件

GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的.github/workflows目录。

workflow 文件采用 YAML 格式，文件名可以任意取，但是后缀名统一为.yml，比如foo.yml。一个库可以有多个 workflow 文件。GitHub 只要发现.github/workflows目录里面有.yml文件，就会自动运行该文件。

workflow 文件的配置字段非常多，详见官方文档。下面是一些基本字段。

name

name字段是 workflow 的名称。如果省略该字段，默认为当前 workflow 的文件名。

name: GitHub Actions Demo

on

on字段指定触发 workflow 的条件，通常是某些事件。

on: push

上面代码指定，push事件触发 workflow。

on字段也可以是事件的数组。

on: [push, pull_request]

上面代码指定，push事件或pull_request事件都可以触发 workflow。

完整的事件列表，请查看官方文档。除了代码库事件，GitHub Actions 也支持外部事件触发，或者定时运行。

on.<push|pull_request>.<tags|branches>

指定触发事件时，可以限定分支或标签。

on:
  push:
    branches:
      - master

上面代码指定，只有master分支发生push事件时，才会触发 workflow。

on:
  push:
    tags:
      - 'v*'

tag变更时，才会触发 workflow。

jobs.<job_id>.name

workflow 文件的主体是jobs字段，表示要执行的一项或多项任务。

jobs字段里面，需要写出每一项任务的job_id，具体名称自定义。job_id里面的name字段是任务的说明（在 GitHub 工作流上显示的步骤名称。）。

jobs:
      my_first_job:
            name: My first job
      my_second_job:
            name: My second job

上面代码的jobs字段包含两项任务，job_id分别是my_first_job和my_second_job。

jobs.<job_id>.needs

needs字段指定当前任务的依赖关系，即运行顺序。

jobs:
      job1:
      job2:
            needs: job1
      job3:
            needs: [job1, job2]

上面代码中，job1必须先于job2完成，而job3等待job1和job2的完成才能运行。因此，这个 workflow 的运行顺序依次为：job1、job2、job3。

jobs.<job_id>.runs-on

runs-on字段指定运行所需要的虚拟机环境。它是必填字段。目前可用的虚拟机如下。

ubuntu-latest，ubuntu-18.04或ubuntu-16.04

windows-latest，windows-2019或windows-2016

macOS-latest或macOS-10.14

下面代码指定虚拟机环境为ubuntu-18.04。

runs-on: ubuntu-18.04

jobs.<job_id>.strategy

运行在多个环境：

比如下面的代码，我们使用了矩阵指定了：2 个操作系统，3 个 node 版本。

这时候下面这段代码就会执行 6 次—— 2 x 3 = 6！！！

runs-on: ${{ matrix.os }}
strategy:
  matrix:
    os: [macos-latest, windows-latest, ubuntu-18.04]
    node: [12, 14, 16]
steps:
  - uses: actions/setup-node@v2
    with:
      node-version: ${{ matrix.node }}

The setup-node action is the recommended way to configure a Node.js version when using GitHub-hosted runners. For more information, see the setup-node action.

jobs.<job_id>.steps

steps字段指定每个 Job 的运行步骤，可以包含一个或多个步骤。每个步骤都可以指定以下三个字段。

jobs.<job_id>.steps.name：步骤名称。

jobs.<job_id>.steps.run：该步骤运行的命令或者 action。

jobs.<job_id>.steps.env：该步骤所需的环境变量。

下面是一个完整的 workflow 文件的范例。

name: Greeting from Mona
on: push

jobs:
    my-job:
      name: My Job
      runs-on: ubuntu-latest
      steps:
      - name: Print a greeting
        env:
          MY_VAR: Hi there! My name is
          FIRST_NAME: Mona
          MIDDLE_NAME: The
          LAST_NAME: Octocat
        run: |
          echo $MY_VAR $FIRST_NAME $MIDDLE_NAME $LAST_NAME.

上面代码中，steps字段只包括一个步骤。该步骤先注入四个环境变量，然后执行一条 Bash 命令。

cache action

shell脚本中 if 的-e，-d，-f

-e filename 如果 filename存在，则为真

-d filename 如果 filename为目录，则为真 

-f filename 如果 filename为常规文件，则为真

-L filename 如果 filename为符号链接，则为真

-r filename 如果 filename可读，则为真 

-w filename 如果 filename可写，则为真 

-x filename 如果 filename可执行，则为真

-s filename 如果文件长度不为0，则为真

-h filename 如果文件是软链接，则为真

filename1 -nt filename2 如果 filename1比 filename2新，则为真。

filename1 -ot filename2 如果 filename1比 filename2旧，则为真。

ant-design .github/workflows/test.yml

# Origin Source
# https://github.com/ant-design/ant-design/blob/79f566b7f8abb1012ef55b0d2793bfdf5595b85d/.github/workflows/test.yml
name: ✅ test

on: [push, pull_request]

jobs:
  setup:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: cache package-lock.json
        uses: actions/cache@v2
        with:
          # 找不到路径则不缓存
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: create package-lock.json
        # --package-lock-only只会更新/创建package-lock.json,而不会检查node_modules和下载依赖
        run: npm i --package-lock-only --ignore-scripts

      - name: hack for single file
        # -d filename 如果 filename为目录，则为真，if-then，这里需要学习linux命令
        # fi：if 语句的结束标志
        # cp [选项] 源文件 目标文件夹
        run: |
          if [ ! -d "package-temp-dir" ]; then
            mkdir package-temp-dir
          fi
          cp package-lock.json package-temp-dir

      - name: cache node_modules
        id: node_modules_cache_id
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: install
        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
        # npm ci 通过跳过某些面向用户的功能，它可以比常规的 npm install快得多。
        # 要求必需有 package-lock.json 或 npm-shrinkwrap.json 文件存在
        # 会检测如果 node_modules 已经存在，则先删除再进行安装操作
        # 不会更新 package.json 或 package-lock.json 文件，整个安装过程是锁死的
        run: npm ci

  compile:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: cache lib
        uses: actions/cache@v2
        with:
          path: lib
          key: lib-${{ github.sha }}

      - name: cache es
        uses: actions/cache@v2
        with:
          path: es
          key: es-${{ github.sha }}

      - name: compile
        run: npm run compile

      - name: check
        run: node ./tests/dekko/lib.test.js
    needs: setup

  lint:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: lint
        run: npm run lint
    needs: setup

  tsx-demo:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: tsx-demo
        run: npm run check-ts-demo
    needs: setup

  check_metadata:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: check demo
        run: node ./scripts/check-demo.js
    needs: setup

  react-17-dom:
    name: react@17.x / dom
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: test
        run: npm test -- -w 1 --coverage

      - name: coverage
        run: bash <(curl -s https://codecov.io/bash)
    needs: setup

  react-17-node:
    name: react@17.x / node
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: test
        run: npm run test-node
    needs: setup

  react-17-lib:
    name: react@17.x / lib
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: restore cache from lib
        uses: actions/cache@v2
        with:
          path: lib
          key: lib-${{ github.sha }}

      - name: test
        run: npm test
        env:
          LIB_DIR: lib
    needs: compile

  react-17-es:
    name: react@17.x / es
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: restore cache from es
        uses: actions/cache@v2
        with:
          path: es
          key: es-${{ github.sha }}

      - name: test
        run: npm test
        env:
          LIB_DIR: es
    needs: compile

  react-17-dist:
    name: react@17.x / dist
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: dist
        run: npm run dist
        env:
          NODE_OPTIONS: --max_old_space_size=4096

      - name: check
        run: node ./tests/dekko/dist.test.js

      - name: bundlesize
        run: npm run bundlesize
        env:
          BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}

      - name: test
        run: npm test
        env:
          LIB_DIR: dist
    needs: setup

  react-16-dom:
    name: react@16.x / dom
    runs-on: ubuntu-latest
    env:
      REACT: 16
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: install react 16
        run: npm run install-react-16

      - name: test
        run: npm test -- -w 1 --coverage
    needs: setup

  react-16-node:
    name: react@16.x / node
    runs-on: ubuntu-latest
    env:
      REACT: 16
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: install react 16
        run: npm run install-react-16

      - name: test
        run: npm run test-node
    needs: setup

  react-16-lib:
    name: react@16.x / lib
    runs-on: ubuntu-latest
    env:
      REACT: 16
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: restore cache from lib
        uses: actions/cache@v2
        with:
          path: lib
          key: lib-${{ github.sha }}

      - name: install react 16
        run: npm run install-react-16

      - name: test
        run: npm test
        env:
          LIB_DIR: lib
    needs: compile

  react-16-es:
    name: react@16.x / es
    runs-on: ubuntu-latest
    env:
      REACT: 16
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: restore cache from es
        uses: actions/cache@v2
        with:
          path: es
          key: es-${{ github.sha }}

      - name: install react 16
        run: npm run install-react-16

      - name: test
        run: npm test
        env:
          LIB_DIR: es
    needs: compile

  react-16-dist:
    name: react@16.x / dist
    runs-on: ubuntu-latest
    env:
      REACT: 16
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: install react 16
        run: npm run install-react-16

      - name: dist
        run: npm run dist
        env:
          NODE_OPTIONS: --max_old_space_size=4096

      - name: check
        run: node ./tests/dekko/dist.test.js

      - name: test
        run: npm test
        env:
          LIB_DIR: dist
    needs: setup

  style:
    name: style compile
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2

      - name: restore cache from package-lock.json
        uses: actions/cache@v2
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
        uses: actions/cache@v2
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: compile
        run: npm run compile

      - name: dist
        run: npm run dist
        env:
          NODE_OPTIONS: --max_old_space_size=4096

      - name: lessc default
        run: npx lessc --js ./dist/antd.less

      - name: lessc dark
        run: npx lessc --js ./dist/antd.dark.less

      - name: lessc variable
        run: npx lessc --js ./dist/antd.variable.less

      - name: lessc component
        run: npx lessc --js ./es/button/style/index.less

      - name: lessc mixins
        run: npx lessc --js ./es/style/mixins/index.less
    needs: setup

skip ci

在 commit 信息中只要包含了下面几个关键词就会跳过 CI，不会触发 CI Build

[skip ci]
[ci skip]
[no ci]
[skip actions]
[actions skip]

todo

Github Actions

docker 阿里云部署，多人协作（持续集成）：lint、test、合并

GitLab Actions

.gitlab-ci.yml

https://juejin.cn/post/6971013569986953223

https://juejin.cn/post/6844904131778330637

Jay_Ohhh / front-end notes

CI/CD

持续集成(Continuous integration)

持续交付(Continuous Delivery)

持续部署(Continuous Deployment)

Github Actions

GitHub Actions 是什么？

基本概念

使用限制

workflow 文件

name

on

on.<push|pull_request>.<tags|branches>

jobs.<job_id>.name

jobs.<job_id>.needs

jobs.<job_id>.runs-on

jobs.<job_id>.strategy

jobs.<job_id>.steps

cache action

skip ci

todo

GitLab Actions

简介

发行版

贡献者

近期动态

Jay_Ohhh / front-end notes .gitee-modal { width: 500px !important; }

CI/CD

持续集成(Continuous integration)

持续交付(Continuous Delivery)

持续部署(Continuous Deployment)

Github Actions

GitHub Actions 是什么？

基本概念

使用限制

workflow 文件

name

on

on.<push|pull_request>.<tags|branches>

jobs.<job_id>.name

jobs.<job_id>.needs

jobs.<job_id>.runs-on

jobs.<job_id>.strategy

jobs.<job_id>.steps

cache action

skip ci

todo

GitLab Actions

简介

发行版

贡献者

近期动态

搜索帮助

Jay_Ohhh / front-end notes