How to Run C# ASP.NET Core 2.1 and Node.js with Different Ports in Nginx?

Question

So I've installed Nginx, Node.js and C# ASP.NET Core 2.1 on my virtual server (virtualbox) and currently running on each separate port.

Node.js running on localhost:3000.

.NET Core running on localhost:5000.

But then I want to make custom URI on this kind of case. If a user accesses the root site (only "/"), then it will go to the Node.js application. And if a user accesses the another page (in this case if a user access "/api") then I want a user to go into .NET Core application.

Now if I access the root site, it works properly. An example I visit 192.168.56.2 (this is my virtual server IP), then the browser will open Node.js application. But if I access 192.168.56.2/api, it returns 404 error code.

Here's my /etc/nginx/sites-available/default configuration :

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm;

    root /var/www/html;

    server_name _;

    # Front-end : Node.js
    location / {
           proxy_pass           http://localhost:3000;
           proxy_http_version   1.1;
           proxy_set_header     Upgrade $http_upgrade;
           proxy_set_header     Connection 'upgrade';
           proxy_set_header     Host $host;
           proxy_cache_bypass   $http_upgrade;
    }

    # Back-end : C# ASP.NET Core 2.1
    location /api/ {
        proxy_pass              http://localhost:5000;
        proxy_http_version      1.1;
        proxy_set_header        Upgrade $http_upgrade;
        proxy_set_header        Connection keep-alive;
        proxy_cache_bypass      $http_upgrade;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        X-Forwarded-Proto $scheme;
    }
}

On my C# code, after I was generated the code with running dotnet new webapp -o mywebsite, I'm not changing anything except the Properties/launchSettings.json (I remove the localhost:5001 into only localhost:5000).

Did I misconfigure on the Nginx ? Or should I change something in my C# code ?

Answer 1

This is because you need to have the proper mapping between the front-end endpoints and the backend endpoints.

If your /api endpoint doesn't expect the /api prefix within your ASP.NET application, then you must include a trailing slash for its http://nginx.org/r/proxy_pass specification, which will cause nginx to create a mapping of the /api/ on the frontend with the / on the backend, e.g.:

location /api/ {
    proxy_pass http://localhost:5000/; # trailing slash is important for mapping!
}

More details are available on a ServerFault QA pair.