This write up shows you an easy way to get started and moving with Google cloud.

I will be showing you how to deploy a serverless react application to your docker container image from local to your google cloud repository.

So we have a react application you can get a copy here on Github.

Link to Github Project (Source code)

Watch Youtube video here (LINK)

Step 1: Setup the Configuration files

Create a Dockerfile file inside the root folder of your project and paste the following code

FROM node:16.15.1 as build
WORKDIR /lit-clothing

COPY package*.json .
RUN npm install
COPY . .

RUN npm run build
FROM nginx:1.19
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /lit-clothing/build /usr/share/nginx/html

Ensure to rename lit-clothing with your project name.

The Dockerfile above will set the configuration of our docker container image, install respective dependencies and set our nginx config.

Now, lets create file folder, with a file in it called nginx called ngnix/ngnix.conf



worker_processes  1;

events {
  worker_connections  1024;
}

http {
  server {
    listen 80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
      try_files $uri $uri/ /index.html;
    }
  }
}

The ngnix.conf file will set our ngnix configiration in the container

Now, run npm run build to create the build, this will create the build folder for us.

Step 2: Login using GC SDK

Login to your google cloud by typing;

gcloud auth login

This will redirect you to google and ask you to sign in to Google, then return you to your command line.

moving on, you will see a message saying you, your current project is [xxxxxx-xxxxx] (project-id)

Run the command below to set your project ID

gcloud config set project {project-id}

Lets build our docker locally and ensure it works!

For Intel

docker build -t lit-clothing .

For M1

docker buildx build --platform linux/amd64 -t lit-clothing .
docker build

Next, run docker images to see your image and run it to test it works

docker run -p 3001:80 lit-clothing

Go to your browser and type localhost:3001 to see your project running.

Step 3: Deploy image

Lets tag our image

docker tag lit-clothing gcr.io/{project-id}/lit-clothing

Its time to push to google repository

docker push gcr.io/{project-id}/lit-clothing

Now go to cloud.google.com and search “container registry” to see your container image

container registory google cloud
google cloud container registory

Now, search Cloud run and Create a service and select the gcr image we uploaded

service cloud run google cloud
google cloud create service

Now, allow unathenticated invocation to make the project visible to the public

google cloud set authentication

set the port number to 80, from the Container, Variables & Secrets, Connections, Security Tab

google cloud set port

Now click on Create and we are done. click the URL to see your live app

Watch Youtube video

Categories: DevOps

Vinay

Lead software engineer with over 5 years in development and 7+ years in network engineering. Recognised educator, substantial online presence, and MSc. Cybersecurity from the University of Derby, UK, BSc. Information Technology from UEW Ghana, and a Higher Diploma in Network Engineering from NIIT India.

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.