Deploy React Application to Google Kubernetes Engine

Introduction

In this article, I will guide you through deploying a React Application to Google Kubernetes Engine (GKE). Previously, I wrote an article about deploying a NodeJS Application to GKE, which you can refer to for some basic information before continuing.

Steps to Follow

The process is quite similar to deploying a NodeJS Application and includes the following steps:

Create a React Application
Build a Docker image
Push the Docker image
Deploy the Docker image to GKE

You will notice that when working with Kubernetes, the main difference is in the step where you build the Docker image. Depending on the application you need to deploy, there are different ways to build the Docker image. However, the common point is that once you build the Docker image, you have completed almost half of the process. This is because the subsequent steps involving Kubernetes are entirely the same.

Detailed Process

1. Create a React Application

In this step, you can either use an existing React project or create a new one.

I will use Vite to create a React project as follows:

yarn create vite

Next, select the basic information to initialize the project. Once the project starts successfully, proceed to the next step.

2. Build Docker Image

First, create a `Dockerfile`:

FROM node:alpine as build-stage
WORKDIR /app
COPY package*.json yarn.lock ./
RUN yarn install --silent
COPY . .
RUN yarn build

FROM nginx:alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

The image build process is divided into two stages. In the build step, pay attention to the line `RUN yarn build` to replace the command with the one that builds your source code into static files corresponding to your project.

Next, in the production-stage, pay attention to the line `COPY --from=build-stage /app/dist /usr/share/nginx/html` to replace the directory with the static files after the build. In this case, my folder is `dist`. Here, I am copying the static files into the Nginx web server. If you need to learn the basics of Nginx, you can refer to this guide.

Next, create a `.dockerignore` file to ignore any files that should not be copied during the Docker image build process.

To build the image, execute the following command:

docker build . -t react-ts

3. Push Docker Image

To push your Docker image to Google Cloud Artifact Registry, check out this article I mentioned earlier. Alternatively, you can also push it to Docker Hub.

4. Deploy Docker Image to GKE

Now, let's create a cluster with the following command:

# gcloud container clusters create {cluster name} \
#   --project {project id} \
#   --zone {zone id} \
#   --machine-type {machine type}

# ex:
gcloud container clusters create k8s-cluster \
  --project project-id \
  --zone asia-southeast1-a \
  --machine-type e2-micro

Replace the placeholders for the cluster name, project ID, zone, and machine type as needed.

As mentioned earlier, when deploying projects to Kubernetes, the main difference lies in how you build the Docker image, which varies by project type. Once you have the Docker image, the content of the `deployment.yml` file will be similar to the one used for deploying a NodeJS application. You just need to update the image and port information accordingly.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: deployment-name
  labels:
    name: label-name
spec:
  replicas: 1
  selector:
    matchLabels:
      app: label-name
  template:
    metadata:
      labels:
        app: label-name
    spec:
      containers:
        - name: react-ts
          image: gcr.io/{project id}/react-ts # or use image from docker hub
      restartPolicy: Always
---
apiVersion: v1
kind: Service
metadata:
  name: service-name
  labels:
    service: label-name
spec:
  selector:
    app: label-name
  type: LoadBalancer
  ports:
    - protocol: TCP
      port: 80 # port service
      targetPort: 80 # port pod

Note that if the Docker image built earlier uses Nginx, it will default to using port 80.

After that, apply to initialize the resources:

Wait a moment to check that the pod, service, and deployment have been successfully created:

Then, access the EXTERNAL-IP of the LoadBalancer to see the results.

To delete the resources, use the following command:

Conclusion

Through this article, you've learned how to deploy a React project to Google Kubernetes Engine. You can apply the same process to deploy other front-end projects like Angular and VueJS. Just build the project into static files and successfully build the Docker image. The following steps will be the same.

Feel free to share your thoughts in the comments!