Why URL manipulation handles routing in Nginx - See It in Action

Why URL manipulation handles routing

📖 Scenario: You are setting up a simple web server using nginx. You want to understand how changing the URL path can control which content the server shows. This is called routing. By configuring nginx to handle different URL paths, you can send users to different pages or files.

🎯 Goal: Learn how to configure nginx to route different URL paths to different files on the server by manipulating the URL.

📋 What You'll Learn

Create a basic nginx server block configuration

Add a variable to hold the root directory path

Use location blocks to route URLs to specific files

Print the final nginx configuration to verify routing

💡 Why This Matters

🌍 Real World

Web servers use URL routing to decide which page or file to show when a user visits a website. This helps organize content and improve user experience.

💼 Career

Understanding URL routing in <code>nginx</code> is essential for DevOps roles managing web servers and deploying web applications.

1

Create the basic nginx server block

Write a basic server block in nginx.conf with listen 80; and server_name localhost; inside it.

Nginx

# Write the basic server block with listen and server_name
server {
    # Your code here
}

Hint

Start by opening a server { } block. Inside, add listen 80; to listen on port 80 and server_name localhost; to accept requests for localhost.

2

Add a root directory variable

Inside the server block, add a root directive set to /var/www/html to specify where the website files are stored.

Nginx

server {
    listen 80;
    server_name localhost;
    # Add root directory here
}

Hint

The root directive tells nginx where to find the website files. Use root /var/www/html; inside the server block.

3

Add location blocks for routing

Inside the server block, add two location blocks: one for / that serves index.html and one for /about that serves about.html. Use try_files $uri $uri/ /index.html; for the root location and try_files $uri $uri/ /about.html; for the about location.

Nginx

server {
    listen 80;
    server_name localhost;
    root /var/www/html;
    # Add location blocks for / and /about
}

Hint

Use location / { try_files $uri $uri/ /index.html; } to serve the homepage and location /about { try_files $uri $uri/ /about.html; } to serve the about page.

4

Print the final nginx configuration

Print the entire nginx.conf content you wrote to verify the routing setup.

Nginx

# Print the nginx configuration below
# Your code here

Hint

Use a print statement to show the full nginx configuration text exactly as written.

Practice

1. What is the main purpose of URL manipulation in nginx routing?

easy

A. To direct incoming requests to the correct service or file based on the URL

B. To change the website's domain name automatically

C. To encrypt the URL for security

D. To block all incoming traffic

Solution

1. Step 1: Understand URL manipulation in nginx

   URL manipulation means using nginx to read parts of the URL and decide where to send the request.

2. Step 2: Identify the purpose of routing

   Routing sends requests to the right place, like a file or service, based on the URL path.

3. Final Answer:

   To direct incoming requests to the correct service or file based on the URL -> Option A

4. Quick Check:

   Routing = directing requests by URL [OK]

Hint: Routing sends requests to correct place by URL path [OK]

Common Mistakes:

• Thinking nginx changes domain names automatically
• Confusing URL encryption with routing
• Assuming nginx blocks all traffic by default

2. Which of the following is the correct syntax to define a location block in nginx for URL routing?

easy

A. location /path { proxy_pass http://backend; }

B. route /path { proxy http://backend; }

C. server /path { proxy_pass http://backend; }

D. path /location { proxy_pass http://backend; }

Solution

1. Step 1: Recall nginx syntax for URL routing

   nginx uses location blocks to match URL paths and route requests.

2. Step 2: Identify correct syntax

   The correct syntax is location /path { proxy_pass http://backend; }. Other options use invalid keywords or structure.

3. Final Answer:

   location /path { proxy_pass http://backend; } -> Option A

4. Quick Check:

   location block syntax = location /path { proxy_pass http://backend; } [OK]

Hint: Use 'location' keyword with path and braces [OK]

Common Mistakes:

• Using 'route' or 'path' instead of 'location'
• Confusing 'server' block with 'location' block
• Missing braces or semicolons in syntax

3. Given this nginx config snippet:

location /images/ {
  root /var/www/html;
}

What file path will nginx serve for a request to /images/logo.png?

medium

A. /images/logo.png

B. /var/www/html/logo.png

C. /var/www/html/images/logo.png

D. /var/www/logo.png

Solution

1. Step 1: Understand nginx root with location

   The root directive appends the full request URI to the root path.

2. Step 2: Combine root and URI

   Request URI is /images/logo.png. Root is /var/www/html. So full path is /var/www/html/images/logo.png.

3. Final Answer:

   /var/www/html/images/logo.png -> Option C

4. Quick Check:

   root + full URI = /var/www/html/images/logo.png [OK]

Hint: root + full URI = file path served [OK]

Common Mistakes:

• Removing the /images/ part from the path
• Confusing root with alias directive
• Assuming root replaces the URI

4. You have this nginx config:

location /app/ {
  proxy_pass http://backend/;
}

Requests to /app/page return 404. What is the likely cause?

medium

A. location block syntax error

B. Missing root directive in location block

C. Incorrect server block name

D. Trailing slash in proxy_pass causes URL to be replaced incorrectly

Solution

1. Step 1: Understand proxy_pass with trailing slash

   When proxy_pass ends with a slash, nginx replaces the matching part of the URL with the proxy URL path.

2. Step 2: Analyze URL rewriting effect

   Request /app/page matches /app/. Because proxy_pass has trailing slash, nginx sends request as /page to backend. If backend expects /app/page, it returns 404.

3. Final Answer:

   Trailing slash in proxy_pass causes URL to be replaced incorrectly -> Option D

4. Quick Check:

   proxy_pass trailing slash changes URL [OK]

Hint: Trailing slash in proxy_pass rewrites URL path [OK]

Common Mistakes:

• Thinking root directive is needed with proxy_pass
• Blaming server block name instead of URL rewrite
• Assuming syntax error without checking proxy_pass

5. You want nginx to route requests to /api/v1/ to http://backend/v1/ but keep the rest of the URL unchanged. Which config correctly handles this?

hard

A. location /api/v1/ { proxy_pass http://backend/; }

B. location /api/v1/ { proxy_pass http://backend/v1/; }

C. location /api/v1/ { proxy_pass http://backend; }

D. location /api/v1/ { proxy_pass http://backend/api/v1/; }

Solution

1. Step 1: Understand proxy_pass URI replacement

   When proxy_pass has a URI ending in /, nginx replaces the matched location prefix with the proxy_pass URI and appends the remaining path.

2. Step 2: Match requirement to config

   location /api/v1/ { proxy_pass http://backend/v1/; }: proxy_pass http://backend/v1/; replaces /api/v1/ with /v1/, so /api/v1/resource becomes http://backend/v1/resource.

3. Final Answer:

   location /api/v1/ { proxy_pass http://backend/v1/; } -> Option B

4. Quick Check:

   proxy_pass with replacement URI rewrites prefix [OK]

Hint: proxy_pass trailing / with path replaces location prefix [OK]

Common Mistakes:

• Adding trailing slash rewrites and drops part of URL
• Duplicating path segments in proxy_pass
• Using wrong proxy_pass URL causing 404