Task 1: Three-Tier Architecture:
Overview:
CRUD web application, Having Frontend, Backend, and Database layers, each hosted on
separate EC2 instances.
Communication Flow:
● Frontend React app served by Nginx sends API requests to the backend via Nginx
proxy, Axios helps to connect frontend and backend.
● Nginx proxies requests from `/api/*` to the [Link] backend
(/home/ubuntu/crud-app-frontend/src/services/[Link]).
● [Link] backend processes requests and interacts with MongoDB for data
operations.
● Responses are sent back to the frontend for user display.
Project Architecture Overview
Three-tier architecture:
1. Frontend: React application(JavaScript Library) built with Vite.
2. Backend: [Link] using [Link].
3. Database: MongoDB for data storage.
Instances: 3 ubuntu EC2 Instances.
Subnet: 1 Public hosts Web Instance and 2 Private hosts Backend and Database instance in
each Subnet.
CIDR: Public Subnet (Web): IPV4 [Link]/20 - 4094 IP Address, Private Subnet 1 (App):
[Link]/20, Private Subnet 2 (Database): [Link]/20. ([Link] - [Link])
Internet Gateway: Attached With VPC.
NAT Gateway: Attached with 2 Private Subnet Route Table.
Security Group:
Frontend:
Port: 80, 22
Source: [Link]/0
Backend:
Port: 5000, 22
Source: Frontend SG
Port: 5000
Source: Database
Database:
Port: 27017, 22
Source: Backend SG
Port: 27017, 22
Source: Frontend SG
Frontend: React with Vite
Repository: [Link]
React Vite refers to using the Vite build tool with the React library. Vite is a modern build tool
designed for speed and efficiency, making it a popular choice for React development.
Key Components:
● src/: Contains React components and services (src/services/[Link]).
○ Components: Implement the user interface for CRUD operations.
○ Services: [Link] -> Handle API calls to the backend.
● dist/: Static assets like [Link].
● [Link]: Lists project dependencies and scripts.
● [Link]: Configuration for Vite.
Vite is a build tool that focuses on optimizing the development experience, while npm (Node
Package Manager) is a package manager used to install and manage dependencies for
Crud Application.
[Link] is a JavaScript runtime environment that allows developers to run JavaScript code
on the server-side.
Express is a framework for [Link], providing tools for building web applications and
[Link] is a JavaScript library for building user interfaces.
React is used to build the front-end of the application, handling the user interface and user
interactions. [Link] and Express are used to build the back-end, managing the server,
database interactions, and API endpoints.
Build Process:
● Development: npm run dev starts the Vite development server with hot module
replacement.
● Production: npm run build generates static files in the dist/ directory.
Deployment:
● Copied the file from dist/ to var/www/html for Nginx to host
Steps:
● sudo apt update
● sudo apt install nodejs npm nginx -y
● sudo systemctl start nginx
● sudo systemctl enable nginx #start during every boot
● Clone the git repository - git clone git_url
● cd crud-app-frontend
● vi [Link]
● Remove the axios duplicate
● npm install - install the dependencies
● npm run build
● sudo cp -r dist/* /var/www/html/
● sudo vi /etc/nginx/sites-available/default
Default file:
server {
listen 80;
server_name IP; # Front_end_EC2_Public_IP
root /var/www/html;
index [Link];
location / {
try_files $uri $uri/ /[Link];
}
location /api/ {
proxy_pass [Link] #Backend_Private_IP_URL
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
● Created /api/ so we call backend server in [Link] as /api/ like const API_BASE_URL =
'/api';
● A request to [Link] will be forwarded to
[Link] (note the /api/is stripped because trailing slash is in
proxy_pass)
● Path: /home/ubuntu/crud-app-frontend/src/services/[Link]
● sudo systemctl restart nginx
● SSH agent forward for to connect with backend server from frontend server as we
have our backend server in private subnet with only Private IP
● ssh-add -K [Link] (It add the identity in agent)
● ssh-add -l (private key is added)
● ssh -A ubuntu@Backend_Private_IP
Backend: [Link] with Express
Repository: git_url
[Link] is a runtime environment that allows to execute JavaScript code outside of a web
browser.
[Link] is a minimal and flexible [Link] web application framework. It's designed to
simplify building web applications by providing features like routing, middleware, and HTTP
utilities. Essentially, it sits on top of [Link]'s web server functionality to make it easier to
handle requests, define routes, and manage application logic.
Key Components:
● [Link]: Entry point of the application.
● [Link]: Lists project dependencies and scripts.
● .env: Stores environment variables like MongoDB connection URI.
API:
● Defined multiple Routes in the [Link] like [Link], [Link], [Link], [Link].
Environment Variables:
● Defined in .env for Backend Port, Frontend URL, Database URL.
Deployment:
● The backend server listens on a specified port (e.g., 5000) and handles API
requests.
Backend repo (crud-app-backend) is a [Link] + Express application. Specifically:
● [Link] contains Express server logic.
● Install dependencies using npm install.
That requires:
● The [Link] runtime and npm package manager
CORS Configuration
CORS stands for Cross-Origin Resource Sharing. It’s a security feature built into web
browsers that controls how web pages from one origin (domain) can interact with
resources from another origin.
The most common reason is CORS (Cross-Origin Resource Sharing).
● The backend needs to know which frontend domain is allowed to access its
resources (like APIs).
● If you don't specify this, the browser may block requests from your frontend due to
cross-origin policy.
Steps:
● sudo apt update
● sudo apt install nodejs npm -y
● git clone git_url
● cd crud-app-backend
● npm install
● Configure .env file by changing the Backend Port no, Mongo_DB URI, Front End
URL
.env
PORT=5000
MONGO_URL=mongodb://admin:admin123@IP
FRONTEND_URL=[Link]
● sudo npm install -g pm2
● pm2 start [Link]
● pm2 startup
● pm2 save
● pm2 delete [Link]
Database: MongoDB
● Stores user data.
● Connected to the backend via Mongoose using the MONGO_URI specified in .env.
● Mongoose is an Object Data Modeling (ODM) library for MongoDB, a popular
NoSQL database. It acts as an intermediary layer, simplifying interaction between
your [Link] application and MongoDB by providing a schema-based approach to
data modeling and management.
Integration Flow
1. User Interaction: Users interact with the React frontend.
2. API Requests: Frontend sends HTTP requests to the backend API.
3. Data Processing: Backend processes requests and interacts with MongoDB.
4. Response: Backend sends responses back to the frontend for user display.
Steps:
● sudo apt update
● sudo apt install [Link]
● sudo systemctl start docker
● sudo systemctl enable docker
● sudo mkdir -p /data/mongodb
● docker run -d --name mongodb -p 27017:27017 -v /data/mongodb:/data/db -e
MONGO_INITDB_ROOT_USERNAME=admin -e
MONGO_INITDB_ROOT_PASSWORD=password mongo
● sudo docker exec -it cont_id bash
● exit
Note:
To test the connectivity between the frontend, backend and Database we can use curl or
telnet
