ALC 4 Phase II Cloud Challenge using The Google Container Registry

In this version of the challenge we are to create a react app, package it using docker and deploy it to kubernetes on google cloud platform. I use a Linux machine [ Ubuntu to be precise ] and always able to get it done very quickly and easily, now I want to help Windows users on how they too can get it done.

NOTE: Both Windows and Linux users can use this method to complete their challenge. For Linux users use the “terminal” and Windows user the “powershell” window.

Prerequisites:

gcloud components install docker-credential-gcr
docker-credential-gcr configure-docker

4. Login to docker using your docker credentials. This should have been setup when installing docker but just in case you missed it:

docker login --username <enter_docker_username>

Let’s begin. We will be using “yarn” to carry out this challenge so we install it using

npm install -g yarn

Note you might need to run that above command using a windows “administrative” terminal, administrative here meaning “a powershell or command prompt” opened as an administrator.

Now that it is installed let us create a new directory using “vscode” called challengeapp or whatever you like and open that folder in vscode and open the powershell or terminal (linux users) extensions using the respective vscode terminal commands for your respective OS, this will open powershell window or bash shell in vscode so you can type the commands bellow.

Steps:

yarn add global create-react-app

2. Run the command:

yarn create-react-app win-challengeapp

3. Now “cd” change into the “win-challengeapp” folder [ that react created ] in your opened terminal windows and create a docker file with the commands “New-Item Dockerfile” (using powershell just type it) or “touch Dockerfile” for linux users, in that directory and add the following lines of code: Note docker file is simply a file called “Dockerfile”.

Structure of your created files and folders in vscode
FROM node as build-deps
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build
FROM nginx:1.12-alpine
COPY --from=build-deps /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

This will do two things:

4. Now we build it with docker:

docker build . -t udoyen/win-challengeapp

Note: “-t udoyen/win-challengeapp”, is mine version where I used “udoyen” which is my docker username and “udoyen/win-challengeapp” to tag the built image. Call yours what you want.

Let’s test the image:

docker run -p 8080:80 --name win-docker udoyen/win-challengeapp

If all goes well we should see this, when we run “localhost:8080” in our browser of choice:

Note if you have docker plugin for vscode installed your will see your image and container in the docker tool window.

Now that it is running, let’s shut it down:

docker container stop win-docker

We now push it to the Google Container Registry:

docker tag udoyen/win-challengeapp gcr.io/spikey-bigtable-new/win-challengeapp:windows-version

2. Then push:

docker push gcr.io/spikey-bigtable-new/win-challengeapp:windows-version

Where the format is “docker tag [SOURCE_IMAGE] [HOSTNAME]/[PROJECT-ID]/[IMAGE]:[TAG]":

Now go to your gcp project and create a “kubernetes cluster” and then create a workload or deploy your image stored in “gcr” by selecting the deploy option in the cluster window and then in the edit window select the option “existing container image” and pick your image from the seen option(s):

And sit back and watch your container get deployed. Now let’s push this to docker:

docker tag udoyen/win-challengeapp {docker-hub-username}/win-challenge:final

2. Push:

docker push {docker-hub-username}/win-challenge:final

And your image is now available on docker hub. Do leave us a clap if you found this useful!

DevOps | FullStack developer | Python::Flask | GCP Cloud Certified | AWS & AZURE Cloud Savy | Linux Sysadmin | Google IT Support