DEV Community: Johannes Vitt

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

Johannes Vitt — Fri, 04 Feb 2022 14:20:28 +0000

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.

First CI/CD pipeline with Google Cloud Build

Johannes Vitt — Fri, 04 Feb 2022 14:19:55 +0000

Introduction

If you are working on any project there comes a time where you want to release it to (beta) users. Most likely you choose one of the big three cloud computing providers (AWS, GCP or Azure) to host your next SaaS solution or whatever you are working on. You complete all steps of some youtube/dev.to/medium tutorials (a nice one for Google Cloud Run) and, some debugging with Stackoverflow sprinkled in, your app is available to users.

Let's say you are lucky. Many users find your program interesting and start to use it. You receive the first inquiries: "I love your solution but this buttons needs to be red" - "This is awesome but please translate the program to German so that my grandma can use it". So you go ahead and implement all feature requests. Each time you are done with one of them, you update your service in the cloud. You use the same tutorials, try to remember commands and make some mistakes. This is frustrating and it takes up time you can spend coding.

This is why Continuous Integration / Continuous Deployment was invented. Continuous as in "automated" as in "you no longer need to do it by hand and have typos in your commands". If you are using GCP as your cloud provider Cloud Build offers an easy solution to set up your CI/CD pipeline.

This tutorial assumes you have already set up your GCP environment. Also it assumes you have your code under version control in a git repository.

The Basics

Cloud Build can connect to your git repo, if it is hosted on BitBucket or GitHub.
It can trigger your pipeline based on changes (e.g. commits) in the connected repo.
There are 120 free minutes of build time per day. After that you are charged by the minute.

Connecting your repository

Before you do anything with Cloud Build you need to connect your git repo. In the console of GCP head over to Cloud Build. After activating the service, you need to click "connect repository".

First you choose where your repo is hosted (currently BitBucket and GitHub are available). Choose your provider and hit "continue".

Cloud Build will try to authenticate with the service. So maybe you need to enter your credentials. In the third step you can choose one of the repos you are hosting with the chosen service. In the end you are asked if you want to create your first trigger. This step will be explained in the next section.

Setting up your first trigger

A trigger in cloud build consists of three things:

a repository where the code is hosted. This is the "Source".
a condition e.g. "every time there is a push to the develop branch". Cloud Build calls this "Event"
a list of instructions in a yaml file. They are executed if the condition is met.

Enough talking, let's get started! In order to create your first trigger you should click the "CREATE A TRIGGER" button in the last step of connecting your repository.

First you select a name for your trigger.

Choose "Push to a branch", then choose the source repo and branch (I chose "develop").

Define your actions

Now comes the most important step. You have to add the "intelligence" of your trigger by editing the yaml file that describes the steps that need to be taken. In the configuration section of the trigger, choose "inline" as the location of the yaml file and click the "open editor" button that appears.

There you can edit the yaml file that defines the "actions" of the build pipeline. The default looks like the following lines:

steps:
  - name: ubuntu
    args:
      - echo
      - hello world

This is a very easy example. In Cloud Build every step of a yaml file is run in a seperate docker container. With the name: option we tell Cloud Build what docker image it should use. This example uses ubuntu. With the args we provide a command that is executed in the container once it was started. In this case echo "hello world".

Go ahead and change the file to this:

steps:
  - name: ubuntu
    args:
      - echo
      - hello world
  - name: ubuntu
    args:
      - echo
      - the second hello world

Hit "done" and create the trigger. The trigger will be listed in Cloud Build's list of active triggers.

Testing your trigger

Usually your trigger will be executed when you trigger the event, for example by pushing to the develop branch. There is a way to trigger a build manually by clicking "run" on the right side of the trigger list. Do that and head over to the "history" section of cloud build. In this section you can find the invocations (e.g. executions) of all triggers.

If you click on the top entry of the list, you will see the output of the build. It will look something like this:

...
BUILD
Starting Step #0
Step #0: Pulling image: ubuntu
Step #0: Using default tag: latest
Step #0: latest: Pulling from library/ubuntu
Step #0: Digest: sha256:b5a61709a9a44284d88fb12e5c48db0409cfad5b69d4ff8224077c57302df9cf
Step #0: Status: Downloaded newer image for ubuntu:latest
Step #0: docker.io/library/ubuntu:latest
Step #0: hello world
Finished Step #0
Starting Step #1
Step #1: Already have image: ubuntu
Step #1: the second hello world
Finished Step #1
PUSH
DONE

You can see that both steps were executed. In the last line with Step #0 and Step #1 you can find the output of the echo commands that you defined in your yaml file.

What to do next

Congrats, you have successfully set up your first (simple) Cloud Run trigger! Below you can find some next steps you can take to make your own code deploy with a pipeline.

Head over to this tutorial to learn how to set up a Cloud Build trigger for a React app.
Learn about debugging, concurrency and other performance improvements for Cloud Build (coming soon).
Use Cloud Build for your GitOps flow with terraform (tutorial coming soon).

Deploy a React App on GCP with Google Cloud Run

Johannes Vitt — Sun, 16 Jan 2022 16:03:46 +0000

So you have created your first React project and now you are ready to try to deploy it? Fear not, Google offers Cloud Run, a very simple but powerful tool that helps you do just that. I will show you in three simple steps, how you can deploy a containerized React app with Cloud Run.

This tutorial assumes you have already setup your Google Cloud Project and have your React app running locally.

Can I simply upload my code into a bucket?

When I tried to deploy my first React project, I was already experienced with Cloud Run for various other projects. When I wanted to deploy the app to GCP, my first idea was to run a simple npm run build... and upload the compiled output folder into a Google Cloud Storage (GCS) bucket.

After I was done, I realized that this approach would not work. GCS is trying to serve all routes from a path inside the bucket. So if you create a page /login in React, GCS will try to serve a file located inside the subfolder of the GCS bucket. This will fail, because no such file exists. React is supposed to handle the routing client side. More info on this can be found here.

The "easiest" way to achieve a working routing is to use Google App Engine. However, I find App Engine not very scalable for multiple reasons. The major issue I faced is that the location of your App Engine can not be changed once it was activated for a project (Why?), and you can only have one App Engine location for the whole project.

Cloud Run

The better solution to go with is Google Cloud Run. Cloud Run is actually based on Knative, a "Kubernetes-based platform to deploy and manage modern serverless workloads". The main benefit of Knative is that it makes scaling of any stateless applications very easy. You simply provide a docker image and Knative will scale it up to as many instances as needed.

In comparison to directly running Knative your own Kubernetes cluster, Cloud Run is easier to set up and maintain. It is also very cheap for projects, where you expect a small load of traffic, because Cloud Run is billed per usage (e.g. per request to the service). Another advantage of Cloud Run is the ability to revert your deployments within less than 10s. This feature saved me some headaches in the startup that I worked with.

1. Create a docker image that contains your compiled React app

You need to create a file Dockerfile in the root directory of your project. We will use a multi-stage docker file in this step so be sure to copy all of the following code into a single file.

FROM node:lts-alpine as builder

# by only copying package.json, before running npm install. We can leverage dockers caching strategy for steps. Otherwise docker needs to run npm install every time you change any of the code.
COPY package.json ./
RUN npm install
RUN mkdir /app-ui
RUN mv ./node_modules ./app-ui
WORKDIR /app-ui
COPY . .
# in this step the static React files are created. For more info see package.json
RUN npm run build

After running the builder we have all our static files available. However we still need a way of serving them to the client. We use nginx for this.

FROM nginx:alpine

# copy the .conf template
COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf

## Remove default nginx index page and replace it with the static files we created in the first step
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /app-ui/build /usr/share/nginx/html
EXPOSE 80

CMD nginx -g 'daemon off;'

In the first stage of the docker file (the "build" stage), we call the "build" script. This needs to be defined in your package.json. It triggers the compilation of your react code.

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    ...
  }
  ...
}

In the second stage of the docker file, we copy the configuration file of nginx into the server. So please create a file .nginx/nginx.conf with the following content.

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;

        gzip on;
        gzip_disable "msie6";

        gzip_comp_level 6;
        gzip_min_length 1100;
        gzip_buffers 16 8k;
        gzip_proxied any;
        gzip_types
            text/plain
            text/css
            text/js
            text/xml
            text/javascript
            application/javascript
            application/json
            application/xml
            application/rss+xml
            image/svg+xml;

        root   /usr/share/nginx/html;
        index  /index.html;
        include /etc/nginx/mime.types;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

In the configuration the line try_files $uri $uri/ /index.html; tells the server to try to locate the requested file in the /usr/share/nginx/html directory. If it is not found we serve the index.html file.

2. Upload the Docker Image to Google Container Registry

In the terminal navigate to your projects root folder and run

gcloud builds submit --tag gcr.io/<your-project-id>/react-with-cloudrun

This will build the docker image using the Dockerfile that you have created in the previous step and upload it to the Container Registry.

3. Create the Cloud Run service

In the Google Cloud Console, navigate to the Cloud Run overview. There, create a new service. During the creation of the service select the image you uploaded in the previous step. Choose the port 80 because this is where our NGINX server is listening.

4. (Optional) Map your custom domain to the service

If you own a domain and want to make your React app available with that domain you can set it up with Cloud Run.

Where to go from here

You have successfully deployed your React app with Cloud Run!

As a next step you can try to set up an automated CI/CD pipeline with Google Cloud Build. It fits perfectly with Cloud Run and Docker images.

Instead of using the web GUI to create and manage the resources of Google Cloud Platform, you can also start using Terraform.

When you have multiple services running in Cloud Run, Google Cloud Load Balancing offers an efficient way of routing requests.