Deploy React App on Google Cloud with Cloud Run 2022 

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 .

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

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

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

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

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

Watch Youtube video