Google Cloud Platform — Creating a react app.

Nwanede Ogechukwu Daniel
Nov 1 · 11 min read

Docker Image and Kubernetes Engine Applied.


Introduction

Google Cloud platform has a lot of resources that can be used to make real-world applications that provide world-class solutions. In this publication, we shall be leveraging on some GCP resources: Cloud Shell, Cloud Source Repositories, Kubernetes etc. to deploy a react app and expose it to the internet.

I will be taking you through how to; create a react app, package it into a docker image, push to a docker image, push to Container Registry, deploy to a Kubernetes Cluster you have created and expose the cluster containing the app to the internet.

If you are in a hurry, copy and paste the commands into your Terminal, but if you really want to get familiar with the commands, type them into your Terminal.

Prerequisites

  • You must have a free-tier account or paid account on the Google Cloud Platform. if you don’t have one yet, get it here — Google Cloud.
  • Create a Docker Hub account and create a repository. Take note of your Docker Hub account and repository name, you will be making use of them later in this guide.

First things First

I will be making use of Cloud Shell terminal.

Google Cloud Shell provides you with command-line access to your cloud resources directly from your browser. You can easily manage your projects and resources without having to install the Google Cloud SDK or other tools on your system. With Cloud Shell, the Cloud SDK gcloud command-line tool and other utilities you need are always available, up to date and fully authenticated when you need them. Moreover, it is free.

  • Activate Cloud Shell
  • Create a new project or use the preexisting project.
  • Use gcloud config set project [PROJECT_ID] to switch to your desired project; where [PROJECT_ID] is the name of the desired project e.g. gcloud config set project grounded-atrium-256310
  • You need to have node and npm installed on your Cloud Shell. Google Cloud Shell comes pre-installed with both resources. To check, use node --v for node and npm --v for npm.

We are Ready!

We will be following the underlined guide to complete this exercise.

  • Create a React App
  • Package your app into a Docker image
  • Run the container locally on your machine
  • Upload the image to a repository/registry (Docker Hub and Container Registry)
  • Create a container cluster (inside Kubernetes Engine in GCP)
  • Deploy your app to the cluster
  • Expose your app to the Internet

If you would like to see your react app files as they are being created or you want to edit (tweak) these files to make changes order than the defaults, click on the pencil-like icon on the Cloud Shell terminal. It will launch the code editor and you can then access your react app files.

Create a React App

Run the following commands

npx create-react-app MY_REACT_APP

Where MY_REACT_APP is the name you would like to give your react app, e.g. npx create-react-app daniel-react-app

cd MY_REACT_APP

where MY_REACT_APP is the name of your react app e.g. cd daniel-react-app

yarn start

You will get a ‘Compiled successfully!’ output.

You can now view your react app in the browser. To do this, use the web preview button on your terminal.

Change the port number to 3000. This is because your local host and your network is on port 3000. Then click Change and Preview.

Voila! Your react app is live.

  • Navigate to Cloud Shell and use ctrl + c to exit your react app web environment, and you are back to your react app folder.

Next up is packaging your react app into a docker image. If you want to make changes to how your react app looks, now is the time to do so (edit your src and public folder). Your react app will eventually look like what you package into your docker image.

This is what my react app looks like after some tweaking.


Package your app into a Docker image

Now you will bundle your app and put it into a docker image. You need to have a Docker Hub account.

You have to first install Docker on your Cloud Shell Virtual Machine (Cloud Shell has a backing VM). For more information on installing Docker visit this website https://docs.docker.com/install/.

Run the following commands to install Docker.

sudo apt-get update
sudo apt-get install \
apt-transport-https \
ca-certificates \
curl \
gnupg-agent \
software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo apt-key fingerprint 0EBFCD88
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 docker-ce docker-ce-cli containerd.io

Next, you will use Dockerfile to package your react app into a docker image.

nano Dockerfile

Copy and paste the following commands into the GNU nano text editor.

# Stage 1 - Build Stage
FROM node:8 as react-build
WORKDIR /app
COPY . ./
RUN yarn
RUN yarn build
# Stage 2 - Production Stage
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.confgoogle-cloud-challenge-1
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]

Use ctrl + x to save your text. A prompt comes up: ‘Save modified buffer? (Answering “No” will DISCARD changes.)’. Press y for yes and enter to exit the text editor.

GNU nano is an easy to use command line text editor for Unix and Linux operating systems. The nano Dockerfile command creates a file named Dockerfile in your react app folder.

For more explanation on the Dockerfile used, visit this post.

Next you create a nginx.conf file.

nano nginx.conf

Copy and paste the following commands into the GNU nano text editor.

server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
#error_page 404 /404.html;# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass
http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}

Use ctrl + x to save your text. A prompt comes up: ‘Save modified buffer? (Answering “No” will DISCARD changes.)’. Press y for yes and enter to exit the text editor.

Check out this post to understand the importance of the nginx.conf file.

You would also need to create a .dockerignore file. It helps to ignore clumsy and unwanted folders so that your docker image would be as light as possible.

nano .dockerignore

Copy and paste the following into the GNU nano text editor.

.gitnode_modulesbuild

Use ctrl + x to save your text. A prompt comes up: ‘Save modified buffer? (Answering “No” will DISCARD changes.)’. Press y for yes and enter to exit the text editor.

Whew! Finally, we can create our docker image.

docker build -t IMAGE_NAME .

Where IMAGE_NAME is your desired docker image name. e.g. docker build -t danielreactimage .

docker images or docker image ls

This command lists the docker image you just created. In my Command Line Interface as seen in the image above, all the docker images I have was listed. Take note of the details, you will be needing them later in this guide.


Run the container locally on your machine

It’s now time to test your image locally.

docker run -d -p 3000:3000 IMAGE_NAME

Where IMAGE_NAME is your docker image name. e.g. docker run -d -p 3000:3000 danielreactimage

The long alphanumeric key e.g. 552630550d7e9c61f93601cf26edb12a70e2c0a2d392adbb4aad298d99af78edshows that your app is running. Now preview your web to see your app running locally. Note that this is running locally on your machine. Remember to change port to 3000, before previewing, if not already set.


Upload the image to a repository/registry (Docker Hub and Container Registry)

You will now push your image to a repository, Docker Hub especially. You will later push this same image to Container Registry (which is Google Cloud Platform’s private Docker registry/repository) which helps to deploy your images directly to Kubernetes Engine.

Pushing your docker image to Docker Hub requires opening a repository first.

Take note of your username and password, you will be needing it later.

When you have done that, you can now tag that repository and push your image to it.

Login to your Docker Hub account.

docker login

At the prompt, enter your username and password. You will get a ‘Login Succeeded’ output.

Tag your image.

docker tag IMAGE_ID YOUR_DOCKER_ID/DOCKER_REPOSITORY_NAME:TAG

Where IMAGE_ID is the Image ID of your docker image. e.g. 2e7645f4c927 YOUR_DOCKER_ID is your Docker Hub username. e.g. neddocker124 DOCKER_REPOSITORY_NAME is the name of your Docker Hub repository e.g. react-app-guide and TAG is the tag attached to your docker image or your desired tag e.g. latest or 2.0 . So your command will eventually look like this for e.g docker tag 2e7645f4c927 neddocker124/react-app-guide:2.0

You can use docker images or docker image ls to list your image once gain to access the details above.

Now Push your image to Docker Hub.

docker push YOUR_DOCKER_ID/DOCKER_REPOSITORY_NAME

YOUR_DOCKER_ID is your Docker Hub username. e.g. neddocker124 DOCKER_REPOSITORY_NAME is your Docker Hub repository name e.g. react-app-guide . So your command will eventually look like this for e.g docker push neddocker124/react-app-guide .

You get an output that looks like the one below. This shows that the image-push to your Docker Hub repository was successful.

Check your repository to double check that you can see the pushed image.

Tag your image in readiness to being pushed to Container registry.

docker tag IMAGE_ID gcr.io/PROJECT_ID/CONTAINER_REGISTRY_NAME:TAG

Where IMAGE_ID is the Image ID of your docker image. e.g. 2e7645f4c927 PROJECT_ID is the Project ID you have been working with. e.g. daniel-nwanede-1770 . CONTAINER_REGISTRY_NAME is your desired container registry name. e.g. react-guide-image . TAG is the tag you have been working with. e.g. 2.0 . So your command will eventually look like this for e.g docker tag 2e7645f4c927 gcr.io/daniel-nwanede-1770/react-guide-image .

docker push gcr.io/PROJECT_ID/CONTAINER_REGISTRY_NAME

Where PROJECT_ID is the Project ID you have been working with. e.g. daniel-nwanede-1770 . CONTAINER_REGISTRY_NAME is your desired container registry name. e.g. react-guide-image . So your command will eventually look like this for e.g docker push gcr.io/daniel-nwanede-1770/react-guide-image .

gcr.io is the Host Name for your container registry.

I can see a smile on your face, we are almost there.


Create a container cluster (inside Kubernetes Engine in GCP)

You can create your Kubernetes container cluster using either the Command Line Interface (using the kubectl command) or the Web Console. I will be using the Web Console here.

Navigate to Kubernetes Engine > Clusters on your Google Cloud Platform.

Click the Create cluster button.

Input your desired Cluster Name.

Input your desired number of Nodes and your desired Machine Type. Accept every other default and click the create button to create your Cluster.

If you want to use the kubectl command to create your Kubernetes Cluster check out its documentation here.


Deploy your app to the cluster

Your cluster takes some time to be created. When it is ready, click the Deploy button at the top of your ‘clusters’ page.

Select Existing container, your registry image and click CONTINUE. Click CONTINUE again.

Specify your Application name

And click the Deploy button

We have successfully deployed our app to the cluster.

If you want to use the kubectl command to Deploy your app to the cluster check out its documentation here.


Expose your app to the Internet

Lastly, you have to expose your app to the internet so that it can be publicly accessed. You will use the Web Console again to achieve this.

Click the Action button at the top of your Deployment and select Expose.

Input 3000 in the Port and Target port columns and select Load balancer in the Service type column, then click the EXPOSE button.

Refresh the page several times to see the External endpoints I.P Address e.g. 35.193.235.201:3000 (it takes some time before it appears) and either click on it or copy and paste it to your web browser to view your deployed and exposed app.

Congratulations!!! You just deployed your react app using Docker and Google Cloud Platform.


Applaud and Comment on this post.

You can reach me on Facebook: Nwanede Daniel Ogechukwu and on Twitter: @DanEcclesiastes.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade