ALC 4 Phase II Cloud Challenge using The Google Container Registry

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
docker login --username <enter_docker_username>
npm install -g yarn
  1. Install the react app tool:
yarn add global create-react-app
yarn create-react-app win-challengeapp
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;"]
  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.
docker build . -t udoyen/win-challengeapp
docker run -p 8080:80 --name win-docker udoyen/win-challengeapp
docker container stop win-docker
  1. Tag it first:
docker tag udoyen/win-challengeapp gcr.io/spikey-bigtable-new/win-challengeapp:windows-version
docker push gcr.io/spikey-bigtable-new/win-challengeapp:windows-version
  • ‘[SOURCE_IMAGE]’: image name on your local build
  • ‘[HOSTNAME]’: the host here ‘gcr.io’
  • ‘[PROJECT_ID]’: My gcp project id
  • ‘[IMAGE]’: Image name
  1. Tag:
docker tag udoyen/win-challengeapp {docker-hub-username}/win-challenge:final
docker push {docker-hub-username}/win-challenge:final

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
george udosen

george udosen

45 Followers

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