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:

1. Install nodejs on Windows or Linux
2. Windows Professional version
3. Setup GCP Cloud SDK on your local machine
4. Install docker and enable the settings to use Linux containers (not needed for Linux users) rather than Windows version as the latter are more expensive to deploy on gcp (note: that this settings can be changed after installing, if you enabled it).
5. Set up google container credential helper in docker so you can push the created image to your google container registry

• Install the helper using the commands from a powershell window:

gcloud components install docker-credential-gcr

• Configure the helper:

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:

1. Install the react app tool:

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:

1. Draw in the node docker image and copy your package.json and yarn.lock files into that image and run yarn then once again copy the entire contents of your current location in the image and use yarn to build.
2. Draw in the “nginx” image from docker and “ — from=build-deps” in the step 1 above copy the “build” folder into the “/usr/share/nginx/html” location in the image we are pulling in. Windows users “remember” we are using a linux container hence the “/usr/…”. We now expose port 80 and run the nginx command in the container in none daemon mode.

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:

1. Tag it first:

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]":

• ‘[SOURCE_IMAGE]’: image name on your local build
• ‘[HOSTNAME]’: the host here ‘gcr.io’
• ‘[PROJECT_ID]’: My gcp project id
• ‘[IMAGE]’: Image name

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:

1. Tag:

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!