Deploy React Application using Docker and Google Cloud Platform

In this article, you will learn how to deploy applications on GCP. We will deploy a create-react-app.

Link to the Repo — https://github.com/Harshmakadia/react-docker

Before we get started with the actual steps of deploying the React App using GCP and Docker. First, let’s understand what docker actual is?

Docker is a tool which is designed to make the creating, deploying and running of applications easier with the help of containers. Containers are something which allows the developer to bundle the application with all the necessary ingredients like different libraries, dependencies and ship is as only a single package.

We will go step by step

1. Creating React Application

Create react app is a lot easier using the create-react-app (CRA)

We will use create-react-app package to install and configure simple react application from NPM, Open your terminal and install react app.

For more info on creating a react app

facebook/create-react-app_Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an…_github.com

once you run the application using command$ npm start

After that, it’s time to create a build the app, run$ npm run build

2. Creating minimal Dockerfile

creating a docker file is a cup of your tea. The is no rocket science in creating a docker file.

Just Create a new file with name **_Dockerfile_**Now once the file is created we will add some command to that which will help us to create, run, deploy the application.

Here the content of Dockerfile for react app. Note I’m using Nginx to as a server.

Dockerfile

Once the docker file is created. I’m creating a new folder named deployment within the app directory which has a nginx.conf file

The content of nginx file, note that this is default configuration you may not need to alter this file unless you have some special requirements.

nginx.conf

3. Installing Docker on your machine

Head to this link below and download it for your respective operating system

Docker Desktop_Docker Desktop Enterprise is a new commercial desktop offering that gives you everything you need for enterprise-ready…_www.docker.com

Once it is installed run open your terminal and run below command to check it is installed successfully

docker — — version

Docker version

Now that we have the docker setup on our machine it’s time to create the first image using the following command

docker build -t first-docker .

more info about different command can be found here.

Once you run this command it will execute all the command listed down in the Dockerfile.

Creating Image

we have successfully created the image. Let’s proceed to next step

4. Make use of gcloud SDK

Download SDK from the below link and setup on your machine

Cloud SDK | Cloud SDK | Google Cloud_A collection of command line tools for the Google Cloud Platform. Includes gcloud, bq, gsutil and other important…_cloud.google.com

Now that we have the gcloud SDK setup on our machine

- — Create a new project in GCP

Next step is to create a new project in the GCP where we will be pushing our docker images to the containers.

Configure Docker to use gcloud as a credential helper or are using another authentication method. To use gcloud as the credential helper, run the command:

• gcloud auth configure-docker

It’s time to push the image to the registry

1. Tag the local image with the registry name by using the command:

• docker tag [SOURCE_IMAGE] [HOSTNAME]/[PROJECT-ID]/[IMAGE]

1. where [SOURCE_IMAGE] is the local image name.
2. This command names the image with the registry name and applies the tag latest. If you want to apply a different tag, then use the command:

• docker tag [SOURCE_IMAGE] [HOSTNAME]/[PROJECT-ID]/[IMAGE]:[TAG]

Push the tagged image to Container Registry

Push the tagged image to Container Registry by using the command:

docker push [HOSTNAME]/[PROJECT-ID]/[IMAGE]

This command pushes the image that has the tag latest. If you want to push an image that has a different tag, use the command:

docker push [HOSTNAME]/[PROJECT-ID]/[IMAGE]:[TAG]

When you push an image to a registry with a new hostname, Container Registry creates a storage bucket in the specifiedmulti-regional location. After pushing your image, you can:

• Go to the GCP Console to view the registry and image.
• Run gcloud container images list-tags to view the image's tag(s) and automatically-generated digest:
• gcloud container images list-tags [HOSTNAME]/[PROJECT-ID]/[IMAGE]
• The command’s output is similar to the following:
• DIGEST TAGS TIMESTAMP 44bde... test 2017-..-..

Where

• [HOSTNAME] is listed under Location in the console. It's one of four options: gcr.io, us.gcr.io, eu.gcr.io, or asia.gcr.io.
• [PROJECT-ID] is your Google Cloud Platform Console project ID. See Domain-scoped projects for how to work with projects IDs that include a domain.
• [IMAGE] is the image's name in Container Registry.
• [TAG] is the tag applied to the image. In a registry, tags are unique to an image.

Pushing Image

Navigate the GCP console and search of Container Registry, you will be able to see the image which we push.

It’s time to create cluster now inside Kubernetes Engine in GCP

Creating cluster

Create deployment under workloads

Select the image which you want to deploy and finally click on Expose to expose the deployment.

Set port to 80 in Target Port since we had EXPOSED our application to 80 in the Dockerfile

Once you have exposed the port you will get IP Adress where your react application will be running live.

Deployed Application

And that it’s you are all set with docker. Whenever you want to push new image to the container first build the image with above-specified commands and then push the image to container registry and finally make that image live by going to rolling update option.

Please note down your questions in the comment section below if you have any doubts & I’ll be happy to address them.

That’s the end 🔚 I hope you have learned something new. Happy Learning! 💻 😃