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.
Top comments (0)