CODEWITHSUNDEEP
vue.jsnginxvuejs2nuxt.jsnginx-reverse-proxy
sandiprb
sandiprb

Reputation: 502

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

Upvotes: 1

Views: 4002

Answers (2)

sandiprb
sandiprb

Reputation: 502

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;
}

Upvotes: 1

Vinay Karanam
Vinay Karanam

Reputation: 41

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;
    }
}

Upvotes: 1

Related Questions