paint-brush
Deploy React Application to Kubernetes Cluster on Google Cloud Platformby@uchenebed
7,033 reads
7,033 reads

Deploy React Application to Kubernetes Cluster on Google Cloud Platform

by Uche NebedOctober 20th, 2019
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

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

Mention Thumbnail
Mention Thumbnail
featured image - Deploy React Application to Kubernetes Cluster on Google Cloud Platform
Uche Nebed HackerNoon profile picture

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 environment

login to your Google Cloud Console, I used a QwikLab environment for this one. https://googlepluralsight.qwiklabs.com/focuses/23638. 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 https://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 https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add –
sudo add-apt-repository "deb [arch=amd64] https://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, http://[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] http://packages.cloud.google.com/apt cloud-sdk main" | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list
curl https://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.

now we have exposed our application on port 80, we can reach the application through the IP attached to the external Endpoint.

*insert sigh of relief*.