Nginx, Express Routing issues

Question

I have an application running behind nginx reverse proxy, the is application is running fine. The application is build using express, with ejs as template engine. But when i put in on the cloud and set it behind the proxy, issue happening.

Here is my nginx configuration:

 server{
     listen 80;
     listen [::]:80;
     error_log /var/log/nginx/reverse_proxy_error.log;
     access_log /var/log/nginx/reverse_proxy_access.log;

     # I put this to redirect traffic from / to /preview/app/
     location / {
       return 302 /preview/app/;
     }
     
     location /preview/app/{
          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 https;
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_pass http://localhost:3000/;
          access_log /var/log/nginx/app_access.log; 
          error_log /var/log/nginx/app_client_error.log;
     }

}

Here is my view template (EJS):

<div class="container d-flex align-items-center justify-content-between">
    <h1 class="logo"><a href="/">AppName.</a></h1>
    <!-- Uncomment below if you prefer to use an image logo -->
    <!-- <a href="index.html" class="logo"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
    <nav class="nav-menu d-none d-lg-block">
        <ul>
            <li class="<%= active==='home'?'active':''%>"><a href="/">Home</a></li>
            <li class="<%= active==='contact'?'active':''%>"><a href="/contact" >Contact</a></li>
        </ul>
    </nav><!-- .nav-menu -->
</div>

The issue is when I click the anchor tag (), nginx will resolve it to some kind of like $host/[PATH_IN_ANCHOR_TAG] which in my case I want it to $host/[MY_APP_PATH]/[PATH_IN_ANCHOR_TAG] for example if i click contact anchor, it will resolve to 101.x.x.x/contact not 101.x.x.x/preview/app/

My first though was double slash is happening there somewhere, so i try removing opening slash from my anchor tag, become:

<li class="<%= active==='contact'?'active':''%>"><a href="contact" >Contact</a></li>

Now its resolved nicely to the url I expect, but now I have to change all my anchor tag in my application menu ,which is too many. And also if i try running it directly to outside (without nginx), the url will also break. So i decide better to setting the nginx itself

What is wrong in my configuration anyway?

IMPORTANT NOTES

• Only default nginx.conf is left on the /etc/nginx settings
• all files on sites-available already linked to sites-enabled

Answer 1

probably stupid question, but why don't you just set in the nginx file the root location of the application?

example:

my app is in: /home/user/folder/app

so in my nginx domain file:

root /home/user/folder/app

any other re-direction via proxy via:

location / {
proxy_pass 'PATH or IP with port'
}