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 a Microsoft Solutions Partner, AWS Advanced Tier Training Partner, and Google Cloud Platform Partner, CloudThat has empowered over 850,000 professionals through 600+ cloud certifications winning global recognition for its training excellence including 20 MCT Trainers in Microsoft’s Global Top 100 and an impressive 12 awards in the last 8 years. CloudThat specializes in Cloud Migration, Data Platforms, DevOps, IoT, and cutting-edge technologies like Gen AI & AI/ML. It has delivered over 500 consulting projects for 250+ 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