0% found this document useful (0 votes)
3 views7 pages

Nginx Projects Steps Document

The document provides a comprehensive guide on setting up Nginx on Ubuntu, including serving static websites, creating custom error pages, and configuring Nginx as a reverse proxy and load balancer. It includes step-by-step instructions for each project, along with necessary commands and configurations. Additionally, it offers links to project repositories for further reference.

Uploaded by

sethuaws
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views7 pages

Nginx Projects Steps Document

The document provides a comprehensive guide on setting up Nginx on Ubuntu, including serving static websites, creating custom error pages, and configuring Nginx as a reverse proxy and load balancer. It includes step-by-step instructions for each project, along with necessary commands and configurations. Additionally, it offers links to project repositories for further reference.

Uploaded by

sethuaws
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Click here for DevSecOps Course

Nginx Projects
Install Nginx On Ubuntu
sudo apt update

sudo apt install nginx -y

Project-1 | Serving Static Website Using Nginx


Project Repo: [Link]

Step 1: Place Files in Web Root

By default, Ubuntu NGINX serves from:

/var/www/html

You can replace or create your own site directory:

sudo mkdir -p /var/www/static-site

sudo cp -r * /var/www/static-site

Ensure permissions:

sudo chown -R www-data:www-data /var/www/static-site

Step 2: Create a Virtual Host File

sudo vi /etc/nginx/sites-available/static-site

server {
listen 80;
server_name [Link];

root /var/www/static-site;
index [Link];
location / {
try_files $uri $uri/ =404;
}
}
Breakdown:

Directive Role
listen 80 Binds to port 80 (HTTP)
server_name Domains this block will respond to
root Document root directory
index Default file served when / is requested
try_files Attempts to resolve file path, else returns 404

Step 3: Enable Site and Reload

sudo ln -s /etc/nginx/sites-available/static-site /etc/nginx/sites-enabled/

sudo nginx -t

sudo systemctl reload nginx

Visit [Link] (after DNS setup) — the static site is live!

2. Creating Custom Error Pages (404, 500)


Default Behavior

NGINX uses built-in generic messages like:

404 Not Found

500 Internal Server Error

These are plain and unfriendly.

Creating Custom Pages

1. Create error pages:

/var/www/mywebsite/
├── [Link]
├── [Link]
2. Update the server block:

server {
...
error_page 404 /[Link];
error_page 500 502 503 504 /[Link];

location = /[Link] {
root /var/www/mywebsite;
internal;
}

location = /[Link] {
root /var/www/mywebsite;
internal;
}
}
Explanation:

• error_page: Maps HTTP status to custom page.

• location =: Exact match.

• internal: These URLs can only be shown by NGINX errors — not accessed directly by
users.
Project-2 | Nginx As a Reverse Proxy
Project Repo: [Link]

git clone [Link]

• sudo mkdir -p /var/www/frontend

• sudo cp -r frontend/* /var/www/frontend/

• sudo chown -R www-data:www-data /var/www/frontend

sudo vi /etc/nginx/sites-available/nginx-node-proxy

server {
listen 80;
server_name [Link]; # Use _ or your IP if no domain yet

root /var/www/frontend;
index [Link];

# Serve static files


location / {
try_files $uri $uri/ =404;
}

# Reverse proxy to [Link] API


location /api/ {
proxy_pass [Link]
proxy_http_version 1.1;

proxy_set_header Host $host;


proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# WebSocket support
location /[Link]/ {
proxy_pass [Link]
proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;


proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
}
Goto Backend Folder --> Install Dependencies & start the Backend

cd /home/ubuntu/nginx-node-proxy/backend
npm init -y
npm install express cors [Link]
node [Link]

Create Symbolic Link to Sites Enabled & Restart Nginx


sudo ln -s /etc/nginx/sites-available/nginx-node-proxy /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Access on Your Domain like [Link]


Project-3 | Nginx As Load Balancer
Project Repo: [Link]

git clone [Link]

• sudo mkdir -p /var/www/frontend


• sudo cp -r frontend/* /var/www/frontend/
• sudo chown -R www-data:www-data /var/www/frontend

sudo vi /etc/nginx/sites-available/nginx-loadbalancer

upstream backend_apis {
least_conn;
server [Link]:3001;
server [Link]:3002;
}

server {
listen 80;
server_name [Link];

root /var/www/frontend;
index [Link];

# Serve frontend (HTML, CSS, JS, etc.)


location / {
try_files $uri $uri/ =404;
}

# Proxy API requests to backend [Link] apps


location /api/ {
proxy_pass [Link]
proxy_http_version 1.1;

proxy_set_header Host $host;


proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Goto Backend Folder --> Install Dependencies & start the Backend

cd /home/ubuntu/nginx-loadbalancer/

cd backend1 && npm init -y && npm install express #in new Page
cd backend2 && npm init -y && npm install express #in new Page

node [Link]

Create Symbolic Link to Sites Enabled & Restart Nginx

sudo ln -s /etc/nginx/sites-available/nginx-loadbalancer /etc/nginx/sites-enabled/


sudo nginx -t
sudo systemctl reload nginx

To simulate Traffic:
sudo apt install apache2-utils
ab -n 100 -c 10 [Link]

You might also like