Nginx配置：将特定远程URL请求转发至本地文件目录

Hey there! I get that setting up Nginx can feel tricky when you're just starting out, but let's break down your requirement and get this config working for you. Below is a complete, commented Nginx configuration that meets your needs, followed by explanations of key parts to help you understand what's going on.

Complete Nginx Config #

server {
    listen 443 ssl;
    server_name www.example.com;

    # Replace with your actual SSL certificate and key paths
    ssl_certificate /path/to/your/certificate.pem;
    ssl_certificate_key /path/to/your/private-key.pem;

    # Handle requests to /alpha/beta/gamma and its subpaths
    location ^~ /alpha/beta/gamma {
        # Strip the /alpha/beta/gamma prefix from the request path
        rewrite ^/alpha/beta/gamma(.*)$ $1 break;
        
        # Map the modified path to your local static directory
        alias /Users/flynn/Projects/new-ui/dist;

        # For single-page apps (Vue/React/etc.), serve index.html if the requested file doesn't exist
        try_files $uri $uri/ /index.html;

        # Optional: Cache static assets for better performance
        expires 1d;
        add_header Cache-Control "public, max-age=86400";
    }

    # Handle all other requests (forward to backend with cookie and response preservation)
    location / {
        # Replace with your actual backend server address (e.g., http://localhost:8080)
        proxy_pass http://your-backend-server;

        # Preserve original request details for the backend
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Ensure cookies are properly passed between client and backend
        proxy_cookie_domain ~*\.example\.com$ $host;
        proxy_pass_header Set-Cookie;
        proxy_pass_header Cookie;

        # Preserve all response headers from the backend
        proxy_pass_request_headers on;
        proxy_pass_response_headers on;

        # Bypass cache for dynamic content (optional but common)
        proxy_cache_bypass $http_upgrade;
        proxy_no_cache $http_upgrade;
    }
}

Key Explanations #

• location ^~ /alpha/beta/gamma: The ^~ flag ensures this prefix-matched location takes priority over regular expression locations, so your static path requests won't accidentally be routed to the backend.
• rewrite + alias: We use rewrite to strip the /alpha/beta/gamma prefix from the request URL, then alias maps the modified path directly to your local dist directory. This avoids the issue with root (which would append the full location path to the directory, creating an unwanted subfolder structure).
• try_files: If you're serving a single-page application (SPA), this line ensures that any request for a non-existent file (like frontend routes) falls back to index.html, preventing 404 errors.
• Proxy Configuration for Other Requests:
  • proxy_set_header lines pass critical request details (like the original host and client IP) to your backend, so it behaves as if it's receiving requests directly.
  • The cookie-related lines ensure cookies are correctly forwarded between the client and backend, preserving session data and authentication.
  • proxy_pass_request_headers and proxy_pass_response_headers make sure all headers (both request and response) are preserved, keeping the backend's response intact.

Quick Setup Steps #

1. Replace the SSL certificate/key paths with your actual files.
2. Update http://your-backend-server to your real backend URL (e.g., http://localhost:3000).
3. Test the config with nginx -t to catch any syntax errors.
4. Reload Nginx with nginx -s reload to apply the changes.

内容的提问来源于stack exchange，提问作者bbabin