nginxnginx-configportforwarding

Second nginx route doesn't work when there are two NextJs applications hosted


My nginx configuration looks like this

server {
listen 80;
server_name host_server;
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;
}

location /admin/ {
        proxy_pass http://localhost:3001;
        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;
  }

}

The / routing forwards to port 3000 and /admin routing forwards to port 3001. The first routing seems to work, but the second routing doesnt work. What I noticed is when I switch the two forwarding rules (i.e / routing forwards to port 3001 and /admin routing forwards to port 3000) still the /admin forwarding doesnt work but the other does. This confirms there is no problem in both the applications but a problem in nginx forwarding. Specifically in the /admin forwarding.

Thanks in advance


Solution

  • Answer 1

    This is the answer I came up with

    server {
    listen 80;
    server_name host_server;
    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;
    }
    
    location /admin/ {
            rewrite ^/admin/(.*) /$1 break;
            proxy_pass http://localhost:3001;
            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;
      }
    
    }
    

    The change here is adding the rewrite block. The rewrite directive is used to strip the /admin/ prefix from the requested URI before passing it to the upstream server specified in the proxy_pass directive. This allows the backend server to handle the request as if it were directly requested without the /admin/ prefix.

    Answer 2

    Another approach you can take is adding a base path for the second nextJs application as described here

    module.exports = {
      basePath: '/admin',
    

    After that you can use the original nginx config with a small change

    server {
    listen 80;
    server_name host_server;
    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;
    }
    
    location /admin {
            proxy_pass http://localhost:3001;
            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;
      }
    
    }
    

    The small change would be instead of /admin/ replace it with /admin. In the second approach you will not need the rewrite block. For me the second solution proved to be the best fit