In view of my release / upcoming releasenpmWith more and more bags, I decided to use themgithubofactionsFunction to achievenpmThe process of automatic release of packages is also relatively smooth, so I decided to write a daily account to record the implementation of automatic release, which is convenient for me to read when I use it in the future.

start

withreact-m-editorTaking this component as an example, the publishing process is generally divided into two steps, as follows:

1. Packaging components, publishingnpmassembly
2. Packaging examples, publishinggithub pageSample interface

Let’s follow the above two steps to achieve the goal.
We first find it under the project on GitHub websiteActionsMenu bar, the official here will provide a pile ofWorkflowFor us to choose from, we find onePublish Node.js Package, it will automatically generate a configuration file for us.github/workflow/npm-publish.yml, as follows:

# 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/[email protected]
      - uses: actions/[email protected]
        with:
          node-version: 14
      - run: npm ci
      - run: npm test

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

// ...  There is also some code for publishing githua package
// ...  This part is deleted directly because it can't be used

Next, we modify the configuration file according to the specific release steps.

Trigger event configuration

General release scripts have a trigger event,github actionsIs through theonField. The default trigger event is create version:

on:
  release:
    types: [created]

I’m used to itpull_requestPublish, so here I change it to publish PR to other branchesmainPublish on branch:

on:
  pull_request:
    branches:
    - main

releasenpmassembly

Previously releasednpmPackages are packaged locally into components and logged innpmAccount operationnpm publishAfter publishing, the generated configuration file already has similar functions, but some configurations need to be modified.
First, the package management tool for the sample configuration file isnpm, and my project usesyarn, afterAccess to informationfind`actions
/setup-nodeThis tool supportsyarn` ：

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

Directlynpm ciModified intoyarn install。
In the generated configuration filebuildSome of them are used for unit testing. This component does not write test code, so this one is deleted directly. In the published configuration, the option of packaging is missing, so it has to be addedyarn build。 The configuration of the final release part is as follows:

publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/[email protected]
      - uses: actions/[email protected]
        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}}

There is a configuration heresecrets.npm_token, this is anpmGenerated for login authenticationtoken, the configuration steps are as follows:

staynpmOfficial website generationtoken

1. Sign inNPM official website, select from the avatar drop-down option in the upper right cornerAccess TokensEnter the interface
2. clickGenerate New TokenButton, selectAutomationperhapspublishOptions, and then clickGenerate TokenButton
3. Interface promptSuccessfully generated a new token!, copy generatedtoken

staygithubMedium registrationtoken

1. get intogithubofProject directory, selectSettingsEnter the item setting interface from the menu
2. Check in the sidebarSecretsEnter this interface and selectNew repository secretButton, enter form information,NamebyNPM_TOKEN，ValueFor just copiedtoken, and finally clickAdd SecretButton add complete

At the end of the step, submit aprTest release, inActionsUnder the menu, you can view the complete log and publish it successfully.

releasegithub page

It’s used herepeaceiris/actions-gh-pagesPlug in. The configuration code is pasted directly below

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

Here we should pay attention to several problems

1. The location where the script runs is in the project directoryexampleFolder, to setworking-directoryTo configure working folders, ~ instead of using the command lineEnter folder~。
2. Components and examples are usedreact hookTo implement, package the components locally and then package the examples with the packaged components. There will beMultiple react version issues, you can use thelinksolve. Here you can directlyyarn add react-m-editorAfter installing the latest version of components, the error message will not appear in the packaged code.

Because our packaged code is to be uploaded togithubYes, so there’s another onegithubLogin authentication problem.actions-gh-pagesThree types of login authentication are provided:

authentication	Private project	Public project	agreement	Need to set
github token	✅	✅	HTTPS	unwanted
deploy_key	✅	✅	SSH	need
personal_token	✅	✅	HTTPS	need

Set authentication togithub_token

Without setting, you can configure it as follows,Click to view the settings document。

- name: Deploy
  uses: peaceiris/[email protected]
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_ dir: ./ Example / dist // the path of the static interface after packaging

Set authentication to public-private key pairdeploy_key

[Click to see how to configure public and private keys)[https://github.com/peaceiris/…]
Run the following command line at the local terminal to generate the public-private key

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
# You will get 2 files:
#   gh-pages. Pub (public key)
#GH pages (private key)

get intoGitHub websiteUnder the project directory, selectSettingsMenu, select the menu on the leftDeploy keysMenu, clickAdd deploy keyButton to enter the new interface and check itAllow write access, enterTitle, and then the locally generatedgh-pages.pubCopy contents of toKeyIn the input box, clickAdd keyButton. The public key is added successfully.
Select leftSecretsMenu, add oneNamebyACTIONS_DEPLOY_KEYofRepository secrets，Valuebygh-pagesSuccessfully added the public key.
The relevant parts in the configuration file are configured as follows:

- name: Deploy
  uses: peaceiris/[email protected]
  with:
    deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
    publish_ dir: ./ Example / dist // the packaged project file of react-m-editor is in this folder

Set authentication topersonal_token

get intoSettings/Settings Developer settingsInterface, select the on the leftPersonal access tokensMenu, clickGenerate new tokenButton,Nodeinputgit-page key(this one is named by itself),ExpirationI chose an expiration time hereNo expiration, checkrepoOption, have the read-write permission of the code, and finally clickGenerate tokenButton generationtoken。
Copy generatedtoken, enter the project interface – >Settings -> Secrets, add a new oneNamebyPERSONAL_TOKENofRepository secrets，ValueFor just copiedtoken 。
The relevant configurations in the configuration file are as follows:

- name: Deploy
  uses: peaceiris/[email protected]
  with:
    personal_token: ${{ secrets.PERSONAL_TOKEN }}
    publish_dir: ./example/dist

Note: only one of the above three certifications needs to be configured

Test and release after submitting prgithub pagessuccess.
Click to view the complete release script configuration of the project。

reference resources

Actions GH page document