Containerization and orchestration of full-stack applications are becoming essential skills for developers and DevOps engineers. This step-by-step guide will take you through the process of creating a full-stack application, containerizing it using Docker, and deploying it to a Kubernetes cluster.
Become a Certified DevOps Professional, without leaving you job. Attend 8+ DevOps certification Training at less than the price of 2!
Experienced Authorized Instructor led Training
Live Hands-on Labs
Subscribe now
1. Prerequisites
Before you begin, make sure you have the following tools installed:
Docker : For containerizing the application.js and npm : For installing dependencies and building the frontend and backend applications.Minikube : A local Kubernetes cluster for testing Kubernetes deployments.You can install Node.js and npm from the js official website . To verify, run the following commands:
2. Project Structure
The project will have the following directory structure:
Explanation of the Project Structure:
backend/ : Contains the backend server code (Node.js).frontend/ : Contains the frontend code (React.js).k8s/ : Contains the Kubernetes configuration files for deploying both the backend and frontend.
3. Creating the Backend
Create a simple Node.js server in the backend/ folder:
Step 1: Create backend/package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"name" : "backend" ,
"version" : "1.0.0" ,
"main" : "index.js" ,
"scripts" : {
"start" : "node index.js"
} ,
"dependencies" : {
"express" : "^4.17.1"
}
}
Step 2: Create backend/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const express = require ( 'express' ) ;
const app = express ( ) ;
const PORT = 5000 ;
app . get ( '/' , ( req , res ) =& gt ; {
res . send ( 'Hello from the Backend!' ) ;
} ) ;
app . listen ( PORT , ( ) =& gt ; {
console . log ( ` Server is running on port $ { PORT } ` ) ;
} ) ;
Step 3: Install Dependencies Navigate to the backend/ directory and run:
4. Creating the Frontend
Create a simple React.js application in the frontend/ folder:
Step 1: Create frontend/src/App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react' ;
function App ( ) {
return (
& lt ; div & gt ;
& lt ; h1 & gt ; Hello , React ! & lt ; / h1 & gt ;
& lt ; p & gt ; This is a basic React application running in a Docker container . & lt ; / p & gt ;
& lt ; / div & gt ;
) ;
}
export default App ;
Navigate to the frontend/ directory and run
Step 2: Create frontend/src/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import App from './App' ;
const root = ReactDOM . createRoot ( document . getElementById ( 'root' ) ) ;
root . render (
& lt ; React . StrictMode & gt ;
& lt ; App / & gt ;
& lt ; / React . StrictMode & gt ;
) ;
Step 3: Create frontend/public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
& lt ; ! DOCTYPE html & gt ;
& lt ; html lang = "en" & gt ;
& lt ; head & gt ;
& lt ; meta charset = "UTF-8" & gt ;
& lt ; meta name = "viewport" content = "width=device-width, initial-scale=1.0" & gt ;
& lt ; title & gt ; My React App & lt ; / title & gt ;
& lt ; / head & gt ;
& lt ; body & gt ;
& lt ; div id = "root" & gt ; & lt ; / div & gt ;
& lt ; / body & gt ;
& lt ; / html & gt ;
Step 4: Create frontend/package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
{
"name" : "my-react-app" ,
"version" : "1.0.0" ,
"private" : true ,
"dependencies" : {
"react" : "^18.2.0" ,
"react-dom" : "^18.2.0" ,
"react-scripts" : "5.0.1"
} ,
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test" ,
"eject" : "react-scripts eject"
} ,
"eslintConfig" : {
"extends" : [
"react-app" ,
"react-app/jest"
]
} ,
"browserslist" : {
"production" : [
">0.2%" ,
"not dead" ,
"not op_mini all"
] ,
"development" : [
"last 1 chrome version" ,
"last 1 firefox version" ,
"last 1 safari version"
]
}
}
Step 5: Install Dependencies Navigate to the frontend/ directory and run:
5. Writing Dockerfiles for Backend and Frontend
Create Dockerfile for each of the backend and frontend services.
Backend Dockerfile ( backend/Dockerfile )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# Use the official Node.js image as a base
FROM node : 14
# Set the working directory inside the container
WORKDIR / app
# Copy package.json and install dependencies
COPY package . json . /
RUN npm install
# Copy the rest of the application code
COPY . .
# Expose the port the backend listens on
EXPOSE 5000
# Start the backend server
CMD [ "node" , "index.js" ]
Frontend Dockerfile (frontend/Dockerfile)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Stage 1: Build Stage
FROM node : 14 - alpine AS builder
WORKDIR / app
COPY package . json . /
RUN npm install
COPY . .
RUN npm run build
# Stage 2: Serve with Nginx
FROM nginx : alpine
COPY -- from = builder / app / build / usr / share / nginx / html
EXPOSE 80
6. Building and Running the Application Locally
Step 1: Build Docker Images Navigate to the root of the project and run the following commands:
docker build - t & lt ; dockerhub - username & gt ; backend : latest . / backend
docker build - t & lt ; dockerhub - username & gt ; frontend : latest . / frontend
Step 2: Push the images to DockerHub Log in to DockerHub.
In the browser authenticate using dockerhub credentials.
Push the images to DockerHub.
docker push & lt ; dockerhub - username & gt ; backend : latest
docker push & lt ; dockerhub - username & gt ; frontend : latest
7. Creating Kubernetes Deployment and Service YAMLs
Create Kubernetes configuration files for both backend and frontend services.
Backend Deployment ( k8s/backend-deployment.yaml )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 : & lt ; dockerhub - username & gt ; backend : latest
ports :
- containerPort : 5000
Backend Service (k8s/backend-service.yaml)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
apiVersion : v1
kind : Service
metadata :
name : backend - service
spec :
selector :
app : backend
ports :
- protocol : TCP
port : 5000
targetPort : 5000
type : ClusterIP
Frontend Deployment (k8s/frontend-deployment.yaml)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 : & lt ; dockerhub - username & gt ; frontend : latest
ports :
- containerPort : 80
Frontend Service (k8s/frontend-service.yaml)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
apiVersion : v1
kind : Service
metadata :
name : frontend - service
spec :
selector :
app : frontend
ports :
- protocol : TCP
port : 80
targetPort : 80
type : ClusterIP
8. Deploying to Kubernetes
Step 1: Start Minikube Step 2: Deploy the Application to Kubernetes Apply the Kubernetes configuration files:
kubectl apply - f k8s / backend - deployment . yaml
kubectl apply - f k8s / backend - service . yaml
kubectl apply - f k8s / frontend - deployment . yaml
kubectl apply - f k8s / frontend - service . yaml
Step 3: Access the Application Get the Minikube service URL:
minikube service frontend - service
Conclusion
By following these steps, you have successfully created a full-stack application, containerized it using Docker, and deployed it to a Kubernetes cluster. You’ve also learned various optimization techniques for Docker images. With these skills, you can now deploy complex applications more efficiently using Docker and Kubernetes.
Attend 8+ DevOps and Kubernetes Certification Trainings and become a Certified DevOps expert
Experienced Authorized Instructor led Training
Live Hands-on Labs
Subscribe now
About CloudThat
CloudThat is an award-winning company and the first in India to offer
cloud training and
consulting services worldwide. As an AWS Premier Tier Services Partner, AWS Advanced Training Partner, Microsoft Solutions Partner, and Google Cloud Platform Partner, CloudThat has empowered over 1.1 million professionals through 1000+ cloud certifications, winning global recognition for its training excellence, including 20 MCT Trainers in Microsoft’s Global Top 100 and an impressive 14 awards in the last 9 years. CloudThat specializes in Cloud Migration, Data Platforms, DevOps, Security, IoT, and advanced technologies like Gen AI & AI/ML. It has delivered over 750 consulting projects for 850+ organizations in 30+ countries as it continues to empower professionals and enterprises to thrive in the digital-first world.
Login
November 7, 2024
PREV
Comments