Nginx Question posted in
The official documentation can be found here.

Vue frontend app on subdirectory with nginx

I have a nuxt app deployed as the main website reverse proxied with nginx.
The settings look as below

location / {
    proxy_pass http://127.0.0.1:3000;
}

Now I have another vue app on same server that I want to run on a subpath e.g. https://www.app.com/dashboard

Below is my settings for nginx and vue router

location ^~ /dashboard {
    alias /srv/www/dashboard-app/dist;
    try_files $uri $uri/ /srv/www/dashboard-app/dist/index.html;
}

const router = createRouter({
  history: createWebHistory('/dashboard'),
  routes,
})

I am able to load my main dashboard when I visit /dashboard and the vue app renders fine.

However if I visit a subpath e.g. /dashboard/team it seems nginx isn’t matching my dashboard path and it passes the request to nuxt application which is on / (root) which in returns throws a 404 as there’s path that matches /dashboard/team in my nuxt app

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Seems this I was missing the trailing slash in my dashboard nginx block! Working solution as below

    location ^~ /dashboard {
    alias /srv/www/dashboard-app/dist/;
    try_files $uri $uri/ /index.html = 404;
}

  2. 0

    The last parameter of try_files can be =status_code or a uri.
    When it is a uri, it will again be matched with the defined location blocks.
    In your case it matches with the default route i.e. nuxt proxy.

    Following config should work for you.

    
server {
    listen 80;

    root /srv/www/dashboard-app/dist;

    location ~ ^/dashboard(.*) {
        # we want to remove the dashboard prefix and match the static file requests
        # or serve the /index.html route.

        try_files $1 /index.html;
    }

    location = /index.html {
        # this should not be a public url
        # this should only be served when it is requested internally
        internal;
    }

    # add any other static file extensions that you want to serve
    location ~ (.css|.js)$ {
        internal;
    }

    location / {
        # best to include this
        include proxy_params;
        proxy_pass http://127.0.0.1:3000;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search