Web server vs application server in Nginx - Hands-On Comparison

Understanding Web Server vs Application Server with Nginx

📖 Scenario: You are setting up a simple web environment to understand how a web server and an application server work together. You will configure Nginx as a web server to serve static files and forward dynamic requests to an application server.

🎯 Goal: Build a basic Nginx configuration that serves static HTML files and proxies requests for dynamic content to an application server running on port 8080.

📋 What You'll Learn

Create a basic Nginx server block to serve static files from /var/www/html

Add a configuration variable for the application server address http://127.0.0.1:8080

Configure Nginx to proxy requests starting with /app/ to the application server

Print the final Nginx configuration to verify the setup

💡 Why This Matters

🌍 Real World

Web servers like Nginx serve static content and forward dynamic requests to application servers, which run the application logic. This separation improves performance and scalability.

💼 Career

Understanding how to configure web servers and application servers is essential for DevOps roles, system administrators, and backend engineers to deploy and manage web applications efficiently.

1

Create basic Nginx server block for static files

Write the Nginx server block configuration to listen on port 80 and serve static files from /var/www/html using the root directive.

Nginx

# Your code here

Hint

Use listen 80; to listen on HTTP port and root /var/www/html; to serve static files.

2

Add application server address variable

Add a variable set $app_server http://127.0.0.1:8080; inside the server block to define the application server address.

Nginx

server {
    listen 80;
    root /var/www/html;
    index index.html;

    # Define application server address
    # Your code here

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

Hint

Use the set directive inside the server block to create the variable.

3

Configure proxy for application server requests

Add a location /app/ block inside the server block that proxies requests to the application server using proxy_pass $app_server;.

Nginx

server {
    listen 80;
    root /var/www/html;
    index index.html;

    set $app_server http://127.0.0.1:8080;

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

    # Add proxy location for /app/
    # Your code here
}

Hint

Use location /app/ { proxy_pass $app_server; } to forward requests to the app server.

4

Print the final Nginx configuration

Print the entire Nginx configuration stored in the variable nginx_config to verify the setup.

Nginx

# Print the Nginx configuration
# Your code here

Hint

Use print(nginx_config) to display the configuration.

Practice

1. What is the primary role of a web server like nginx?

easy

A. To deliver static files like images and HTML directly to users

B. To execute backend application logic and generate dynamic content

C. To store user data and manage databases

D. To compile source code into executable programs

Solution

1. Step 1: Understand the role of a web server

   A web server mainly serves static content such as images, HTML, CSS, and JavaScript files directly to users.

2. Step 2: Differentiate from application server

   An application server runs backend code to create dynamic content, which is different from a web server's role.

3. Final Answer:

   To deliver static files like images and HTML directly to users -> Option A

4. Quick Check:

   Web server = static file delivery [OK]

Hint: Web servers serve files; app servers run code [OK]

Common Mistakes:

• Confusing web server with application server
• Thinking web server runs backend logic
• Assuming web server manages databases

2. Which nginx configuration snippet correctly forwards requests to an application server on port 3000?

easy

A. location / { root http://localhost:3000; }

B. location / { fastcgi_pass http://localhost:3000; }

C. location / { proxy_pass http://localhost:3000; }

D. location / { redirect http://localhost:3000; }

Solution

1. Step 1: Identify correct directive for forwarding

   The proxy_pass directive is used in nginx to forward requests to an application server.

2. Step 2: Check other options for correctness

   root serves static files, fastcgi_pass is for FastCGI servers, and redirect sends HTTP redirects, not proxying.

3. Final Answer:

   location / { proxy_pass http://localhost:3000; } -> Option C

4. Quick Check:

   Use proxy_pass to forward requests [OK]

Hint: proxy_pass forwards; root serves static files [OK]

Common Mistakes:

• Using root instead of proxy_pass for forwarding
• Confusing fastcgi_pass with proxy_pass
• Using redirect which changes URL instead of proxying

3. Given this nginx config snippet, what happens when a user requests /app?

location /app {
  proxy_pass http://127.0.0.1:8080;
}

medium

A. nginx serves static files from /app directory

B. nginx forwards the request to the application server at 127.0.0.1:8080

C. nginx returns a 404 error

D. nginx redirects the user to http://127.0.0.1:8080/app

Solution

1. Step 1: Analyze the proxy_pass directive

   The proxy_pass directive tells nginx to forward matching requests to the specified backend server.

2. Step 2: Understand request handling

   Requests to /app are sent to the application server at 127.0.0.1:8080, not served as static files or redirected.

3. Final Answer:

   nginx forwards the request to the application server at 127.0.0.1:8080 -> Option B

4. Quick Check:

   proxy_pass forwards requests to backend [OK]

Hint: proxy_pass means forward, not serve or redirect [OK]

Common Mistakes:

• Thinking nginx serves static files here
• Confusing proxy_pass with redirect
• Assuming 404 error without backend

4. You configured nginx to forward requests to an application server using:

location /api {
  proxy_pass http://localhost:5000/api;
}

But requests to /api/users fail. What is the likely problem?

medium

A. nginx cannot forward requests to localhost

B. The location block should be location /api/ with trailing slash

C. proxy_pass must use HTTPS instead of HTTP

D. proxy_pass should be http://localhost:5000/ without /api

Solution

1. Step 1: Understand proxy_pass URI behavior

   When proxy_pass includes a URI (like /api), nginx replaces the matching part of the request URI with that URI, causing duplication.

2. Step 2: Correct proxy_pass to avoid URI duplication

   Removing /api from proxy_pass (using http://localhost:5000/) forwards the full original URI correctly.

3. Final Answer:

   proxy_pass should be http://localhost:5000/ without /api -> Option D

4. Quick Check:

   proxy_pass URI affects request path [OK]

Hint: Avoid URI in proxy_pass to prevent path duplication [OK]

Common Mistakes:

• Including URI in proxy_pass causing double paths
• Thinking HTTPS is required for localhost
• Believing nginx can't proxy localhost

5. You want nginx to serve static files from /var/www/html and forward API requests to an application server on port 4000. Which configuration correctly achieves this?

hard

A. location / { root /var/www/html; } location /api/ { proxy_pass http://localhost:4000/; }

B. location / { proxy_pass http://localhost:4000/; } location /api/ { root /var/www/html; }

C. location /api/ { root /var/www/html; } location / { proxy_pass http://localhost:4000/; }

D. location /api/ { proxy_pass http://localhost:4000/api/; } location / { root /var/www/html; }

Solution

1. Step 1: Assign root for static files

   The root directive in location / serves static files from /var/www/html.

2. Step 2: Forward API requests correctly

   The location /api/ block uses proxy_pass to forward API calls to the application server on port 4000.

3. Step 3: Verify order and correctness

   Static files served at root, API forwarded properly. Other options mix these roles incorrectly.

4. Final Answer:

   location / { root /var/www/html; } location /api/ { proxy_pass http://localhost:4000/; } -> Option A

5. Quick Check:

   Static files root + API proxy_pass = correct setup [OK]

Hint: Serve static at / root, proxy API at /api/ [OK]

Common Mistakes:

• Swapping root and proxy_pass locations
• Adding URI in proxy_pass causing path issues
• Not using trailing slash in location /api/