借助/etc/hosts解析上游地址实现Nginx重定向的问题咨询

Alright, let's break down what's going on here and get that problematic /app location block sorted out. First, let's recap the key details to make sure I'm aligned with your setup:

• Static Angular app deployed on a Linux nginx-host
• /etc/hosts auto-generated as: 127.0.0.1 localhost 10.0.0.1 internalhost
• Standard Nginx server config, but a broken location ^~ /app { return 301 http://internalhost/end... block

Let's tackle this step by step, depending on what you actually want that /app path to do.

Scenario 1: You Accidentally Added the 301 (Want /app to Serve Angular Routes) #

If your goal was to have /app point to a route in your Angular app (not redirect somewhere else), that 301 rule is the root issue. Angular is a single-page app (SPA), so we need Nginx to handle routing correctly instead of redirecting.

Fix Steps: #

1. Remove the broken /app location block entirely, then add config to handle Angular's client-side routing:
   Here's a corrected server block example (adjust the root path to match your Angular dist folder):

   server {
       listen 80;
       server_name localhost internalhost; # Match your hosts entries
   
       # Point to your Angular build output directory
       root /var/www/your-angular-app/dist;
       index index.html;
   
       # Handle all SPA routes: return index.html for non-static file requests
       location / {
           try_files $uri $uri/ /index.html;
       }
   
       # Optional: If you want to enforce /app as a prefix (e.g., your Angular app is hosted under /app)
       # Uncomment this and adjust the root/try_files if needed
       # location ^~ /app {
       #     try_files $uri $uri/ /app/index.html;
       # }
   }
   

2. Fix your /etc/hosts format (if your config tool allows it):
   The auto-generated line is non-standard—hosts files should have one IP per line with associated hostnames. Update it to:

   127.0.0.1 localhost
   10.0.0.1 internalhost
   

   This avoids potential parsing issues with Nginx or other tools trying to resolve internalhost.
3. Test Angular asset access: Make sure your CSS, JS, and assets are loading by visiting http://localhost/app (or your route) in a browser, or using curl http://localhost/app to check if you get the Angular index.html.
4. Restart Nginx to apply changes:

   sudo systemctl restart nginx
   

Scenario 2: You Actually Need the /app Path to Redirect to internalhost #

If the 301 redirect was intentional (you want users hitting /app to go to internalhost), the problem is likely incomplete syntax or connectivity issues.

Fix Steps: #

1. Complete the redirect path: The truncated http://internalhost/end... will cause invalid redirects. Fill in the full target URL, like:

   location ^~ /app {
       # Use 302 for testing (avoids browser caching), switch to 301 once confirmed
       return 302 http://internalhost/your-full-endpoint;
   }
   

   Pro tip: Use $scheme to dynamically match the current protocol (HTTP/HTTPS) if needed:

   return 302 $scheme://internalhost/your-full-endpoint;
   

2. Verify internalhost is reachable: On your nginx-host, run these commands to check connectivity:

   # Test DNS resolution
   ping internalhost
   # Test if the target endpoint responds
   curl http://internalhost/your-full-endpoint
   

   If ping fails, double-check your /etc/hosts entry (the non-standard line might be causing resolution issues).
3. Clear browser cache: 301 redirects are cached permanently by browsers, so if you previously tested a broken redirect, clear your cache or use incognito mode to test the fix.
4. Restart Nginx to apply the corrected redirect rule.

Quick Troubleshooting Tips #

• Check Nginx config validity before restarting: sudo nginx -t
• View Nginx error logs for clues: sudo tail -f /var/log/nginx/error.log
• For Angular, ensure you built the app with the correct base href if hosting under a subpath: ng build --base-href /app/

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