Deploy your react web apps with google cloud run

containerization a web apps using docker and deploy it to google cloud run services.

As a software engineer especially in a front end scope, not many engineers get their hands into the deployment process. Usually productivity engineer or DevOps already did the configuration in the pipeline, and we as front end engineer just focused on our code. Why don’t we try to learn how to deploy our code with cloud services?

Google Cloud Run is is a managed compute platform that automatically scales your stateless containers, so we are going to use docker in this step.

Mandatory prerequisite to follow:
1. Install Docker
2. Install Google Cloud SDK (https://cloud.google.com/sdk/docs/)
3. Create a new project in your dashboard (https://console.cloud.google.com/)
4. node and npx

1. Create a react app

We are going to use a default create-react-app for this.

npx create-react-app yourProjectName
cd yourProjectName
yarn start

and make sure it does not throw any error.

2. Create a dockerfile configuration

We are going to use a simple configuration, here we are using serve that can handle client side routing for node environment. Here some useful link if you want to know detail about serve.
https://create-react-app.dev/docs/deployment https://github.com/zeit/serve

And we need to expose 8080 port because Google Cloud Run listen on 8080 port by default.
https://cloud.google.com/run/docs/reference/container-contract#port

FROM node:12-slim
RUN mkdir -p usr/src/app
WORKDIR /usr/src/app
COPY . .
RUN npm install -g serve
RUN npm install
RUN npm run build
EXPOSE 8080
CMD ["serve", "-s", "-l", "8080", "./build"]

3. Build and deploy a container

We are going to build and deploy a container using google cloud sdk, make sure you are on the root directory of your project.

Build a container:

You can find project id in your google console dashboard.

gcloud builds submit --tag gcr.io/yourProjectId/hello

if it is success, it will looks like this:

Deploy a container:

gcloud run deploy --image gcr.io/yourProjectId/hello --platform managed

and choose some option that google offer for configuration. And if it is success, it will return something like this:

Service [hello] revision [hello-00001-luv] has been deployed and is serving 100 percent of traffic at https://hello-wtjtziv4wq-an.a.run.app

That’s it! for scaling and provisioning all has been handled by google itself.