A CI/CD pipeline for a React app with Google Cloud Build

This tutorial assumes you are familiar with triggers in Google Cloud Build and have connected your repo. You can find an easy tutorial how to set up your first trigger right here.

Intro

So you understand the idea behind CI/CD pipelines and want to build your own but are wondering how your it looks in real life? If you have a React app that you want to deploy using Google Cloud Platform (GCP) this tutorial is made just for you.

Prerequisites

As a prerequisite, your application has to be dockerized. I have dockerized a React app in this tutorial, so check that out.

The code

Our yaml file consists of three steps: building the docker image, pushing the image to the container registry and deploying a new Cloud Run revision with that image.

Creating a trigger

First you need to create a trigger that has the repo, that your code is in as a source. You also need to select the event that triggers the trigger (e.g. push to branch). Then edit the yaml file of the trigger in the following way.

1. Building the Docker image

We use the default Docker cloud build image that Cloud Build provides as a container where we execute the docker build command. It creates an image that contains all your React code.

steps:
    - name: 'gcr.io/cloud-builders/docker'
      args:['build', '-t', 'gcr.io/$PROJECT_ID/frontend:$COMMIT_SHA']

2. Pushing to Container Registry

Google Container Registry offers a simple place to store your images of your deployments. This step pushes the previously created image to Container Registry.

    - name: 'gcr.io/cloud-builders/docker'
      args:['push', 'gcr.io/$PROJECT_ID/frontend:$COMMIT_SHA']

3. Deploying to Cloud Run

Cloud Run offers a simple way to deploy dockerized apps. With the gcloud cloud-builder image you can execute any command that you would run with the gcloud command locally. So this step does the same as running gcloud run deploy....

    - name: 'gcr.io/cloud-builders/gcloud'
      args: ['run', 'deploy', '<your service name>', '--image', 'gcr.io/$PROJECT_ID/frontend:$COMMIT_SHA', '--platform=managed', '--region=<your service region>']

Hint: If this steps fails, you might need to give permissions to deploy with Cloud Run to the default Cloud Build service account in your GCP IAM section.

Testing your trigger

Once the yaml file is saved, you can go ahead and change some of the code of your react app. The commit and push the code with git to trigger the event you have specified. In the history of Cloud Build you will see your build running. After it has completed, you can access your deployment via it's url and see the changes.