7,033 reads

Deploy React Application to Kubernetes Cluster on Google Cloud Platform

by Uche NebedOctober 20th, 2019

Too Long; Didn't Read

We will use a Google VM as our development environment to run ReactJS and Docker. We will then install ReactJs and its dependencies for Node on the development environment. We need to build a Docker container to host the application and serve it via nginx web-server. We then use the Dockerfile to build the container image and supply a name for it. We have two hours to complete the task and use the Google Cloud SDK to run the application. We can then run the react application from the VM on port 3000 on the public IP.

Companies Mentioned

featured image - Deploy React Application to Kubernetes Cluster on Google Cloud Platform

Congratulations to all who made it this far in the ALCwithGoogle
program.

We were recently assigned tasks in each track. I am in the
cloud track and I would be taking you through my workflow for the task assigned to the Cloud Track deploying a
react application to Google Kubernetes Engine(GKE).

So I used a Google VM instance as my development environment, that way we all have the same experience.First Step would be to create a VM for our development environmentlogin to your Google Cloud Console, I used a QwikLab environment for this one. . you have 2 Hours to complete everything on this environment.

VM Specifications are:

```
name -> development-env
```
```
type -> n1-standard
```
```
OS -> Ubuntu 16:04
```
```
allow http traffic
```

Next Open port 3000 on the VM instance so we can preview the application while in development environment. To achieve this we need to create a firewall rule with a network tag, then edit the development-env VM instance to have this network tag.

```
name -> allow-traffic-port-3000
```
```
specified-target-tags -> nodejs-dev
```
```
Source IP Ranges  -> 0.0.0.0/0
```
```
tcp port 3000
```

Use the Images below to configure the Firewall rule

After this Edit the Virtual Machine to include the network tag

nodejs-dev

now we would be able to view whatever is running on port 3000 of the virtual machine from the public IP.next we SSH into the VM. Use the Open in browser window option on Google Console.

From the SSH terminal, we will then Install NodeJs and Docker on our development environment.

run the following commands to install NodeJs

sudo apt-get update
curl -sL //deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install nodejs
sudo apt-get install npm

run the following commands to install Docker

curl -fsSL //download.docker.com/linux/ubuntu/gpg | sudo apt-key add –
sudo add-apt-repository "deb [arch=amd64] //download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt-get update
sudo apt-get install -y docker-ce

After installing docker, I created a folder that will hold all our application code, you can choose to do this wherever

run the following commands to create the directory

cd /opt
sudo mkdir dev
cd dev
sudo chown -R [your-username] .

we then need to install ReactJs and its dependencies, an Easy way to install React and its dependencies for Node is using the create-react-app command. but first we need this command available in out nodejs environment

run the following command to install create-react-app

sudo npm install -g create-react-app

next we use create-react-app to create a react application

create-react-app test-andela-challenge

This will create a new folder called test-andela-challenge, this folder contains our react application, next we go into the directory and run the react application.

cd test-andela-challenge
npm start

your terminal prompt should look like this when the application is running

you can now view the application from the public IP address of our development environment on port 3000, //[public-ip]:3000

Optional

If you want to make changes to the application, you can. use

Ctrl + C

to stop the application from the terminal. go into the src directory and edit App.js and App.css files. from within nano you use

Ctrl + O

to save and

Ctrl + X

to exit.

cd src
nano App.js // nano App.css

Now we need to Containerize the Application (put the application in a container). We will build the docker container to host the application and serve it via nginx web-server.

First we build the React Application

npm run build

Next we create a Dockerfile

touch Dockerfile

Next we edit the Dockerfile and add the following content

FROM nginx:alpine
COPY /build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

The content of the file, means we are building from an existing image "nginx:alpine" Docker will pull this image from the Container Registry. it will then copy the content of the "build" directory to the html folder on our container, then expose port 80, and start the nginx service

Now we have defined our container as a Dockerfile. we can now build the container image and supply a name for it. I used "test-andela-challenge-docker" as the name for my image.

sudo docker build . -t test-andela-challenge-docker

we have successfully built the container image, you can view the images in your environment with the following command.

sudo docker images

Now our container image is built. we will to upload it to a container registry in so we can create applications from it. we will be uploading it to the Google Container Registry. to do this we would need the following:

google cloud SDK
google account username and password
gcp project-id
gcp region

First we install Google Cloud SDK on our development environment

echo "deb [signed-by=/usr/share/keyrings/cloud.google.gpg] //packages.cloud.google.com/apt cloud-sdk main" | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list
curl //packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key --keyring /usr/share/keyrings/cloud.google.gpg add –
sudo apt-get update && sudo apt-get install google-cloud-sdk

you may or may not need to run these commands

cd ~
sudo chown -R [username] .config

Now we will connect the Google Cloud SDK to our google cloud account. There are two options:

using a service account
using the root google account details

we will be using the root google account details. run the following command

gcloud init

you will need to supply some options, (login with google account) just follow the prompts. like image below

after you supply the verification code, you will be authenticated to your google cloud account. follow the prompts and specify your project ID and google cloud region. I have been using eu-west-1b.

Next we use gcloud to configure docker

gcloud auth configure-docker

now we tag the application using the google cloud format

sudo docker tag [image-name] [gcloud-host]/[project-id]/[image-tag:version]

this is what my own command looks like:

sudo docker tag test-andela-challenge-docker eu.gcr.io/qwiklabs-gcp-00-ee40f571c6fa/react-docker:v1

now we will push the image to Google Container Registry, which will make it available in my Google Cloud Console

sudo docker push eu.gcr.io/qwiklabs-gcp-00-ee40f571c6fa/react-docker:v1

the container image will now be available in "Container Registry" on your Google Cloud Console.

Hang on, we're almost there. All that's left is to create a Kubernetes cluster and run this Container Image as a pod in that cluster. the following this we would do from the Google Cloud Console.Create a Kubernetes Cluster, from the Kubernetes Engine tab. My cluster has 2 nodes, It would also work with just 1 node, we are not expecting a lot of traffic. the more nodes, the more the compute charges to your account.

once the Cluster is done creating, we can add a workload to run on the cluster, which would be our container image. click the workload option on the sidebar and add a workload.Choose existing container image and select our image from the container registry, also use an existing cluster and select the cluster we have just created.

Once we have created the deployment, we then need to expose the application to the outside world. remember our application runs from port 80 inside the container because we are serving it with nginx. we akso want to expose it to the default https port 80 to the outside world, so we would map port 80 from the outside would to port 80 inside the container.