How to use GitHub Actions to deploy on tag to Netlify?

Question

I have a react app with 2 environemnts in netlify. Until now, I was managing the Continuous deployments using 2 branches but sometimes it gets very messy when doing hotfixes. I would like to set up a Continuous Deployment system where it will deploy on git tags on the same branch instead of having different branches. I think it's the best approach as the code will always be common if it's the same branch.

After some research, I have found that it could be done using github actions (we are already using this for git) and the netlify cli to build based on tags.

From the documentation it seems I should use:

on: push
name: Publish on Netlify

jobs:
  publish:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master

    - name: Publish
      uses: netlify/actions/build@master
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        NETLIFY_BASE: site
        NETLIFY_CMD: npm build
        NETLIFY_DIR: site/_build

This comes from https://github.com/netlify/actions/tree/master/build

The code for working with the tags in github actions is:

on:
  push:
    tags:
    - '*'

It was posted on this article: https://github.community/t5/GitHub-Actions/How-to-run-GitHub-Actions-Workflow-only-for-new-tags/td-p/29413#

I understand that it should be like this:

on:
  push:
    tags:
    - '*'
name: Publish on Netlify

jobs:
  publish:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master

    - name: Publish
      uses: netlify/actions/build@master
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        NETLIFY_BASE: site
        NETLIFY_CMD: npm build
        NETLIFY_DIR: site/_build

But it's not working. Any ideas?

Answer 1

Hey as zzarbi has commented, it's not clear what troubles you are facing, so I can just give an example what works for me.

1. Add the folders ./github/workflows to your project root
2. Add the file production.yml and paste the code of step 3
3. You might need to change the package manager and/or build command to e.g. yarn

#  Name of workflow
name: Production workflow

# When workflow is triggered
on:
  push:
    tags:
      - "v*"

# Jobs to carry out
jobs:
  deploy:
    # Operating system to run job on
    runs-on: ubuntu-latest
    # Steps in job
    steps:
      # Get code from repo
      - name: Checkout code
        uses: actions/checkout@v1
      # Install NodeJS
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      # Run npm install and build on our code
      - run: npm install
      - run: npm run build --if-present
      # Deploy to Netlify using our production secrets
      - name: Deploy to netlify
        uses: netlify/actions/cli@master
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        with:
          args: deploy --dir=build --prod
          secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'

4. Add secrets to your repository.

• Go to the repo > settings > secrets and add the variable name NETLIFY_AUTH_TOKEN
• For the value, Go to Netlify > User Settings > Application and create a new token
• Create another secret in GitHub and name it NETLIFY_SITE_ID (this can be changed for example to NETLIFY_SITE_ID_DEV just make sure to change it in the production.yml as well
• In Netlify, go to your site > site settings > general and copy the API ID and use it as the value

Note: You might need to disable auto deploy process such as on pull requests in netlify

With that setup, each new tag will run the GitHub action.

Tip: I use the standard-version package for release management (https://www.npmjs.com/package/standard-version)

Credits: I could gain all of the ideas from https://dev.to/curtiscodes/ci-cd-pipeline-with-netlify-and-github-actions-bcm