ALC 4 Phase II Cloud Challenge using A Github Repository

In completing this challenge earlier I used the google container registry “gcr” to store and then deploy to kubernetes and that’s fine and good, here I will be sharing how to use “github” repository to achieve the same.

Terms:

• GCP: Google Cloud Platform
• Repo: Repository

Let’s begin:

NOTE: Both Windows and Linux users can user 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. Github account.
6. 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 install 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) 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-build

3. Now “cd” change into the “win-build” folder [ that react created ] in your opened terminal windows and create a docker file with the commands “New-Item Dockerfile” (using powershell just type) 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:

Now we push to github. Steps are:

1. Create a github repository
2. Add the remote url to your local git repository

Say we had create a github repository called “ogbalumo” we would now add the the “url” to our local (remember the react is already a git repo so no need to run “git init” in the root folder):

git add remote origin https://github.com/udoyen/ogbalumo.git

Then push to origin from local master:

git push -u origin master

If you have two factor authentication enable you will need to “generate” an access token and use it in place of your “password” if or when asked in the push process.

Now back in your google cloud platform you will create a deployment and select the “new container image” option as seen below and note if you haven’t “authorize” gcp to read from you github account you will be asked to do so. Kindly accept so gcp can present all the repos you have and you can then select from the options.

Note that your file structure is important as the “path” to the “Dockerfile” will be searched for using the repo’s root folder. For a file structure like the below image no need to add a custom path to the docker file:

Structure of your created files and folders in vscode

Now click the “deploy” button and watch the gcp build and deploy your container using the docker file in the github repository you provided. After that you will need to expose that workload as a service to have the public access it using the gcp. Do leave us a clap if you found this useful!