What are Github Actions

Github Actions is a new feature from Github that automates building workflows for our projects, such as code reviews, automated packaging, testing, release…

This article mainly records and reviews how I used Github actions to automatically publish NPM releases and create Github releases. The following code operating environment is Node /14*,vite/2.*, vue/3.*, operation code is the use of Vite + Vue development of a set of UI.

  • Making the address

The basic concept

GitHub Actions has a few terms of its own.

  1. Workflow: Continuous integration of a running process, which is a workflow.
  2. Job: A workflow consists of one or more Jobs. A workflow is a continuous integrated operation that can complete multiple tasks.
  3. Step: Each job consists of multiple steps.
  4. Action: Each step can execute one or more commands (actions) in turn.

Create the first Workflow

To understand the overall flow and usage details of Actions, we chose to create our own Workflow.

  • The default
The # name attribute is used to specify the name of the workflow
name: CI
This section specifies the events that can trigger the execution of the workflow
on:
  # This workflow is triggered when the branch main is pushed
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

  workflow_dispatch:

A workflow is composed of one or more jobs, in which the tasks to be assigned to GitHub aciton are specified
jobs:
  # This job is called build(whatever you want to call it).
  build:
    This is used to specify which operating system the task will run on (GitHub is free).
    runs-on: ubuntu-latest

    # indicate the steps of the build task
    steps:
      The # github Actions plugin is designed to check out the current repository code
      - uses: actions/checkout@v2

      # a shell command. Name is the name of the command
      - name: Run a one-line script
        run: echo Hello, world!

      Run multiple shells
        run: | echo Add other actions to build, echo test, and deploy your project.
Copy the code

My needs

  1. When the codepush 到 deploy-vuiAfter splitting, the latest code is automatically packaged
  2. Publish the packaged code to NPM when the package is complete
  3. When the NPM is published successfully, the latest code of the current point is released.
  • Now that we know what our requirements are, let’s write Workflow as required
  1. The first step

Add push listener on deploy-vui

The # name attribute is used to specify the name of the workflow
name: npm to deploy-vui and create release

on:
  This workflow is triggered when the branch deploy-vui is pushed
  push:
    branches: [ deploy-vui ]
Copy the code
  1. Packaging code

If we want to package our code, we first need to set up the environment in which our code runs

  • Access to NPM token
      1. Go to the NPM home page and click on Access Tokens

      1. Click on theGenerate New TokenButton to create token, be sure to save the token
  • Put NPM token into github project secrets

    The main process is as follows

The # name attribute is used to specify the name of the workflow
name: npm to deploy-vui and create release

on:
  This workflow is triggered when the branch deploy-vui is pushed
  push:
    branches: [ deploy-vui ]
jobs:
  build-publish-release
  	runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2 Check out the code first
        
      - name: Initialize the Node environment
        uses: actions/setup-node@v1
        with:
          node-version: The ${{ matrix.node-version }}
          registry-url: https://registry.npmjs.org/ Publish will be affected if not configured
          
      - name: Installation of yarn # Because my code uses the workspace form of Monorepo, I must use YARN
        run: npm i -g yarn
       
      - name: Install dependencies Install dependencies using YARN
        run: yarn
      
       - name: Compiling and deploying the UI
        working-directory: 'package/vitevui' # Because the code uses monorepo, it needs to enter the package directory to run
        run: yarn build
        
      - name: publish Publish code to NPM follow the NPM specification.
        working-directory: 'package/vitevui'
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} To obtain an NPM token, see Step 2 to create an NPM token and put an NPM token under github secrets
        run: npm publish
      If everything succeeds, then we have successfully released the code to NPM
      
     
Copy the code
  • The third step reads the package information and creates a release

Because my code is the package management form of Monorepo, it may be different from the normal package management scheme. When publishing a specific package, I need to go to the corresponding working directory

  • The Gethub Token application, like the NPM token, is found in github SettingsDeveloper settings -> Personal access tokens, create a new token and select the corresponding permission. Set the corresponding secrets, please refer to the above NPM token to set secrets

The # name attribute is used to specify the name of the workflow
name: npm to deploy-vui and create release

on:
  This workflow is triggered when the branch deploy-vui is pushed
  push:
    branches: [ deploy-vui ]
jobs:
  build-publish-release
  	runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2 Check out the code first
        
      - name: Initialize the Node environment
        uses: actions/setup-node@v1
        with:
          node-version: The ${{ matrix.node-version }}
          registry-url: https://registry.npmjs.org/ Publish will be affected if not configured
          
      - name: Installation of yarn # Because my code uses the workspace form of Monorepo, I must use YARN
        run: npm i -g yarn
       
      - name: Install dependencies Install dependencies using YARN
        run: yarn
      
       - name: Compiling and deploying the UI
        working-directory: 'package/vitevui' # Because the code uses monorepo, it needs to enter the package directory to run
        run: yarn build
        
      - name: publish Publish code to NPM follow the NPM specification.
        working-directory: 'package/vitevui'
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} To obtain an NPM token, see Step 2 to create an NPM token and put an NPM token under github secrets
        run: npm publish
      If everything succeeds, then we have successfully released the code to NPM
      
      Create github release
      # Use the tyankatsu0105/read-package-version-actions@v1 tool to read the corresponding package.json data
      - name: Read package.json
        uses: tyankatsu0105/read-package-version-actions@v1
        with:
          path: './package/vitevui'
        id: package-version
        
        For more parameters to create releases, see Actions /create-release@v1
      - name: Create Release for Tag
        id: release_tag
        uses: actions/create-release@v1
        env:
          GITHUB_TOKEN: The ${{ secrets.PERSONAL_TOKEN }} # This piece needs to use github token, because it needs to push the code to the point
        with:
          tag_name: vitevui-v${{ steps.package-version.outputs.version }}
          release_name: Release vitevui-v${{ steps.package-version.outputs.version }}
          prerelease: false # Whether the version is pre-released
          body: | please click to view/update log (https://bhabgs.github.io/vite-vui-docs/components/log.html).     
Copy the code

conclusion

NPM Actios is a great convenience for us, eliminating a lot of moving bricks. This facilitates our package management.

One of the most important parts of creating workflow is to make sure that the requirements are sorted out before you create workflow, and that the functionality is validated step by step, For the package of Monorepo, my current plan is to use the plug-in scheme of Tyankatsu0105 /read-package-version-actions@v1 to read the specified package.json and complete the release.

Github repository address