# nginx - Web Server Basics ## What It Is (Simple Answer) **nginx** (pronounced "engine-ex") is software that runs on your server and delivers web pages to visitors. Think of it like a **librarian** who: - Stores your books (web files) - Hands them to visitors when they ask - Keeps track of which books are popular (caching) - Directs special requests to the right department (routing) ## The Real-World Analogy **Your website is like a restaurant:** ``` Customer (Student) → Walks in → Asks for menu → Gets menu ``` **nginx is the host/server who:** 1. Greets customers (accepts web requests) 2. Finds the menu (locates HTML files) 3. Hands them the menu (sends files to browser) 4. Directs special orders to the kitchen (API requests) **Without nginx:** - Your VPS is like a kitchen with no host - Customers don't know where to go - Files exist but nobody delivers them **With nginx:** - Professional host greets everyone - Fast, efficient service - Handles many customers at once ## What nginx Does for midimaze.com ### 1. Serves Static Files (Most Important) **Static files = Files that don't change:** - HTML pages (your song articles) - CSS stylesheets (makes site look good) - JavaScript files (makes site interactive) - Images, fonts, etc. **How nginx serves them:** ``` Student types: midimaze.com/songs/giant-steps ↓ nginx receives request ↓ nginx finds: /var/www/html/songs/giant-steps/index.html ↓ nginx sends file to student's browser ↓ Student sees article ``` **Why nginx is good at this:** - ✅ **Very fast** - Can serve files in ~1ms - ✅ **Efficient** - Uses minimal CPU/RAM - ✅ **Concurrent** - Handles 1000s of students at once - ✅ **Reliable** - Rarely crashes ### 2. Caching (Speed Boost) **Caching = Remembering recently served files** **Without caching:** ``` Student 1 requests: giant-steps.html → nginx reads from disk → sends Student 2 requests: giant-steps.html → nginx reads from disk → sends Student 3 requests: giant-steps.html → nginx reads from disk → sends (Slow - disk reads take time) ``` **With caching:** ``` Student 1 requests: giant-steps.html → nginx reads from disk → saves in RAM → sends Student 2 requests: giant-steps.html → nginx reads from RAM → sends (instant!) Student 3 requests: giant-steps.html → nginx reads from RAM → sends (instant!) (Fast - RAM is 1000× faster than disk) ``` **Result:** Popular pages load instantly for everyone after the first visitor. ### 3. Routing (Traffic Director) **Routing = Directing different requests to different places** **Example for midimaze.com:** ``` midimaze.com/songs/giant-steps → nginx serves: static HTML file (fast) midimaze.com/api/search → nginx forwards to: Node.js API server (dynamic) midimaze.com/images/logo.png → nginx serves: static image file (fast, cached) ``` **Why this matters:** - Static files (HTML, CSS, images): nginx handles directly (fast) - API requests (search, database): nginx passes to specialized server - Best of both worlds: fast static delivery + dynamic features ### 4. Load Balancing (For Growth) **Load balancing = Distributing work across multiple servers** **Current (single server):** ``` Students → nginx on VPS → Your files ``` **Future (if you scale):** ``` Students → nginx on VPS → { Server 1 (handles 50% of requests) Server 2 (handles 50% of requests) } ``` **You're not doing this yet, but nginx makes it possible later.** ## nginx vs Other Web Servers ### Apache (Alternative) **Apache:** - Older, more features - Uses more RAM per connection - Good for: Complex configurations **nginx:** - Newer, simpler - Uses less RAM (better for VPS) - Good for: Static files, high traffic **For midimaze.com:** - ✅ nginx is the right choice - Hostinger likely uses nginx by default - Better for static Astro site ### Node.js Built-in Server **Node.js can serve files directly:** ```javascript // Without nginx const http = require('http'); http.createServer((req, res) => { // Serve files manually }).listen(3000); ``` **Problems:** - ❌ Slower for static files - ❌ Uses more RAM - ❌ No built-in caching - ❌ Single-threaded **With nginx in front:** ``` Students → nginx (fast static files) → Node.js (only for API) ``` **Benefits:** - ✅ nginx handles static files (faster) - ✅ Node.js only handles dynamic requests (more efficient) - ✅ Better use of server resources ## How nginx Works (Technical but Simple) ### Architecture **nginx is "event-driven":** ``` Traditional server (Apache): 1 connection = 1 process/thread 1000 students = 1000 processes (lots of RAM) nginx: 1 worker = handles 1000s of connections 1000 students = 1 worker (minimal RAM) ``` **Why this matters:** - Uses ~10 MB RAM vs ~500 MB for Apache - Your Hostinger VPS can handle more students ### Configuration File **nginx is configured with a text file:** ```nginx # /etc/nginx/sites-available/midimaze server { listen 80; # Listen on port 80 (HTTP) server_name midimaze.com; # Your domain root /var/www/html; # Where files are stored index index.html; # Serve static files location / { try_files $uri $uri/ /index.html; } # API requests location /api/ { proxy_pass http://localhost:3000; # Forward to Node.js } } ``` **What this config does:** 1. Listens for requests to midimaze.com 2. Serves files from /var/www/html 3. Static files: nginx handles directly 4. API requests: nginx forwards to Node.js on port 3000 **You don't usually edit this manually - Hostinger likely manages it.** ## nginx for Your Use Case (midimaze.com) ### What nginx Does for You **1. Serves your Astro static site:** ``` You build Astro → Creates dist/ folder with HTML/CSS/JS ↓ Upload to VPS → Goes to /var/www/html/ ↓ nginx serves → Students see your site ``` **2. Caches popular pages:** ``` "Giant Steps" article → 100 students read it today ↓ nginx caches in RAM → Served instantly to all 100 ↓ Minimal CPU usage ``` **3. Routes search API requests:** ``` Student searches for "jazz harmony" ↓ Browser sends to: midimaze.com/api/search ↓ nginx forwards to: Your Node.js API server ↓ API returns results → nginx sends to student ``` ### Why This Architecture Works **nginx handles what it's good at:** - ✅ Static HTML files (your articles) - ✅ Images, CSS, JavaScript - ✅ Serving thousands of files quickly **Node.js/Convex handles what it's good at:** - ✅ Vector search (dynamic) - ✅ Database queries - ✅ Complex logic **Result: Your VPS stays fast and efficient** ## Common nginx Tasks ### Check if nginx is Running ```bash # On your VPS sudo systemctl status nginx # Should see: # ● nginx.service - A high performance web server # Active: active (running) ``` ### Restart nginx (After Config Changes) ```bash sudo systemctl restart nginx ``` ### View nginx Logs (Debugging) ```bash # See recent requests sudo tail -f /var/log/nginx/access.log # See errors sudo tail -f /var/log/nginx/error.log ``` ### Test Config Before Applying ```bash # Check if config is valid sudo nginx -t # If valid, reload sudo systemctl reload nginx ``` ## Performance Benefits for midimaze.com ### With nginx (Current/Recommended) **Serving 1000 students searching:** ``` nginx: - Serves HTML/CSS/JS: ~1ms per file - Uses: ~50 MB RAM - CPU: <1% Your API (Node.js/Convex): - Handles vector search: ~10-50ms per search - Uses: ~500 MB RAM - CPU: <5% Total resources: - RAM: ~550 MB - CPU: <10% - ✅ Your VPS handles easily ``` ### Without nginx (Not Recommended) **Node.js serving everything:** ``` Node.js: - Serves HTML/CSS/JS: ~5-10ms per file (slower) - Handles searches: ~10-50ms per search - Uses: ~1-2 GB RAM (more) - CPU: 20-40% (higher) Total resources: - RAM: ~2 GB - CPU: 20-40% - ⚠️ VPS might struggle during peak ``` **Why nginx helps:** - Takes load off your API server - Static files served faster - More efficient use of VPS resources ## nginx and Your Semantic Search **The flow:** ``` Student loads midimaze.com ↓ nginx serves: index.html, search.js, styles.css (static files) ↓ Browser downloads: embedding model (~50MB, from CDN) ↓ Student types: "jazz harmony" ↓ Browser generates: embedding vector (happens locally) ↓ Browser sends to: midimaze.com/api/search ↓ nginx receives request ↓ nginx forwards to: Your API server (Node.js/Convex) ↓ API searches: Convex vector database ↓ API returns: Results (JSON) ↓ nginx sends: Results to browser ↓ Browser displays: Search results ``` **nginx's role:** 1. Serves initial page load (HTML, JS) - fast 2. Routes API request - efficient 3. Caches common responses - even faster 4. Handles 1000s of students concurrently - scalable ## Key Takeaways ### What nginx Is - Web server software on your VPS - Delivers files to website visitors - Routes requests to appropriate services ### What nginx Does for You - ✅ Serves your Astro static site (very fast) - ✅ Caches popular pages (instant for repeat visitors) - ✅ Routes API requests (search) to backend - ✅ Uses minimal VPS resources ### Why It Matters for midimaze.com - Without nginx: Your site wouldn't be accessible - With nginx: Fast, efficient, scalable - Enables: Static site (fast) + dynamic search (powerful) ### Bottom Line **nginx is the "front desk" of your VPS** - it greets visitors, hands them files quickly, and directs special requests to the right place. You probably don't need to configure it much (Hostinger handles it), but understanding what it does helps you see why your VPS can handle semantic search efficiently. **The magic:** nginx serves your static Astro pages instantly, so your API server (Node.js/Convex) only handles search requests - keeping your VPS fast and responsive even with hundreds of students. ## Related Concepts - **Apache** - Alternative web server (older, uses more RAM) - **Reverse Proxy** - nginx's role when forwarding API requests - **Load Balancer** - nginx can distribute traffic (for scaling) - **CDN** - Like nginx but distributed globally (Cloudflare) ## See Also - [[Client-Side vs Server-Side Search Explained]] - Understanding the architecture - [[Hostinger VPS Hosting for Semantic Search]] - How your VPS handles traffic - [[Astro Static Site with Client-Side Semantic Search]] - Implementation