Deploying a React app to Kubernetes on Oracle’s OKE

How to deploy a React application (with frontend and backend components) to the Oracle Container Engine for Kubernetes (OKE)

Kubernetes, often referred to as K8s, is an open-source container orchestration platform designed to automate the deployment, scaling, and management of containerized applications. One of the key features of Kubernetes is its ability to automatically scale applications based on demand. It dynamically allocates resources to applications, ensuring they have the necessary computing power and storage to meet their requirements.

Today, we learn how to deploy a React app (frontend with NodeJS backend component) onto Oracle Cloud’s Oracle Container Engine for Kubernetes (OKE).

1. Create the frontend and backend

Create a React frontend app and its corresponding NodeJS backend app with their Dockerfiles. Like in this example (you won’t need the Docker Compose step)

Your directory should now look somewhat like this:

📦myApp  
┣ 📦frontend  
┃┣ 📜Dockerfile    
┃┣ 📂src  
┃┗...  
┣ 📦backend  
┃┣ 📜Dockerfile    
┃┣ 📜index.js  
┃┗...

(Shout out to file-tree-generator for these icon suggestions)

2. Build and push Docker images

In the root directory of the project i.e. myApp/, build and push the Docker images of the frontend and backend to the Oracle Cloud Container Registry.

You will need to docker login to the Registry first. See here for instructions

# build and push frontend Docker image
docker build -t iad.ocir.io/idrriaq7ifow/my-repo-name/my-app-1-frontend:latest frontend
docker push iad.ocir.io/idrriaq7ifow/my-repo-name/my-app-1-frontend:latest

# build and push backend Docker image
docker build -t iad.ocir.io/idrriaq7ifow/my-repo-name/my-app-1-backend:latest backend
docker push iad.ocir.io/idrriaq7ifow/my-repo-name/my-app-1-backend:latest

where

• iad.ocir.io is the Oracle Cloud Container Registry endpoint for the Ashburn region found in this list
• idrriaq7ifow is the namespace of your Container Registry found in Oracle Cloud console > Container Registry
• my-repo-name/my-app-1-frontend is the name of the image of the frontend app of your choice, same goes for the backend

3. Create an OKE cluster and access the cluster locally

Create an OKE cluster in Oracle Cloud (see Oracle Container Engine for Kubernetes) and access the cluster using kubectl locally (see Accessing a Cluster Using Kubectl)

Ensure you have access by typing kubectl get nodes in your Terminal and ensuring you see all the remote nodes on OKE.

(Okay I agree, this step could be explained better)

4. Create the Docker credentials on kubectl

Now that you have local access in your Terminal to OKE, and you were previously able to docker login and push to the Container Registry, we need to allow kubectl to docker login on your behalf.

To do that we run this command:

kubectl create secret docker-registry regcred --docker-server=iad.ocir.io --docker-username='idrriaq7ifow/fdurrani@mythics.com' --docker-password='JqPpB9%F^GMrkuKSUT6R' --docker-email='fdurrani@mythics.com'

Of course, change the credentials to your own. Now we have a Kubernetes secret called regcred. See Pushing Docker image to Oracle Container Registry for more information on the input values.

5. Create the Kubernetes deployment.yaml file

In the root directory of the project i.e. myApp/, create a Kubernetes deployment.yaml file:

# deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: myApp
spec:
  replicas: 3
  selector:
    matchLabels:
      app: myApp
  template:
    metadata:
      labels:
        app: myApp
    spec:
      containers:
        - name: frontend
          image: iad.ocir.io/idrriaq7ifow/my-repo-name/my-app-1-frontend:latest
          ports:
            - containerPort: 3000
        - name: backend
          image: iad.ocir.io/idrriaq7ifow/my-repo-name/my-app-1-backend:latest
          ports:
            - containerPort: 4000
          stdin: true
          tty: true
      imagePullSecrets:
        - name: regcred
      restartPolicy: Always
---
apiVersion: v1
kind: Service
metadata:
  name: myApp-lb
spec:
  selector:
    app: myApp
  type: LoadBalancer
  ports:
    - name: frontend
      port: 80
      targetPort: 3000
      protocol: TCP
    - name: backend
      port: 4000
      targetPort: 4000
      protocol: TCP

Here, we are requesting OKE to create 3 replicas of the app deployment set (frontend and backend), and one load balancer on Oracle Cloud so we can access the app from the Internet.

6. Launch the deployment file

Launch the Kubernetes deployment (this will take some time):

kubectl apply -f deployment.yaml

Verify the deployments are going fine by checking:

kubectl get all

7. Verify

Go to your Oracle Cloud > Networking > Load Balancers to verify deployment is okay and to get the IP address of the load balancer, which you can visit to see your live React app deployment:

Alternatively, kubectl get services can give you the deployed IP address under EXTERNAL-IP

8. Optional: Update deployment information

To update your deployment details, e.g., changing image name, number of replicas, re-run:

kubectl apply -f deployment.yaml

and this applies the new changes to the affected services/deployments if there are any. If no changes are detected, nothing happens

Safe harbor statement
The information provided on this channel/article/story is solely intended for informational purposes and cannot be used as a part of any contractual agreement. The content does not guarantee the delivery of any material, code, or functionality, and should not be the sole basis for making purchasing decisions. The postings on this site are my own and do not necessarily reflect the views or work of Oracle or Mythics, LLC.

This work is licensed under a Creative Commons Attribution 4.0 International License.