Nginx as reverse proxy in Express - Step-by-Step Execution

Concept Flow - Nginx as reverse proxy

Client sends request

↓

Nginx receives request

↓

Nginx forwards request to Express server

↓

Express server processes request

↓

Express sends response back to Nginx

↓

Nginx sends response to Client

The client sends a request to Nginx, which forwards it to the Express server. Express processes it and sends the response back through Nginx to the client.

Execution Sample

Express

server {
  listen 80;
  location / {
    proxy_pass http://localhost:3000;
  }
}

Nginx listens on port 80 and forwards all requests to the Express server running on port 3000.

Execution Table

Step	Action	Request URL	Server Handling	Response Sent
1	Client sends GET /	GET /	Nginx receives request	No response yet
2	Nginx forwards to Express	GET /	Express receives request	No response yet
3	Express processes request	GET /	Express prepares response	No response yet
4	Express sends response	GET /	Response sent to Nginx	Response data
5	Nginx sends response to client	GET /	Response forwarded	Client receives response
6	Request complete	GET /	No further action	Connection closed

💡 Request completes after Nginx sends Express response back to client

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
Request URL	GET /	GET /	GET /	GET /
Server Handling	None	Express	Express	Nginx
Response Sent	None	None	Response data	Response data

Key Moments - 3 Insights

Why does the client never connect directly to the Express server?

Because Nginx acts as a middleman (reverse proxy), forwarding requests and responses, as shown in execution_table steps 1-5.

What happens if Express server is down?

Nginx will receive no response to forward, causing errors or timeouts, since it depends on Express to handle requests (see step 3 and 4).

Why use Nginx instead of connecting client directly to Express?

Nginx can handle many tasks like load balancing, caching, and security, improving performance and reliability beyond what Express alone provides.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does Express send the response back to Nginx?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Check the 'Response Sent' column in execution_table row for Step 4.

According to variable_tracker, what is the value of 'Server Handling' after Step 4?

A Express

B Nginx

C Client

D None

💡 Hint

Look at the 'Server Handling' row and the 'After Step 4' column in variable_tracker.

If Nginx did not forward the request, what would the client experience?

A Immediate response from Express

B Response from Nginx cache

C No response or timeout

D Direct connection to Express

💡 Hint

Refer to key_moments about what happens if Express is down or Nginx does not forward requests.

Concept Snapshot

Nginx as reverse proxy:
- Nginx listens on a public port (e.g., 80)
- Forwards client requests to Express server (e.g., localhost:3000)
- Express processes and sends response back to Nginx
- Nginx forwards response to client
- Improves security, load balancing, and performance

Full Transcript

This visual execution shows how Nginx acts as a reverse proxy for an Express server. The client sends a request to Nginx, which forwards it to Express. Express processes the request and sends the response back to Nginx. Finally, Nginx sends the response to the client. Variables like Request URL, Server Handling, and Response Sent change step-by-step. Key moments clarify why Nginx is used and what happens if Express is down. The quiz tests understanding of the flow and variable states.

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