Nuxt 3 Production in Apache2 with subdirectory

Question

I have a Ubuntu 18.04 server running with Node/NodeJS and P2M installed. I want to deploy Nuxt 3 project into a subdirectory /app/. On my /var/www/html there is a other project (client-side).

What I have done, running nuxt build and in my nuxt.config.js the following attributes:

... other config
server: {
  port: 8080,
},
router: {
  base: "/app/",
},
app: {
  base: "/app/",
  head: {
    meta: [],
    link: [],
  },
},
vite: {
  base: "/app/",
  plugins: [svgLoader(), dynamicImport()],
},
....

I put everything from .output into into /var/www/html/app

Into this folder I run the following pm2 start ecosystem.config.js -- --port 8080

In my apache config I have the following:

ProxyPass /app/ http://localhost:8080/
ProxyPassReverse /app/ http://localhost:8080/

The ecosystem.config.js look like this:

module.exports = {
  apps: [
    {
      name: 'app',
      port: '8080',
      cwd: '/var/www/html/app',
      exec_mode: 'cluster',
      instances: 'max',
      script: './server/index.mjs'
    }
  ]
}

On my website https://example.net/app I see the app but it is trying to get the _nuxt files in example https://example.net/_nuxt/entry.06c30429.js. I don't want this on the root folder but in https://example.net/app/_nuxt/entry.06c30429.js so I can have multiple projects. Now I just place a _nuxt folder into /var/www/html but this will only be limited on 1 SSR project. Not very ideal. I tried many things including in nuxt.config.js specify buildDir: "app",

Also the router is not working correctly. Navigating directly to https://example.net/app I see the app. But on page refresh it navigates to https://example.net/. The issue above is more important for me to solve.

I have no clue how to solve it as I have tried many different things.

If I have this in nuxt.config.js

app: {
  baseURL: "/app/",
  head: {
    meta: [],
    link: [],
  },
},

I am getting a error 404 Cannot find any path matching /.

If I head to /app/app strangely I see the page but error collecting the _nuxt files example https://example.net/app/_nuxt/vue.f36acd1f.a74ff25b.js. These do exist. Adding this in Apache config won't work eiter. Everything is very strange.

ProxyPass /app/ http://localhost:8080/
ProxyPassReverse /app/ http://localhost:8080/

<Location "/app/_nuxt/">
    ProxyPass !
</Location>

Alias /app/_nuxt/ /var/www/html/app/_nuxt
<Directory /var/www/html/app/_nuxt>
    Options -Indexes
    AllowOverride None  
    Order allow,deny  
    Allow from all
</Directory>

PM2 logs

Project: Nuxt 3.8.2 & Vue 3.3.8

Answer 1

To have Nuxt playing nicely with an Apache reverse proxy with a URL that contains a subdirectory, you need two things:

1. the app.baseURL item in your nuxt.config.js set to your subdirectory, e.g. /app:

    export default defineNuxtConfig({
       //...
       app: {
           baseURL: "/app"
       },
       //...
    )}

2. The following in your Apache configuration:

    ProxyPass /app http://localhost:8080/app
    ProxyPassReverse /app http://localhost:8080/app

Note the "/app" at the end has been added, and I have "/app" as the second argument to ProxyPass and ProxyPassReverse, rather than "/app/". (I have seen some users have issues with the trailing /)

This way, Nuxt is serving the application at localhost:8080/app, and Apache is passing example.url/app to that same location. Requests to Nuxt assets should then show up as being sent to example.url/app/_nuxt/<asset> and should resolve correctly.

I also have no configuration specific to nuxt under my <Location /app> tag (only authentication related configurations), so try without that as well.