Nuxt•10mo ago

Using Nuxt3 behind Apache proxy?

Hi, has anyone experience on getting Nuxt to work behind an Apache proxy? I've tried anything I can think of but HMR keeps giving errors in my console. Part of my Virtualhost definition looks like this:

  <Location  ~ ".*">
      # .* is a wildcard for any location
      ProxyPreserveHost On
      ProxyPass http://tapp_nodejs.docker.dev:3000
      ProxyPassReverse http://tapp_nodejs.docker.dev:3000
  </Location>
  <Location  ~ "/_nuxt/ws">
    RewriteEngine on
    RewriteCond ${HTTP:Upgrade} websocket [NC]
    RewriteCond ${HTTP:Connection} upgrade [NC]
    RewriteRule .* "wss://tapp_nodejs.docker.dev:24678/$1" [P,L]

    ProxyPreserveHost On
    ProxyPass https://tapp_nodejs.docker.dev:24678
    ProxyPassReverse https://tapp_nodejs.docker.dev:24678  
  </Location>

  <Location  ~ ".*">
      # .* is a wildcard for any location
      ProxyPreserveHost On
      ProxyPass http://tapp_nodejs.docker.dev:3000
      ProxyPassReverse http://tapp_nodejs.docker.dev:3000
  </Location>
  <Location  ~ "/_nuxt/ws">
    RewriteEngine on
    RewriteCond ${HTTP:Upgrade} websocket [NC]
    RewriteCond ${HTTP:Connection} upgrade [NC]
    RewriteRule .* "wss://tapp_nodejs.docker.dev:24678/$1" [P,L]

    ProxyPreserveHost On
    ProxyPass https://tapp_nodejs.docker.dev:24678
    ProxyPassReverse https://tapp_nodejs.docker.dev:24678  
  </Location>

And to handle wss on with Nuxt I have this in nuxt.config:

vite: {
    server: {
      hmr: {
        path: "ws",
        port: 24678,
        server: {
          https: {
            key: readFileSync('docker/certificates/docker.dev.key'),
            cert: readFileSync('docker/certificates/docker.dev.crt'),
            enableTrace: true
          }
        }
      }
    }
  },

vite: {
    server: {
      hmr: {
        path: "ws",
        port: 24678,
        server: {
          https: {
            key: readFileSync('docker/certificates/docker.dev.key'),
            cert: readFileSync('docker/certificates/docker.dev.crt'),
            enableTrace: true
          }
        }
      }
    }
  },

Apache responds with: https: attempt to connect to 172.19.0.9:24678 (tapp_nodejs.docker.dev:24678) failed

1 Reply

Hendrik JanOP•10mo ago

I finally made it: I started with a simple setup of just Nuxt3, then built Docker-Compose around it with Apache. Simple, no https/ssl to keep it simple. After this I'll have to add ssl, but I'm already happy with this step without ssl: nuxt.config.ts:

export default defineNuxtConfig({
  devtools: { enabled: true },
  vite: {
    server: {
      hmr: {
        path: 'ws'
      }
    }
  }
})

export default defineNuxtConfig({
  devtools: { enabled: true },
  vite: {
    server: {
      hmr: {
        path: 'ws'
      }
    }
  }
})

Apache httpd-vhosts.conf:

<VirtualHost _default_:80>    
  ServerName topp.docker
  ServerAlias www.topp.docker

  CustomLog /dev/stdout combined
  ErrorLog  /dev/stderr
  SetOutputFilter DEFLATE
  
  <Location  ~ ".*">
      # .* is a wildcard for any location
      ProxyPreserveHost On

      ProxyPass http://topp_nodejs.docker:3000
      ProxyPassReverse http://topp_nodejs.docker:3000
  </Location>
  <Location  ~ "/_nuxt/ws">
      # .* is a wildcard for any location
      ProxyPreserveHost On

      # Proxy both ws and http by placing ws before http as described in this documentation:
      # https://httpd.apache.org/docs/trunk/mod/mod_proxy_wstunnel.html
      ProxyPass ws://topp_nodejs.docker:3000/_nuxt/ws
      ProxyPass http://topp_nodejs.docker:3000/_nuxt/ws upgrade=websocket
      ProxyPassReverse ws://topp_nodejs.docker:3000/_nuxt/ws
  </Location>
</VirtualHost>

<VirtualHost _default_:80>    
  ServerName topp.docker
  ServerAlias www.topp.docker

  CustomLog /dev/stdout combined
  ErrorLog  /dev/stderr
  SetOutputFilter DEFLATE
  
  <Location  ~ ".*">
      # .* is a wildcard for any location
      ProxyPreserveHost On

      ProxyPass http://topp_nodejs.docker:3000
      ProxyPassReverse http://topp_nodejs.docker:3000
  </Location>
  <Location  ~ "/_nuxt/ws">
      # .* is a wildcard for any location
      ProxyPreserveHost On

      # Proxy both ws and http by placing ws before http as described in this documentation:
      # https://httpd.apache.org/docs/trunk/mod/mod_proxy_wstunnel.html
      ProxyPass ws://topp_nodejs.docker:3000/_nuxt/ws
      ProxyPass http://topp_nodejs.docker:3000/_nuxt/ws upgrade=websocket
      ProxyPassReverse ws://topp_nodejs.docker:3000/_nuxt/ws
  </Location>
</VirtualHost>

By setting vite.server.hmr.path = "ws" I can now use a location in the apache vhost config. As I was not able to get apache rewrite to work, as suggested in many online solutions, using a location was a workaround that works quite well. I do have a reason. The team that is managing the servers for us provides all servers with Apache. Mainly for PHP. They cannot be convinced to setup Nginx just for this special case. (I'm happy they let me build a non-PHP website already). We want our Docker environment to closely resemble our server setup. Thats why I use Apache. And the dev-task also inside Docker (and build as well to check if that works). Apache in front of it in another container to provide https an OpenId-Connect login. And the OIDC identity provider in yet another Docker container. As you can see quite a complex stack that would require quite some work to rebuild in a different way. Is there another way? 😊

Gaming

Programming

Using Nuxt3 behind Apache proxy?