Why Nginx handles API routing - See It in Action

Why Nginx Handles API Routing

📖 Scenario: You are working on a web application that has a frontend and a backend API. The backend API runs on a different server or port. You want to use Nginx as a reverse proxy to route API requests to the backend server while serving the frontend files directly.This setup helps keep your application organized and improves performance by letting Nginx handle routing efficiently.

🎯 Goal: Learn how to configure Nginx to route API requests to a backend server while serving frontend files from the same domain.

📋 What You'll Learn

Create a basic Nginx server block to serve frontend files

Add a variable to define the backend API server address

Configure Nginx to route requests starting with /api/ to the backend API server

Print the final Nginx configuration to verify the routing setup

💡 Why This Matters

🌍 Real World

Nginx is often used as a reverse proxy to route API requests to backend servers while serving frontend files. This helps organize traffic and improve performance.

💼 Career

Understanding how to configure Nginx for API routing is a key skill for DevOps engineers and backend developers working with web applications.

1

Create a basic Nginx server block

Write an Nginx server block that listens on port 80 and serves static files from /var/www/html for all requests.

Nginx

# Your code here

Need a hint?

Use server {} block with listen 80; and location / { root /var/www/html; index index.html; }.

2

Add a variable for the backend API server

Inside the server block, add a variable called $backend_api and set it to http://localhost:5000 to represent the backend API server address.

Nginx

server {
    listen 80;
    server_name localhost;

    set $backend_api http://localhost:5000;

    location / {
        root /var/www/html;
        index index.html;
    }
    # Your code here
}

Need a hint?

Use set $backend_api http://localhost:5000; inside the server block.

3

Configure API routing to the backend server

Add a location /api/ {} block inside the server block that proxies requests to the backend API server using the $backend_api variable. Use proxy_pass $backend_api; inside this location.

Nginx

server {
    listen 80;
    server_name localhost;

    set $backend_api http://localhost:5000;

    location / {
        root /var/www/html;
        index index.html;
    }

    # Add location /api/ block here
}

Need a hint?

Use location /api/ { proxy_pass $backend_api; } inside the server block.

4

Print the final Nginx configuration

Print the entire Nginx configuration to verify that the server block listens on port 80, serves static files from /var/www/html, and routes /api/ requests to $backend_api.

Nginx

# Your code here

Need a hint?

Print the full configuration text exactly as shown.