Nginx as reverse proxy in Express - Mini Project: Build & Apply

Nginx as reverse proxy for Express app

📖 Scenario: You have a simple Express web server running on your computer. You want to use Nginx as a reverse proxy to forward web requests from port 80 to your Express app running on port 3000. This setup helps manage traffic and improve security.

🎯 Goal: Build a basic Express server and configure Nginx to act as a reverse proxy forwarding requests from port 80 to the Express server on port 3000.

📋 What You'll Learn

Create a simple Express server listening on port 3000

Define a configuration variable for the Express server port

Write the Nginx reverse proxy configuration block

Complete the Nginx config with server and location blocks to forward requests

💡 Why This Matters

🌍 Real World

Using Nginx as a reverse proxy is common in web hosting to manage traffic, improve security, and enable load balancing.

💼 Career

Many web developer and DevOps roles require setting up reverse proxies to deploy Node.js or Express applications in production.

1

Create Express server

Create a file called server.js. Write code to import express, create an app, and make it listen on port 3000. Add a route GET / that sends the text 'Hello from Express!'.

Express

// Your code here to create Express app listening on port 3000
// Add GET / route sending 'Hello from Express!'

Hint

Use import express from 'express' and app.listen(3000) to start the server.

2

Add port configuration variable

Add a constant variable called PORT and set it to 3000. Change the app.listen call to use this PORT variable.

Express

import express from 'express';
const app = express();
const PORT = 3000
app.get('/', (req, res) => {
  res.send('Hello from Express!');
});
app.listen(PORT);
// Your code here to add PORT variable and use it

Hint

Define const PORT = 3000 and use it in app.listen(PORT).

3

Write Nginx reverse proxy config block

Create an Nginx configuration snippet that defines a location / block. Inside it, add the directive proxy_pass http://localhost:3000; to forward requests to the Express server.

Express

# Your code here to write Nginx location block with proxy_pass

Hint

Use location / { proxy_pass http://localhost:3000; } to forward all requests.

4

Complete Nginx server block

Write a full Nginx server block listening on port 80. Inside it, include the location / block with proxy_pass http://localhost:3000;. This completes the reverse proxy setup.

Express

# Your code here to add server block listening on port 80
# Include the location block inside

Hint

Wrap the location block inside server { listen 80; ... }.

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