DEV Community

Cover image for How to Build and Deploy a React.js Application with Node.js Backend to Amazon EKS Cluster
Bravin Wasike
Bravin Wasike

Posted on • Updated on • Originally published at sweetcode.io

How to Build and Deploy a React.js Application with Node.js Backend to Amazon EKS Cluster

#kubernetes #aws #devops #docker

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. You can read this post for you to get started with React.js and Node. js

  • Install VS Code code editor. Most developers prefer to use VS Code as their code editor.

Multi-container Application Deployment to Amazon EKs Cluster

To deploy the multi-container application to Amazon EKs Cluster, we will follow these steps:

  1. Download the Project files for the Application
  2. Run the Backend Node.js Application Locally
  3. Run the frontend React.js application locally
  4. Dockerize the backend Node.js application
  5. Dockerize the frontend React.js application
  6. Run the backend Node.js application as a Docker Container
  7. Run the frontend React.js application as a Docker Container
  8. Push the backend Docker Image to Docker Hub
  9. Push the frontend Docker Image to Docker Hub
  10. Create the Amazon EKS Cluster
  11. Write Kubernetes Deployment and Service YAML files
  12. Deploy the backend Node.js application
  13. Accessing the backend Node.js application container
  14. Deploy the frontend React.js application
  15. 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:

Image description

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
Enter fullscreen mode Exit fullscreen mode

After the application initialization, now run this command to start the application:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Image description

The Node.js application will then be launched on your default web browser as shown:

Image description

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
Enter fullscreen mode Exit fullscreen mode

Now run this command to start the application:

npm start
Enter fullscreen mode Exit fullscreen mode

Image description

The React.js application will then be launched on your default web browser as shown:

Image description

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"]
Enter fullscreen mode Exit fullscreen mode

To build the Docker image for the Backend Node.js application, run this command:

docker build -t bravinwasike/backend .
Enter fullscreen mode Exit fullscreen mode

Image description

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"]
Enter fullscreen mode Exit fullscreen mode

To build the Docker image for the Frontend React.js application, run this command:

docker build -t bravinwasike/frontend .
Enter fullscreen mode Exit fullscreen mode

Image description

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
Enter fullscreen mode Exit fullscreen mode

It will launch the Backend Node.js Application as a Docker Container:

Image description

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
Enter fullscreen mode Exit fullscreen mode

It will launch the Frontend React.js Application as a Docker Container:

Image description

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 Sweet Code 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
Enter fullscreen mode Exit fullscreen mode

The command will create a basic EKS Cluster With all the default AWS cloud resources:

Image description

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 public IP address:

kubectl get service
Enter fullscreen mode Exit fullscreen mode

Output:

Image description

Copy the public IP address and paste it on your browser:

Image description

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
Enter fullscreen mode Exit fullscreen mode

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 public IP address:

kubectl get service
Enter fullscreen mode Exit fullscreen mode

Output:

Image description

Copy the public IP address and paste it on your browser:

Image description

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.

Top comments (0)

Read next

estebanpiero profile image

Best Practices for Monitoring Your Amazon VPC

Esteban -

crawomg profile image

Why Docker is Losing Its Edge in Recent Years

crawomg -

ymwjbxxq profile image

Parameter Management at Scale: How Multi-Region Configurations Saved My Application

Daniele Frasca -

devops_den profile image

DevOps Architect: The Backbone of Modern Software Development

Devops Den -