Skip to content

Commit afd5efa

Browse files
ajay-dhangarajay-dhangar
committed
added docs for github actions doc
1 parent 5ad81d9 commit afd5efa

File tree

6 files changed

+596
-0
lines changed

6 files changed

+596
-0
lines changed

‎absolute-beginners/devops-beginner/nginx/_category_.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"label": "Nginx",
3+
"position": 11,
4+
"link": {
5+
"type": "generated-index",
6+
"title": "Nginx: High-Performance Automation",
7+
"description": "Nginx is a powerful web server and reverse proxy that can handle high traffic with ease. In this section, you'll learn how to set up Nginx to serve your applications, configure it for load balancing, and optimize its performance. Whether you're deploying a simple static site or a complex microservices architecture, mastering Nginx will ensure your CodeHarborHub projects are fast, reliable, and scalable. Discover how to create server blocks, manage SSL certificates, and implement caching strategies to take your web hosting skills to the next level."
8+
},
9+
"customProps": {
10+
"icon": "🌐",
11+
"status": "Production-Ready"
12+
}
13+
}

‎absolute-beginners/devops-beginner/nginx/architecture-and-install.mdx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
title: "Nginx Architecture & Installation"
3+
sidebar_label: "2. Architecture & Installation"
4+
sidebar_position: 2
5+
description: "Learn how Nginx handles thousands of connections using its Master-Worker architecture and how to install it on Linux and Docker. This chapter will give you a solid understanding of why Nginx is so fast and how to get it up and running for your MERN applications."
6+
tags: ["nginx", "architecture", "installation", "master-worker model", "event-driven", "performance"]
7+
keywords: ["nginx", "architecture", "installation", "master-worker model", "event-driven", "performance"]
8+
---
9+
10+
Before we start writing configuration files, it is important to understand why Nginx is so fast. Unlike traditional web servers that create a new "thread" or "process" for every user, Nginx uses an **Asynchronous, Event-Driven Architecture**.
11+
12+
:::info What does "Event-Driven" mean?
13+
In an event-driven model, Nginx can handle multiple requests at the same time without waiting for one to finish before starting the next. This allows it to serve thousands of users with minimal resources.
14+
:::
15+
16+
## The Master-Worker Model
17+
18+
Nginx operates using a hierarchical process model. It divides the labor to ensure that if one part of the system is busy, the rest of the server stays responsive.
19+
20+
### 1. The Master Process
21+
The "Manager" of the server. Its main jobs are:
22+
* Reading and validating the configuration files (`nginx.conf`).
23+
* Starting, stopping, and managing **Worker Processes**.
24+
* Performing privileged operations (like opening network ports).
25+
26+
### 2. The Worker Processes
27+
The "Employees" who do the heavy lifting.
28+
* They handle the actual network connections.
29+
* They read and write content to the disk.
30+
* They communicate with backend servers (like your Node.js API).
31+
* **Industrial Standard:** Usually, you run one worker process per CPU core on your server.
32+
33+
## The Event Loop (Why it Scales)
34+
35+
In a typical MERN app, a user might have a slow internet connection. A traditional server would "block" and wait for that user to finish. Nginx doesn't wait. It uses an **Event Loop**.
36+
37+
```mermaid
38+
graph TD
39+
A[New Connection] --> B{Event Loop}
40+
B -->|Request Data| C[Handle Request]
41+
B -->|Waiting for Client| D[Move to Next Task]
42+
C --> E[Send Response]
43+
D --> B
44+
```
45+
46+
This allows a single Nginx worker to handle **thousands** of concurrent users with very low RAM usage.
47+
48+
## Installation Guide
49+
50+
At **CodeHarborHub**, we recommend learning Nginx on a Linux environment (Ubuntu) or using Docker for consistent local development.
51+
52+
<Tabs>
53+
<TabItem value="ubuntu" label="Ubuntu / Debian" default>
54+
55+
**1. Update your package index:**
56+
57+
```bash
58+
sudo apt update
59+
```
60+
61+
**2. Install Nginx:**
62+
63+
```bash
64+
sudo apt install nginx -y
65+
```
66+
67+
**3. Verify Installation:**
68+
69+
```bash
70+
nginx -v
71+
# Output: nginx version: nginx/1.18.0 (Ubuntu)
72+
```
73+
74+
**4. Check Service Status:**
75+
76+
```bash
77+
sudo systemctl status nginx
78+
```
79+
80+
</TabItem>
81+
<TabItem value="docker" label="Docker (Recommended for Dev)">
82+
83+
If you don't want to install Nginx directly on your OS, use Docker. This is perfect for testing your **CodeHarborHub** projects locally.
84+
85+
**1. Pull and Run the Image:**
86+
87+
```bash
88+
docker run --name chh-nginx -p 80:80 -d nginx
89+
```
90+
91+
**2. Test it:**
92+
Open `http://localhost` in your browser. You should see the "Welcome to nginx!" page.
93+
94+
</TabItem>
95+
<TabItem value="mac" label="macOS">
96+
97+
Using **Homebrew**:
98+
99+
```bash
100+
brew install nginx
101+
sudo brew services start nginx
102+
```
103+
104+
</TabItem>
105+
</Tabs>
106+
107+
## Managing the Nginx Service
108+
109+
Once installed, you will use these commands constantly. Bookmark these!
110+
111+
| Command | Action | When to use? |
112+
| :--- | :--- | :--- |
113+
| `sudo systemctl start nginx` | Start Nginx | After a reboot or manual stop. |
114+
| `sudo systemctl stop nginx` | Stop Nginx | To take the server offline. |
115+
| `sudo systemctl restart nginx` | Hard Restart | To apply major system changes. |
116+
| `sudo systemctl reload nginx` | **Graceful Reload** | **Best Practice:** Apply config changes without dropping user connections. |
117+
118+
## Verification: The "Welcome" Page
119+
120+
After installation, Nginx automatically starts a default website. If you navigate to your server's IP address (or `localhost`), you should see:
121+
122+
:::warning Firewall Check
123+
On AWS or local Linux, if you can't see the page, ensure **Port 80** is open in your Security Groups or `ufw` firewall:
124+
`sudo ufw allow 'Nginx Full'`
125+
:::

‎absolute-beginners/devops-beginner/nginx/configuration-basics.mdx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
---
2+
title: "Nginx Configuration Basics"
3+
sidebar_label: "3. Config Basics"
4+
sidebar_position: 3
5+
description: "Master the anatomy of Nginx configuration files, server blocks, and location directives."
6+
---
7+
8+
Nginx doesn't have a graphical interface. Everything you want it to do—from hosting a **Docusaurus** site to securing a **MERN** API—is defined in simple text files.
9+
10+
At **CodeHarborHub**, we follow the "Industrial Standard" of modular configuration. Instead of one giant file, we break our settings into smaller, manageable pieces.
11+
12+
:::info Why Modular Configuration?
13+
This approach allows us to:
14+
15+
1. **Organize by Purpose:** Keep frontend and backend settings separate.
16+
2. **Enable/Disable Easily:** Just move a file from `sites-available` to `sites-enabled` to activate it.
17+
3. **Collaborate:** Multiple developers can work on different configs without conflicts.
18+
:::
19+
20+
## The File Hierarchy
21+
22+
On a Linux server (Ubuntu), Nginx stores its files in `/etc/nginx/`. Here is the structure you need to know:
23+
24+
| File/Folder | Purpose |
25+
| :--- | :--- |
26+
| **`nginx.conf`** | The main "Global" configuration file. |
27+
| **`sites-available/`** | Where you store individual website configs (The "Drafts"). |
28+
| **`sites-enabled/`** | Where "Active" website configs live (The "Live" versions). |
29+
| **`conf.d/`** | General configuration snippets included by the main file. |
30+
31+
## The Anatomy of a Config File
32+
33+
Nginx uses a **Block-based** syntax. It looks very similar to CSS or JSON. A block is defined by curly braces `{ }`.
34+
35+
### 1. The Directives
36+
A **Directive** is a single instruction. It ends with a semicolon `;`.
37+
* *Example:* `listen 80;`
38+
39+
### 2. The Context (Blocks)
40+
A **Context** is a group of directives.
41+
* **Main:** The global settings (outside any braces).
42+
* **Events:** Connection handling settings.
43+
* **Http:** Settings for all web traffic.
44+
* **Server:** Settings for a specific website (Virtual Host).
45+
* **Location:** Settings for a specific URL path.
46+
47+
## Writing a Basic Server Block
48+
49+
This is the most common task for a **CodeHarborHub** developer. Below is a professional template for hosting a static site (like your Docusaurus build).
50+
51+
```nginx
52+
server {
53+
listen 80; # Listen on Port 80 (HTTP)
54+
server_name codeharborhub.com; # Your Domain Name
55+
56+
# Where the website files are stored
57+
root /var/www/codeharborhub/build;
58+
59+
# The default file to load
60+
index index.html;
61+
62+
# URL Handling
63+
location / {
64+
# Check if the file exists, if not, load index.html
65+
# (Crucial for React/Docusaurus routing!)
66+
try_files $uri $uri/ /index.html;
67+
}
68+
}
69+
```
70+
71+
## How Nginx Processes a Request
72+
73+
When a user visits `codeharborhub.com/docs`, Nginx follows a logical "Decision Tree" to find the right file.
74+
75+
```mermaid
76+
graph TD
77+
A[Request: /docs] --> B{Matches server_name?}
78+
B -- Yes --> C{Find matching 'location'}
79+
C -- "location /docs" --> D[Check root folder]
80+
D --> E[Serve index.html]
81+
B -- No --> F[Serve Default Server Block]
82+
```
83+
84+
## Essential Directives to Memorize
85+
86+
<Tabs>
87+
<TabItem value="server" label="Server Directives" default>
88+
89+
* **`listen`**: Defines the port (80 for HTTP, 443 for HTTPS).
90+
91+
* **`server_name`**: Defines the domain (e.g., `api.example.com`).
92+
93+
* **`error_page`**: Defines custom pages for 404 or 500 errors.
94+
95+
</TabItem>
96+
<TabItem value="location" label="Location Directives">
97+
98+
* **`proxy_pass`**: Forwards the request to another server (Node.js).
99+
100+
* **`root`**: The base folder for searching files.
101+
102+
* **`alias`**: Defines a replacement for the path.
103+
104+
* **`return`**: Used for redirects (e.g., redirecting HTTP to HTTPS).
105+
106+
</TabItem>
107+
108+
</Tabs>
109+
110+
## Best Practices for CodeHarborHub Learners
111+
112+
1. **Always Test Your Config:** Before restarting Nginx, run this command to check for syntax errors:
113+
114+
```bash
115+
sudo nginx -t
116+
```
117+
118+
*If it says "syntax is ok," you are safe to reload\!*
119+
120+
2. **Use Reload, Not Restart:**
121+
122+
* **Restart:** Stops the server and starts it again (brief downtime).
123+
* **Reload:** Applies changes without stopping the server (zero downtime).
124+
125+
```bash
126+
sudo systemctl reload nginx
127+
```
128+
129+
3. **Permissions:** Ensure the `nginx` user has permission to read your `/var/www/` folders.
130+
131+
132+
:::tip Tip for Local Development
133+
When testing Nginx locally, you can use `localhost` or `127.0.0.1`. If you want to test with a custom domain (like `codeharborhub.local`), add this line to your `/etc/hosts` file:
134+
135+
```
136+
127.0.0.1 codeharborhub.local
137+
```
138+
139+
This way, you can mimic a real domain environment on your local machine.
140+
:::

‎absolute-beginners/devops-beginner/nginx/intro-to-nginx.mdx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: "Introduction to Nginx"
3+
sidebar_label: "1. What is Nginx?"
4+
sidebar_position: 1
5+
description: "Discover why Nginx is the most popular web server in the world and how it powers modern MERN applications. Learn about its role as a reverse proxy, static file server, and load balancer. This chapter will give you a solid foundation in understanding how Nginx fits into the architecture of a full-stack application and why it's essential for production deployments."
6+
tags: ["nginx", "web server", "reverse proxy", "load balancer", "static hosting", "ssl termination"]
7+
keywords: ["nginx", "web server", "reverse proxy", "load balancer", "static hosting", "ssl termination"]
8+
---
9+
10+
In your journey as a **Full-Stack Developer** at **CodeHarborHub**, you have likely been running your React app on port `5173` and your Express API on port `5000`. But in the "Industrial World," we never point users directly to these ports.
11+
12+
Instead, we use **Nginx**.
13+
14+
**Nginx** (pronounced "Engine-X") is a high-performance open-source software for web serving, reverse proxying, caching, load balancing, and media streaming. It is the "Front Door" to your server.
15+
16+
:::info Why is it called Nginx?
17+
The name "Nginx" is a play on the word "Engine" and the letter "X" to represent the unknown. It was created by Igor Sysoev in 2004 to solve the C10k problem, which is the challenge of handling 10,000 concurrent connections efficiently.
18+
:::
19+
20+
## The "Security Guard" Analogy
21+
22+
Think of your server like a **High-Security Building**:
23+
24+
* **Your Node.js App:** The office inside where the work happens.
25+
* **The Internet:** The public street outside.
26+
* **Nginx:** The **Security Guard** at the front desk.
27+
28+
When a visitor (User) arrives, they don't go straight to your office. They talk to the Security Guard (Nginx). Nginx checks if they are allowed in, handles their request, and passes the message to your office (Node.js).
29+
30+
## Why do we need Nginx?
31+
32+
While Node.js is great at logic, it isn't built to handle raw internet traffic at scale. Nginx adds these "Industrial Level" capabilities:
33+
34+
| Feature | What it does | Benefit |
35+
| :--- | :--- | :--- |
36+
| **Reverse Proxy** | Hides your backend server's true identity and port. | **Security:** Hackers can't attack your API directly. |
37+
| **Static Hosting** | Serves HTML, CSS, and Images directly from the disk. | **Speed:** Much faster than letting Node.js serve files. |
38+
| **SSL Termination** | Handles HTTPS encryption for you. | **Simplicity:** Your app code doesn't have to manage certificates. |
39+
| **Load Balancing** | Splits traffic across multiple servers. | **Uptime:** If one server crashes, the site stays online. |
40+
41+
## The Request Flow in a MERN App
42+
43+
At **CodeHarborHub**, we typically set up Nginx to handle both our Docusaurus frontend and our backend API simultaneously.
44+
45+
```mermaid
46+
graph LR
47+
User((User Browser)) -->|HTTP/HTTPS| Nginx{Nginx Server}
48+
49+
subgraph "Internal Server"
50+
Nginx -->|Route: /| React[React/Docusaurus Build]
51+
Nginx -->|Route: /api| Express[Node.js API: Port 5000]
52+
end
53+
```
54+
55+
## Performance: Event-Driven vs Process-Based
56+
57+
Why is Nginx faster than older servers like Apache?
58+
59+
* **Apache (Process-Based):** Like a restaurant that hires a new waiter for *every single customer*. If 1,000 customers come in, the restaurant gets crowded and slow.
60+
* **Nginx (Event-Driven):** Like a single, super-fast waiter who takes orders from 1,000 tables at once. They don't stand at the table waiting; they take an order and move to the next one immediately.
61+
62+
## Common Use Cases at CodeHarborHub
63+
64+
1. **Hosting Docusaurus:** Nginx serves the static HTML files generated by `npm run build`.
65+
2. **API Gateway:** Nginx receives requests at `api.codeharborhub.com` and forwards them to a local Node.js process.
66+
3. **Custom Error Pages:** Showing a professional "Maintenance" or "404 Not Found" page instead of a raw browser error.
67+
68+
:::info It's Lightweight and Fast
69+
Nginx is incredibly lightweight. It can handle **10,000+ concurrent connections** while using only a few megabytes of RAM. This makes it perfect for low-cost VPS hosting (like a $5 DigitalOcean or AWS Lightsail instance).
70+
:::
71+
72+
## Learning Challenge
73+
74+
Open your browser and visit a few of your favorite websites (like GitHub, Netflix, or Airbnb). Almost all of them use Nginx (or a similar tool) to manage their traffic. You can often see this by checking the "Server" header in the **Network Tab** of your Browser Developer Tools!

0 commit comments

Comments
 (0)