How to Build and Deploy a React.js Application with Node.js Backend to Amazon EKS Cluster
A tutorial on building and deploying a React.js Application with Node.js Backend to Amazon EKS Cluster.
In this tutorial, you will learn about how to build and deploy a React.js application with Node.js backend to Amazon EKS Cluster. You will deploy a two-container application that has a frontend connected to the backend. The frontend application container will send API requests to the backend and fetch blog titles.
Amazon Elastic Kubernetes Service (Amazon EKS) is a cloud-based Kubernetes service. It allows Amazon Web Services (AWS) users to create and run Kubernetes clusters on the AWS cloud. It provides a fully dedicated service for automatically deploying, managing, and scaling Kubernetes application containers. You will containerize the two applications using Docker before deploying them to the Amazon EKS cluster.
Prerequisites
Before you get started with this tutorial, your must:
- Understand Docker. Before you start ensure you are familiar with Docker containers and have Docker Desktop installed on your computer. You can read this post for you to get started with Docker.
- Understand Kubernetes deployment. This is an added advantage for you to easily get started with this tutorial. You can read this post for you to get started with Kubernetes deployment.
- Have Kubectl installed on your computer. You will use this tool to communicate with the Amazon EKS cluster. You will also apply Kubectl commands for deploying the multi-container application to the Amazon EKS Cluster. You can read this post for you to get started with Kubectl deployment.
- Have some basic Knowdegle of React.js and Node.js. You will use a React.js and Node.js application to explain the concept of multi-container application deployment to the Amazon EKs Cluster.
- Install VS Code code editor. Most developers prefer to use VS Code as their code editor.
How to Build and Deploy a React.js Application with Node.js Backend to Amazon EKS Cluster
To deploy the application to Amazon EKs Cluster, we will follow these steps:
- Download the Project files for the Application
- Run the Backend Node.js Application Locally
- Run the frontend React.js application locally
- Dockerize the backend Node.js application
- Dockerize the frontend React.js application
- Run the backend Node.js application as a Docker Container
- Run the frontend React.js application as a Docker Container
- Push the backend Docker Image to Docker Hub
- Push the frontend Docker Image to Docker Hub
- Create the Amazon EKS Cluster
- Write Kubernetes Deployment and Service YAML files
- Deploy the backend Node.js application
- Accessing the backend Node.js application container
- Deploy the frontend React.js application
- Accessing the frontend React.js application container
Step 1: Download the Project files for the Application
To download the project files for the application use this link. It will download all the Node.js backend (Node.js) and frontend (React.js) files:
Step 2: Run the Backend Node.js Application Locally
To run the backend Node.js application locally, run the following commands in your open terminal to initialize the Node.js application:
cd backend
npm i
After the application initialization, now run this command to start the application:
npm run dev
The Node.js application will then be launched on your default web browser as shown:
Step 3: Run the Frontend React.js Application Locally
To run the frontend React.js application locally, run the following commands in your open terminal to initialize the React.js application:
cd frontend
npm i
Now run this command to start the application:
npm start
The React.js application will then be launched on your default web browser as shown:
Step 4: Dockerize the Backend Node.js Application
To Dockerize the backend Node.js application, create a Dockerfile and add the following Docker commands:
# Base Image for the Backend Node.js Application Docker image
FROM node:18-alpine
# Nodememon for monitoring and watching the Backend Node.js Application container
RUN npm install -g nodemon
# The working directory (folder) for the Backend Node.js Application container
WORKDIR /app
# Copying the dependencies files for the Backend Node.js Application folder
COPY package.json .
#Installing all the dependencies/framework/libraries for the Backend Node.js Application
RUN npm install
#Copying all the Backend Node.js Application files to the container working directory
COPY . .
#Backend Node.js Application container will run on this port
EXPOSE 4000
#Command to start the Backend Node.js Application Docker container
CMD ["npm", "run", "dev"]
To build the Docker image for the Backend Node.js application, run this command:
docker build -t bravinwasike/backend .
Step 5: Dockerize the Frontend React.js Application
To Dockerize the frontend React.js application, create a Dockerfile and add the following Docker commands:
# Base Image for the Frontend React.js Application Docker image
FROM node:18-alpine
# The working directory (folder) for the Frontend React.js Application container
WORKDIR /app
# Copying the dependencies files for the Frontend React.js Application folder
COPY package.json .
#Installing all the dependencies/framework/libraries for the Frontend React.js Application
RUN npm install
#Copying all the Frontend React.js Application files to the container working directory
COPY . .
#Frontend React.js Application container will run on this port
EXPOSE 3000
#Command to start the Frontend React.js Application Docker container
CMD ["npm", "start"]
To build the Docker image for the Frontend React.js application, run this command:
docker build -t bravinwasike/frontend .
Step 6: Run the Backend Node.js Application as a Docker Container
To run the backend Node.js application as a Docker Container, run this command in your open terminal:
docker run -p 4000:4000 bravinwasike/backend
It will launch the Backend Node.js Application as a Docker Container:
Step 7: Run the Frontend React.js Application as a Docker Container
To run the Frontend React.js application as a Docker Container, run this command in your open terminal:
docker run -p 3000:3000 bravinwasike/frontend
It will launch the Frontend React.js Application as a Docker Container:
Step 8: Push the Backend Docker Image to Docker Hub
To push the backend Docker Image to Docker Hub, run these commands in your open terminal:
docker login
docker push bravinwasike/backend
Step 9: Push the Frontend Docker Image to Docker Hub
To push the frontend Docker Image to Docker Hub, run these commands in your open terminal:
docker push bravinwasike/frontend
Step 10: Create the Amazon EKS Cluster
To create the Amazon EKS cluster, follow these steps:
- Step One: Go to the AWS site and sign up for the [Amazon Web Service free tier account]
- Step Two: Download and install the AWS CLI Tool from the official site. You will use this tool to configure your Amazon Web Service free tier account. You will use this tool to log in and authenticate to your Amazon Web Service free tier account from your terminal:
To configure the Amazon Web Service free tier account, run this command:
aws configure
You will then be prompted to input/provide the following AWS account details:
- “Access key ID”,
- “Secret access key”
- “Output format”
- “AWS Region”
You can get these account details in your Amazon Web Service free tier account portal. You can read this post that gives a detailed step-by-step of how to get these account details.
- Step Three: Download and Install the Eksctl tool.
This is the official AWS tool for creating AWS EKS Clusters. You can download this tool on your specific operating system from this [Eksctl official site. - Step Four: Create the Amazon EKS Cluster using Eksctl
To create the Amazon EKS Cluster using Eksctl, run this command:
eksctl create cluster - name sample-cluster
The command will create a basic EKS Cluster With all the default AWS cloud resources:
Step 11: Write Kubernetes Deployment and Service YAML files
You will need to write the Kubernetes Deployment and Service YAML files for each application. For both the backend Node.js application and frontend React.js application. Kubectl will use these YAML files to create the application pods and Kubernetes Loadbalancer. You will write four YAML files. Let’s start by writing the Kubernetes Deployment YAML file for the backend Node.js application.
Writing the Kubernetes Deployment YAML file for the Backend Node.js Application
You will create a new Kubernetes Deployment YAML file named `backend-deployment.yaml`. In this file add the following YAML code and configurations:
apiVersion: apps/v1
kind: Deployment
metadata:
name: backend-deployment
spec:
replicas: 2
selector:
matchLabels:
app: backend
template:
metadata:
labels:
app: backend
spec:
containers:
- name: backend
image: bravinwasike/backend
resources:
limits:
memory: "256Mi"
cpu: "500m"
ports:
- containerPort: 4000
This file will create two pods for the Backend Node.js Application. It will create a Kubernetes Deployment named “backend-deployment”. It will use the `bravinwasike/backend` Docker image to create the Kubernetes application container.
Writing the Kubernetes Service YAML file for the Backend Node.js Application
You will create a new Kubernetes Service YAML file named `backend-service.yaml`. In this file add the following YAML code and configurations:
apiVersion: v1
kind: Service
metadata:
name: backend-service
spec:
type: LoadBalancer
selector:
app: backend
ports:
- protocol: TCP
port: 80
targetPort: 4000
This file will create a Kubernetes LoadBalancer service named “backend-service”. You will use this Kubernetes LoadBalancer service to access the backend Node.js Application.
Next, let’s write the Kubernetes Deployment and Service YAML file for the frontend React.js application.
Writing the Kubernetes Deployment YAML file for the frontend React.js Application
You will create a new Kubernetes Deployment YAML file named `frontend-deployment.yaml`. In this file add the following YAML code and configurations:
apiVersion: apps/v1
kind: Deployment
metadata:
name: frontend-deployment
spec:
replicas: 2
selector:
matchLabels:
app: frontend
template:
metadata:
labels:
app: frontend
spec:
containers:
- name: frontend
image: bravinwasike/frontend
resources:
limits:
memory: "256Mi"
cpu: "500m"
ports:
- containerPort: 3000
This file will create two pods for the frontend React.js application. It will create a Kubernetes Deployment named “frontend-deployment”. It will use the `bravinwasike/frontend` Docker image to create the Kubernetes application container.
Writing the Kubernetes Service YAML file for the Frontend React.js Application
You will create a new Kubernetes Service YAML file named `frontend-service.yaml`. In this file add the following YAML configurations:
apiVersion: v1
kind: Service
metadata:
name: frontend-service
spec:
type: LoadBalancer
selector:
app: frontend
ports:
- protocol: TCP
port: 80
targetPort: 3000
This file will create a Kubernetes LoadBalancer service named “frontend-service”. You will use this Kubernetes LoadBalancer service to access the frontend React.js Application.
Step 12: Deploy the Backend Node.js Application
To deploy the backend Node.js application, run these commands:
kubectl apply -f backend-deployment.yaml
kubectl apply -f backend-service.yaml
This command will create the pods and Kubernetes LoadBalancer Service in the Amazon EKS cluster. It will also deploy the Node.js container application. Now you have one container running in your Amazon EKS cluster.
Step 13: Accessing the Backend Node.js Application Container
To access the backend Node.js Application Container, run this command to get the external IP address:
kubectl get service
Output:
Copy the public IP address and paste it on your browser.
Step 12: Deploy the Frontend React.js Application
To deploy the frontend React.js application, run these commands:
kubectl apply -f frontend-deployment.yaml
kubectl apply -f frontend-service.yaml
This command will create the pods and Kubernetes LoadBalancer Service in the Amazon EKS cluster. It will also deploy the React.js container application.
Step 13: Accessing the frontend React.js Application Container
To access the frontend React.js Application Container, run this command to get the external IP address:
kubectl get service
Output:
Copy the external IP address and paste it on your browser:
Now you have two containers running in your Amazon EKS cluster. Hence, you have achieved multi-container application deployment to Amazon EKS Cluster.
Conclusion
In this tutorial, you have learned about how to build and deploy a React.js application with Node.js backend to Amazon EKS Cluster. You downloaded the project files for the application before running the two applications locally.
You can easily follow these steps and dockerize the application. We used the Ekctl tool to create the Amazon EKS cluster. You can get the application and Kubernetes YAML files on my GitHub account.
If you like this tutorial let’s connect on Twitter. Thanks for Reading and Happy Learning.