同一服务器与域名下运行多Node应用的配置方案咨询

Great question—splitting a monolith into frontend and backend apps is a smart move, and configuring Nginx to route traffic between them is straightforward once you know the pattern. Let's walk through exactly what you need to do:

Step 1: Assign Separate Ports to Frontend and Backend #

First, make sure your two apps are running on distinct local ports:

• Keep your backend API running on its original 8080 port (no need to change this if it's already working).
• Run your frontend app on a new port—let's say 3000 (this could be any unused port; if you're using a framework like React/Vue, their dev servers default to 3000/8080, just pick one that's free). If you're serving static files directly, use something like http-server to host them on 3000.

Step 2: Configure Nginx to Route Requests #

The core idea is to have Nginx act as a reverse proxy, sending static frontend requests to your frontend port, and API requests to your backend port. Here's a complete Nginx server block example:

server {
    listen 80;
    server_name your-domain.com; # Replace with your actual domain or server IP

    # Handle frontend static assets and SPA routes
    location / {
        # Option 1: Proxy to a frontend dev server (for development)
        proxy_pass http://localhost:3000;
        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;

        # Option 2: Serve static files directly (for production, e.g., React/Vue's dist folder)
        # root /var/www/frontend/dist;
        # try_files $uri $uri/ /index.html; # Critical for SPA routing (prevents 404 on refresh)
    }

    # Handle all API requests (adjust the path if your API uses a different prefix)
    location /api {
        proxy_pass http://localhost:8080/api; # Note: If your backend doesn't use /api prefix, use http://localhost:8080/ instead
        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;

        # Optional: Add CORS headers if you run into cross-origin issues (unlikely with same domain)
        # add_header Access-Control-Allow-Origin *;
    }
}

Key Notes to Avoid Pitfalls #

• SPA Routing: If your frontend is a single-page app (React, Vue, Angular), don't forget the try_files line in the static file option—it ensures that deep links (like /dashboard) redirect to index.html instead of returning a 404.
• Proxy Path Matching: The trailing slash in proxy_pass matters! If your backend API doesn't use the /api prefix, change proxy_pass http://localhost:8080/api; to proxy_pass http://localhost:8080/;—this tells Nginx to strip the /api prefix before sending the request to the backend.
• Test and Reload: After editing your Nginx config, always validate it with nginx -t to catch syntax errors, then reload Nginx with nginx -s reload to apply changes.

Final Checks #

• Make sure both your frontend and backend services are running and accessible locally (test with curl http://localhost:3000 and curl http://localhost:8080/api/your-endpoint).
• If your server has a firewall, ensure ports 80 (and 443 if using HTTPS) are open—you don't need to open 3000/8080 to the public since Nginx is proxying internally.

That's it! With this setup, users accessing your root domain will get the frontend, and any requests to /api will be routed to your backend API seamlessly.

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