💻Ephemeral UI: React + Nginx + Docker + Cloud Run☁

Hi🤗, In this tutorial, we are going to implement and deploy a basic React App on Google Cloud Run using Docker, Google Cloud Shell and of course a GCP account!

Before going forward, you might ask what's Cloud Run? What is Ephemeral UI here means?

Cloud Run - Developer's best friend 😎

Google Cloud Platform provide several services to deploy light weight application such as Cloud Functions, App Engine and finally Cloud Run. All these services are serverless and doesn't maintain application's state.

Behind the scene, these are Knative Application which are deployed during the invocation over Kubernetes Engine aka GKE.

Wait, What🧐? if its serverless how is it useful for Front-End Application

This is where the term Ephemeral UI comes into the picture. These application are only specific for a small session where a quick summary or information needs to be received and then the consumer will move away.

Such is the case when you as a consumer wants to do some analysis lets say collect Sales Prediction in future for a product, download the rep-sheet and just woosh away!

Apart from being cursory usage, it is also a good idea to develop and deploy quick UI prototypes on these light weight serverless services, since it won't cost you for sitting idle!!!

Getting Started

Before moving forward you need following things to be setup:

• GCP Account
• Google Cloud Shell
• NodeJS
• ReactJS

Setup Simple React App

In this section, we will create a simple React App that takes user's name as input and returns Hello with name.

Output:

To create this step, use the following code:

Install React

npm install react react-dom

Once installed, change to some directory and type:

npx create-react-app hello-app

After this, change to directory and run the app, it will show a React logo animation on the page:

>cd hello-app
>npm start

Once it is confirmed that React is installed correctly, use the below code in App.js file to create the desired app.

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Hello ${inputValue}!`);
  };

  return (
    <div>
      <h1>Enter your name:</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={inputValue} onChange={handleInputChange} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

If you save the file, the changes will be automatically loaded and it will be visible on local host.

Setting-Up Nginx Configuration

While it is good to test the app locally first before deploying it, you have to follow some extra steps to make the application discoverable on the internet. Nginx provides the way for deploying your app in production setting.

But before this, you have to setup an Nginx configuration file while deploying in container. In your root directory, create a file name nginx.conf and paste following code:

server {
  listen 80;
  sendfile on;
  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  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;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

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

Finally, Dockerfile!

At last, before deployment, you have to do one more step to containerize the application in Docker Container using Dockerfile. The file contains commands similar to Linux commands and such is the case with Docker since it's a OS/Hardware virtualization layer.

Create a file named Dockerfile at the root of your app's directory and paste the following code:

FROM node:16.13.1 as build

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build --prod

FROM nginx:latest AS ngi

COPY --from=build /app/build /usr/share/nginx/html

COPY /nginx.conf  /etc/nginx/conf.d/default.conf

EXPOSE 80

Here, we mention the steps to run npm build and nginx deployment.

Deploy with Google Cloud Shell 🚀

Before moving ahead, make sure you have Google Cloud Shell installed as well as you have service account JSON credentials. Using Google Cloud Shell allows to bypass the Cloud Build or npm build step in the local, so you can directly run build in the container itself.

Type the following command to discover and activate the appropriate service account:

gcloud auth list

This will show list of all the service accounts. If nothing is shown use this instead:

gcloud auth activate-service-account <SERVICE-ACCOUNT-NAME> --key-file=<PATH/TO/JSON>

Once, it is done, you will get activated notification. After this type change to the root of the App directory and type the following command:

gcloud run deploy hello-app --port 80 --allow-unauthenticated

Once it is done, you will start to see build wheel mentioning container initialization and service feedback.

Time to Go!

That's it folks! here we wrap up the tutorial. In this we learned end-to-end deployment of React application on GCP. In the next tutorial, we will show how to setup a CI/CD pipeline to automate the build and deployment of the application.

Take a moment to cherish that you have come this far!👾

Link to Github
https://github.com/RahulDubey391/React-On-Cloud-Run