Yarn Build and deploy image to Azure Container Registry using GitHub Actions

In this blog post I will show you can use a GitHub Action to run Yarn build and deploy a container image to Azure Container Registry.

Prior to continuing with this blog, please review this post in relation to setting up the Azure Container registry and creating the three secrets required to be included in your GitHub repo:

REGISTRY_LOGIN_SERVER – Login server of ACR instance
REGISTRY_USERNAME – Username of ACR instance
REGISTRY_PASSWORD – Password of ACR instance

Once this has been configured, see further below.

I have based this post of creating using a GitHub Action to Yarn build and deploy a Backstage image to Azure Container Registry – using this GitHub repo

GitHub Action

The below will be broken down into the Yarn dependencies & build, Building and deploying the container image to an Azure Container Registry and will finish with the complete GitHub Action.

Yarn dependencies and Yarn build+ install

Installing the dependencies

Yarn will be required to be installed

- name: Install dependencies
  run: yarn install

Setting up node and running a yarn build & install

Next node.js needs to be setup, in this example reference we will be using 16.x

- name: Setup Node.js
  uses: actions/setup-node@v2
  with:
    node-version: '16.x'

Prior to running a docker build – a few Yarn commands are required prior to bundle the application.

- name: yarn build+install
run: |
    yarn install --frozen-lockfile
    yarn tsc
    yarn build:backend

Building the container image

Generating a build ID

First we will generate a build ID that is used to tag the tag the image.

- name: Generate build ID
id: buildid
run: |
    sha=${GITHUB_SHA::8}
    ts=$(date +%s)
    echo "::set-output name=BUILD_ID::${sha}-${ts}"

Docker build and push the container image to Azure Container registry

Notice the reference to secrets REGISTRY_LOGIN_SERVER REGISTRY_USERNAME REGISTRY_PASSWORD that you created prior? These are used to authenticate to the Azure Container Registry

- name: 'Build and push image'
uses: azure/docker-login@v1
with:
    login-server: ${{ secrets.REGISTRY_LOGIN_SERVER }}
    username: ${{ secrets.REGISTRY_USERNAME }}
    password: ${{ secrets.REGISTRY_PASSWORD }}
- run: |
    DOCKER_BUILDKIT=1 docker image build . -f packages/backend/Dockerfile -t ${{ secrets.REGISTRY_LOGIN_SERVER }}/backstage:${{ steps.prep.outputs.BUILD_ID }}
    docker push ${{ secrets.REGISTRY_LOGIN_SERVER }}/backstage:${{ steps.buildid.outputs.BUILD_ID }}

You should now have successfully pushed a container image to your Azure Container Registry

Complete GitHub Action

on:
  pull_request:
    branches:
      - main
  push:
    branches:
      - main

name: Publish

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v2
        with:
          node-version: '16.x'

      - name: Install yarn
        run: yarn install -g 

      - name: yarn build+install
        run: |
            yarn install --frozen-lockfile
            yarn tsc
            yarn build:backend

      - name: Generate build ID
        id: buildid
        run: |
          sha=${GITHUB_SHA::8}
          ts=$(date +%s)
          echo "::set-output name=BUILD_ID::${sha}-${ts}"

      - name: 'Build and push image'
        uses: azure/docker-login@v1
        with:
          login-server: ${{ secrets.REGISTRY_LOGIN_SERVER }}
          username: ${{ secrets.REGISTRY_USERNAME }}
          password: ${{ secrets.REGISTRY_PASSWORD }}
      - run: |
          DOCKER_BUILDKIT=1 docker image build . -f packages/backend/Dockerfile -t ${{ secrets.REGISTRY_LOGIN_SERVER }}/backstage:${{ steps.buildid.outputs.BUILD_ID }}
          docker push ${{ secrets.REGISTRY_LOGIN_SERVER }}/backstage:${{ steps.prep.outputs.BUILD_ID }}

GitHub Repo containing Action

Thanks for following this blog post and hopefully it has assisted you! Do reach out with any queries, content you would like me to add etc!