乐趣区

关于github-pages:使用-github-actions-实现-npm-包自动化发布

jiezi

鉴于我公布 / 行将公布的 npm 包越来越多，我决定用 github 的 actions 性能来实现 npm 包主动公布，过程也比较顺利，遂决定写一篇流水账记录下主动公布的实现，不便当前用到的时候翻阅。

起步

以 react-m-editor 这个组件为例子，公布过程个别分位两步以下两步：

  1. 打包组件，公布 npm 组件
  2. 打包示例，公布 github page 示例界面

上面咱们就依照下面两个步骤来实现目标。
咱们先在 github 网站上的我的项目下找到 Actions 菜单栏，这边官网会提供一堆 Workflow 供咱们抉择，咱们从中找到一个 Publish Node.js Package，会主动帮咱们生成一份配置文件 .github/workflow/npm-publish.yml，内容如下：

# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Node.js Package

on:
  release:
    types: [created]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
      - run: npm ci
      - run: npm test

  publish-npm:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
          registry-url: https://registry.npmjs.org/
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

// ... 还有一部分用于公布 githua package 的代码
// ... 因为用不到所以间接将这部分删除了

上面咱们依据具体的公布步骤批改配置文件。

触发事件配置

个别的公布脚本都会有一个触发事件，github actions 是通过脚本中的 on 字段判断的，默认的触发事件是创立版本：

on:
  release:
    types: [created]

我比拟习惯应用 pull_request 公布，所以在这里我将它改成了其余分支公布 pr 到 main 分支时公布：

on:
  pull_request:
    branches:
    - main

公布 npm 组件

之前公布 npm 包都是本地打包成组件后登录 npm 账号运行 npm publish 公布，生成的配置文件中曾经有相似的性能了，然而还有一些配置须要批改。
首先示例配置文件用的包管理工具是 npm，而我的我的项目用的是 yarn，通过 查阅材料 发现 `actions
/setup-node 这个工具反对 yarn`：

Supported package managers are npm, yarn, pnpm (v6.10+).)

间接将 npm ci 批改成 yarn install。
生成的配置文件中的 build 局部是单元测试用的，这个组件没写测试代码😓，所以这块间接删除。而在公布的配置中，短少了打包的选项，所以还得增加 yarn build。最初公布局部配置具体如下：

publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
          registry-url: https://registry.npmjs.org/
      - run: yarn
      - run: yarn build
      - run: yarn publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

这边有配置一个 secrets.npm_token，这是一个 npm 生成的用来做登录认证的 token，配置步骤如下：

在 npm 官网生成 token

  1. 登录 npm 官网，在右上角的头像下拉选项中选中 Access Tokens 进入界面
  2. 点击 Generate New Token 按钮，抉择 Automation 或者 publish 选项，再点击 Generate Token 按钮
  3. 界面提醒 Successfully generated a new token!，复制生成的 token

在 github 中注销 token

  1. 进入 github 的 我的项目目录，抉择 Settings 菜单进入我的项目的设置界面
  2. 在侧边栏选中 Secrets 进入该界面，选中 New repository secret 按钮，输出表单信息，Name 为 NPM_TOKEN，Value 为刚刚复制的 token，最初点击 Add Secret 按钮增加实现

步骤完结后，提交一个 pr 测试公布，在 Actions 菜单上面能够查看残缺的日志，公布胜利。

公布 github page

这里用到了 peaceiris/actions-gh-pages 插件，上面间接贴配置代码

  create-githubpage:
    needs: publish-npm
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
      - name: page build
        working-directory: ./example
        run: |
            yarn
            yarn add react-m-editor
            yarn build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{secrets.PERSONAL_TOKEN}}
          publish_dir: ./example/build

这里要留神几个问题

  1. 脚本运行的地位是在我的项目目录下的 example 文件夹中，要通过设置 working-directory 来配置工作文件夹，~ 而不是用命令行去 进入文件夹~。
  2. 组件和示例都是用了 react hook 去实现，本地打包组件后后再用打包好的组件去打包示例，会有 多个 react 版本问题，开发环境时能够通过 link 解决。在这里能够间接 yarn add react-m-editor 装置最新版本的组件，之后打包的代码就不会呈现这个报错。

因为咱们打包后的代码是要上传到 github 上的，所以还有一个 github 的登录认证问题。actions-gh-pages 提供了三中登录认证：

认证 公有我的项目 公共我的项目 协定 是否须要设置
github token ✅ ✅ HTTPS 不须要
deploy_key ✅ ✅ SSH 须要
personal_token ✅ ✅ HTTPS 须要

设置认证为 github_token

无需设置，按以下配置即可，点击查看设置文档。

- name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{secrets.GITHUB_TOKEN}}
    publish_dir: ./example/dist // 打包后动态界面的门路

设置认证为公私钥对 deploy_key

[点击查看如何配置公私钥)[https://github.com/peaceiris/…]
在本地终端运行以下命令行生成公私钥

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
# You will get 2 files:
#   gh-pages.pub (公钥)
#   gh-pages     (私钥)

进入 github 网站 的我的项目目录下，抉择 Settings 菜单，抉择左侧的 Deploy keys 菜单，点击 Add deploy key 按钮，进入新增界面，勾选上 Allow write access，输出 Title，而后将本地生成的 gh-pages.pub 的内容复制到 Key 输入框中，点击 Add key 按钮，增加公钥胜利。
抉择左侧 Secrets 菜单，新增一个 Name 为 ACTIONS_DEPLOY_KEY 的 Repository secrets，Value 为 gh-pages 的内容，增加公钥胜利。
配置文件中相干局部配置如下：

- name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    deploy_key: ${{secrets.ACTIONS_DEPLOY_KEY}}
    publish_dir: ./example/dist  // react-m-editor 打包后的我的项目文件在这个文件夹中

设置认证为 personal_token

进入 Settings/Settings Developer settings 界面，抉择左侧的 Personal access tokens 菜单，点击 Generate new token 按钮，Node 输出 git-page key（这个本人取名），Expiration 选一个过期工夫，这边我抉择了 No Expiretion（用不过期），勾选 repo 选项，领有代码的读写权限，最初点击 Generate token 按钮生成 token。
复制生成的 token，进入我的项目界面 -> Settings -> Secrets，新增一个 Name 为 PERSONAL_TOKEN 的 Repository secrets，Value 为刚刚复制的 token。
配置文件中的相干配置如下：

- name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    personal_token: ${{secrets.PERSONAL_TOKEN}}
    publish_dir: ./example/dist

留神：以上三中认证仅需配置一种

提交 pr 后测试，公布 github pages 胜利。
点击查看我的项目残缺的公布脚本配置。

参考

actions-gh-page 文档

退出移动版