Build a Simple React.js Application with Cloud Run and Docker

Introduction

There are many ways to deploy our application. But in recent years, some companies, especially startup, do not want to allocate too many staff to maintain the server, they tend to use serverless architecture instead. In this article, we will talk about how to deploy a simple React.js application with Cloud Run and Docker.

Cloud Run is serverless, so it abstracts away all infrastructure management and lets you focus on building your application instead of worrying about overhead. As a Google serverless product, it is able to scale to zero, meaning it won’t incur cost when not used. It also lets you use custom binary packages based on containers, which means building consistent isolated artifacts is now feasible.

Solution Diagram

Now, let’s take a look what we will do today:

The application will look like below:

I also deploy the application on github page for live demo.

The work flow is just a few steps:

  1. Create a Dockerfile for configuration.
  2. Build an image and push to the Cloud Storage.
  3. Use Cloud Run to deploy the application.

Before we start, please firstly download the prepared files from my github. Or

git clone https://github.com/manbobo2002/react-form.git

Setup

In console, we choose Cloud Shell and then click the editor mode such that we could easily review our code.

The we have to setup our environment e.g. define project, zone and region:

gcloud config set project <you-project-id>
gcloud config set compute/zone us-central1-a
gcloud config set compute/region us-central1

Now, we are ready to really create something. For convenience, I create some scripts which could create what we want very fast. Actually, we just have to type:

sh startup.sh

Then the lab will be done. But I will still go through the details step by step.

Create a Dockerfile for configuration

For Dockerfile, we have to declare the node image first, and then create a new folder within the container. After that, we copy all the local files into the container. And we install all the required dependencies. Finally, we expose the port and put the command to kick it start. Be friendly reminded that the default port of Cloud Run is 8080, so I expose port 8080 here.

Build an Image and Push to the Cloud Storage

After creating the Dockerfile, we have to build our own image based on the Dockerfile by following command:

gcloud builds submit --tag gcr.io/${GOOGLE_CLOUD_PROJECT}/react-form:1.0.0 .

When we execute above command, we will see the image files are uploaded on the Cloud Storage. However, the first time to run will take a long time. Please wait around few minutes to pull all the required images.

All the images are tgz format by default.

Use Cloud Run to Deploy the Application

Finally, we have to deploy our application on Cloud Run by typing:

gcloud run deploy react-form --image=gcr.io/${GOOGLE_CLOUD_PROJECT}/react-form:1.0.0 --platform managed --region=us-east1 --allow-unauthenticated -q

Please note that we cannot access the Cloud Run application by default. Thus, we have to set IAM policy. For convenience, we just allow access without authentication.

After the execution, it will output an URL and we could access our application by simply clicking it.

Also, we could go to the Cloud Run page to check all the information and statistic about the Cloud Run application.

Congratulation, we have done!

Cleanup

To cleanup all the things, we have to delete the image, remove the cloud storage image and finally delete the Cloud Run service.

What we need is just type:

sh cleanup.sh

Then all the things are cleanup.

That’s the end, hope you enjoy this tutorial.

Leave a Reply