github Actions实践—自动化发布npm包

vlambda
2022-04-12

github Actions实践—自动化发布npm包

今天在群里“学习”的时候聊到了CI/CD，听群友说起了github Actions这个工具，感觉挺有意思的。所以我就打算简单实践下，看看CI/CD在github Actions中是怎么体现的：

首先把需要自动化发布的npm包上传到github。

然后进入 Actions -> 点击 set up a workflow yourself 开始搭建自己的workflow：

默认创建了main.yml，后续重点之一就是修改它，操作面板的右侧提供了编辑该文件的文档

点击文档中的Configuring workflows可以进入更详细地创建和管理 GitHub Actions 工作流程的配置内容。

简单分析下默认创建的main.yml文件：

1.name: CI

给我们的工作流workflow取名，我推测，工作流可以设置多条，用name加以区分

on:

用on键定义工作流程触发器

on:
  # 通过推送或拉取主分支(main)事件触发工作流
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # 从“actions”选项卡手动运行工作流
  workflow_dispatch:

jobs

一个工作流中可以有一个或多个作业通过按顺序或者并行的方式执行。

  # 创建了一个名叫‘build’的作业
  build:
    # 指定了操作系统为‘ubuntu-latest’
    runs-on: ubuntu-latest

    # Steps 代表一系列任务作为作业的一部分而被执行
    steps:
      # 检查仓库以便作业能正常访问
      - uses: actions/checkout@v3

      # 执行单条脚本
      - name: Run a one-line script
        run: echo Hello, world!

      # 执行多条脚本
      - name: Run a multi-line script
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.

原本打算实现自动化部署前端项目，但考虑到没有服务器，于是我选择了用实现自动化发布npm包的方式来代替实现所谓的CI/CD流程。GitHub DOS 其实给出了很清晰的发布步骤，但是考虑到第一次玩这个工具，所以我便记录下这次实现自动化发包的过程，主要流程如下：

「1. 配置密钥信息：」

这个密钥存的内容就是我们的npm账户的token令牌信息。这里出现一件了挺有趣的事,我觉得要是第一次配置这密钥还真可能会有点小懵逼：由于需要token信息，所以我就在npm官网找到了这里

github Actions实践—自动化发布npm包但是呢，token信息并不是完整的明文显示，可我又必须得复制这段信息存到github仓库的密钥里，这不相互矛盾了嘛。（中间省去我翻找的过程...）我们可以看到右上角有两个按钮一个是生成新的token，另一个是删除。但是那会我想着既然这个原本就已经生成的token信息都不是完整显示，那我再生成一个不也一样嘛。。。其实不然，如下所示，github做了一个挺骚气的操作，那就是生成新的token信息时，只会在用户停留在这个页面时保持展示，一旦用户刷新了页面那么这段私密信息将再也不会再显示了，所以才会导致我刚刚那个懵逼的情况...

既然拿到了token信息，那我们就将这个私密信息作为环境变量NPM_TOKEN存入秘密基地--Actions secrets即可。

「2. 配置main.yml文件」

发布npm包-官网给出的案例是很不错的，不过我稍加了改动。因为我想实现的自动化发包是指当我执行 git push 时自动进行发包，这样我们就不用在每次更新npm包后手动执行npm publish了。所以我们需要对main.yml中的on定义为当执行git push工作流程时启动触发器。

具体配置信息如下，可以直接复用：

name: Publish Package to npmjs

on:
  push:
    branches: [ main ]
    
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      # Setup .npmrc file to publish to npm
      - uses: actions/setup-node@v3
        with:
          node-version: '16.x'
          registry-url: 'https://registry.npmjs.org'
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}