Nginx as reverse proxy in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Express server that listens on port 3000.

Express

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello from Express!');
});

app.listen([1], () => {
  console.log('Server running');
});

Drag options to blanks, or click blank then click option'

A5000

B8080

C80

D3000

Attempts:

3 left

💡 Hint

Common Mistakes

Using port 80 directly in Express without root permissions.

Choosing a port number that conflicts with other services.

The Express server listens on port 3000, which is a common default for development.

2fill in blank

medium

Complete the Nginx configuration line to set the proxy pass URL to the Express server running on localhost port 3000.

Express

location / {
    proxy_pass http://[1];
}

Drag options to blanks, or click blank then click option'

A127.0.0.1:8080

Blocalhost:3000

C0.0.0.0:3000

Dlocalhost:80

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong port numbers in proxy_pass.

Using IP 0.0.0.0 which is not routable.

The proxy_pass should point to the Express server URL, which is localhost on port 3000.

3fill in blank

hard

Fix the error in the Nginx proxy configuration to correctly forward headers.

Express

location /api/ {
    proxy_pass http://localhost:3000/;
    proxy_set_header Host [1];
}

Drag options to blanks, or click blank then click option'

A$host

B$http_host

C$remote_addr

D$server_name

Attempts:

3 left

💡 Hint

Common Mistakes

Using $remote_addr which is the client IP, not host.

Using $server_name which is the Nginx server name, not the request host.

The proxy_set_header Host should be set to $host to preserve the original host header.

4fill in blank

hard

Fill both blanks to complete the Nginx configuration that forwards requests and sets headers for proxying.

Express

location /app/ {
    proxy_pass http://localhost:[1]/;
    proxy_set_header X-Real-IP [2];
}

Drag options to blanks, or click blank then click option'

A3000

B$remote_addr

C$host

D8080

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong port number in proxy_pass.

Setting X-Real-IP to $host instead of $remote_addr.

The proxy_pass port should be 3000 to match Express, and X-Real-IP header should be set to $remote_addr to pass client IP.

5fill in blank

hard

Fill in the blanks to complete the Express middleware that trusts the proxy and logs the real client IP.

Express

const express = require('express');
const app = express();

app.set('[1]', true);

app.use((req, res, next) => {
  console.log('Client IP:', req.[2]);
  next();
});

Drag options to blanks, or click blank then click option'

Atrust proxy

Bconnection

Cip

Dsocket

Attempts:

3 left

💡 Hint

Common Mistakes

Not setting 'trust proxy' causes Express to see proxy IP.

Using incorrect property names to get client IP.

Setting 'trust proxy' to true tells Express to trust the proxy headers. The client IP is accessed via req.ip.

Practice

1. What is the main role of Nginx when used as a reverse proxy for an Express app?

easy

A. It compiles the Express app code before running.

B. It replaces the Express app and handles all business logic.

C. It stores the database for the Express app.

D. It forwards client requests to the Express server and sends back responses.

Solution

1. Step 1: Understand the role of a reverse proxy

   A reverse proxy receives client requests and forwards them to a backend server, then returns the server's response to the client.

2. Step 2: Apply this to Nginx and Express

   Nginx acts as this middleman, forwarding requests to the Express app and sending back responses, improving security and performance.

3. Final Answer:

   It forwards client requests to the Express server and sends back responses. -> Option D

4. Quick Check:

   Reverse proxy = forwards requests [OK]

Hint: Remember: reverse proxy passes requests, doesn't replace app [OK]

Common Mistakes:

• Thinking Nginx replaces Express app logic
• Confusing reverse proxy with database
• Assuming Nginx compiles code

2. Which Nginx configuration snippet correctly sets up a reverse proxy to an Express app running on port 3000?

easy

A. proxy_pass https://localhost:3000;

B. proxy_pass http://localhost:3000;

C. proxy_pass ftp://localhost:3000;

D. proxy_pass file://localhost:3000;

Solution

1. Step 1: Identify the correct protocol for Express app

   Express apps usually run over HTTP, so the proxy_pass URL must start with http://

2. Step 2: Check the options

   proxy_pass http://localhost:3000; uses http://localhost:3000 which is correct; others use wrong protocols like https, ftp, or file.

3. Final Answer:

   proxy_pass http://localhost:3000; -> Option B

4. Quick Check:

   Express uses HTTP, so proxy_pass must use http:// [OK]

Hint: Use http:// for Express app URLs in proxy_pass [OK]

Common Mistakes:

• Using https:// without SSL setup
• Using unsupported protocols like ftp://
• Confusing file paths with URLs

3. Given this Nginx config snippet inside server block:

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

What happens when a client requests /api/users?

medium

A. Nginx forwards the request to http://localhost:3000/ only.

B. Nginx forwards the request to http://localhost:3000/api/users.

C. Nginx forwards the request to http://localhost:3000/users.

D. Nginx returns a 404 error immediately.

Solution

1. Step 1: Understand proxy_pass with trailing slash

   When proxy_pass URL ends with a slash, Nginx replaces the matching location prefix with the path after the slash.

2. Step 2: Apply to /api/users request

   The location /api/ matches, so /api/ is replaced by /, forwarding to http://localhost:3000/users.

3. Final Answer:

   Nginx forwards the request to http://localhost:3000/users. -> Option C

4. Quick Check:

   Trailing slash in proxy_pass replaces location prefix [OK]

Hint: Trailing slash in proxy_pass removes location prefix [OK]

Common Mistakes:

• Assuming proxy_pass appends full path including /api/
• Confusing behavior with or without trailing slash
• Expecting 404 without backend check

4. You configured Nginx as reverse proxy but get a 502 Bad Gateway error. Which is the most likely cause?

medium

A. Express app is not running or not reachable on the specified port.

B. Nginx configuration file has a syntax error unrelated to proxy_pass.

C. Client browser does not support HTTP/2.

D. Express app is running but has no routes defined.

Solution

1. Step 1: Understand 502 Bad Gateway meaning

   502 means Nginx cannot connect to the backend server (Express app) to get a valid response.

2. Step 2: Identify common causes

   If Express is not running or listening on the wrong port, Nginx cannot forward requests, causing 502 errors.

3. Final Answer:

   Express app is not running or not reachable on the specified port. -> Option A

4. Quick Check:

   502 = backend unreachable [OK]

Hint: Check if Express app is running to fix 502 errors [OK]

Common Mistakes:

• Blaming client browser for server errors
• Ignoring backend server status
• Assuming syntax errors always cause 502

5. You want Nginx to serve static files directly and forward API requests to Express on port 4000. Which Nginx config snippet correctly achieves this?

hard

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

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

C. location / { proxy_pass http://localhost:4000/; }
location /static/ { proxy_pass http://localhost:4000/; }

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

Solution

1. Step 1: Serve static files directly

   Static files under /static/ should be served from disk using root directive.

2. Step 2: Forward API requests to Express

   Requests to /api/ should be proxied to Express running on port 4000.

3. Step 3: Match configuration to requirements

   location /static/ { root /var/www/html; } location /api/ { proxy_pass http://localhost:4000/; } correctly sets /static/ to serve files and /api/ to proxy_pass Express.

4. Final Answer:

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

5. Quick Check:

   Static served by root, API proxied to Express [OK]

Hint: Static files use root, API uses proxy_pass [OK]

Common Mistakes:

• Swapping static and API locations
• Using proxy_pass for static files
• Serving API requests from file root