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

Question

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

Answer 1

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