Deploy React Application to Kubernetes Cluster on Google Cloud Platform
Congratulations to all who made it this far in the ALCwithGoogle
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
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
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
sudo mkdir 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
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.
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
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
files. from within nano
Ctrl + O
to save and
Ctrl + X
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
Next we create a Dockerfile
Next we edit the Dockerfile and add the following content
COPY /build /usr/share/nginx/html
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.
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
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
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*.
Subscribe to get your daily round-up of top tech stories!