Nginx as reverse proxy in Express - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a reverse proxy in the context of web servers?

A reverse proxy is a server that sits between clients and backend servers. It receives client requests and forwards them to the backend server, then sends the server's response back to the client. It helps with load balancing, security, and hiding backend details.

beginner

Why use Nginx as a reverse proxy for an Express app?

Nginx can handle many client connections efficiently, serve static files quickly, provide SSL termination, and forward requests to the Express app. This improves performance, security, and scalability.

intermediate

Which Nginx directive is used to forward requests to the Express backend?

The proxy_pass directive is used inside a location block to forward client requests to the Express backend server.

intermediate

How does Nginx improve security when used as a reverse proxy?

Nginx can hide backend server details, filter requests, limit request rates, and handle SSL/TLS encryption. This protects the Express app from direct exposure to the internet.

beginner

What is the role of the location block in Nginx reverse proxy configuration?

The location block defines which URL paths Nginx should match and how to handle those requests, such as forwarding them to the Express backend using proxy_pass.

What does the proxy_pass directive do in Nginx?

A Blocks client requests

B Forwards client requests to a backend server

C Serves static files directly

D Starts the Express server

proxy_pass tells Nginx where to send the incoming client requests, usually to a backend server like Express.

Which benefit does Nginx provide when acting as a reverse proxy for Express?

A Handles SSL termination and load balancing

B Improves client-side JavaScript performance

C Replaces Express entirely

D Runs database queries

Nginx can handle SSL and distribute requests to multiple backend servers, improving security and scalability.

Where in the Nginx config do you specify the backend server URL?

A Inside <code>server_name</code>

B Inside <code>listen</code>

C Inside <code>error_page</code>

D Inside <code>location</code> with <code>proxy_pass</code>

The proxy_pass directive inside a location block sets the backend server URL.

What port does Express usually listen on when behind Nginx reverse proxy?

A 3000 or another custom port

B 443

C 80

D 22

Express often listens on ports like 3000, while Nginx listens on standard HTTP/HTTPS ports.

Which of these is NOT a reason to use Nginx as a reverse proxy?

A Serve static files efficiently

B Load balance multiple backend servers

C Directly run Express code

D Improve security by hiding backend

Nginx does not run Express code; it forwards requests to the Express server.

Explain how Nginx acts as a reverse proxy for an Express app and why it is useful.

Think about what Nginx does before the request reaches Express.

Describe the key parts of an Nginx configuration to set up a reverse proxy for Express.

Focus on the directives inside server and location blocks.

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