document running nuxt dev server behind nginx + SSL + proxy

[quartze]

Environment

---

• Operating System: Linux
• Node Version: v16.11.1
• Nuxt Version: 3-3.0.0-27235451.ece0e01
• Package Manager: Yarn
• Bundler: Webpack
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Describe the bug

Trying to start development server for people on nginx engine. When i'm starting with cli nuxt, i'm getting infinite reloads on page with error WebSocket connection to wss://example.com:24678/_nuxt/ failed`. Is there any chance to start nuxt with proxy on nginx?

Reproduction

Just cloned default project.

Additional context

No response

Logs

Nothing in nuxt3

[quartze]

I think it can be prevented if we change connections from domain to ip address.
Anyway, can i modify it now in nuxt.config.js?

[lustremedia]

How does your nginx config look like?

[quartze]

@lustremedia

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
}

http {

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;


	include /etc/nginx/mime.types;
	default_type application/octet-stream;


	ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	gzip on;

server {                                                                                                         
        listen 80;
        listen 443 ssl;
        server_name dev.domainname.pl;

        gzip on;
        gzip_types	text/plain application/xml;
        gzip_proxied    no-cache no-store private expired auth;
        gzip_min_length 1000;

        # This is a cache for SSL connections
        ssl_session_cache shared:le_nginx_SSL:1m;
        ssl_session_timeout 1440m;

        rewrite ^/(.*)/$ /$1 permanent;

        location / {
                proxy_set_header        Host $host;
                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 $scheme;
                proxy_redirect          off;
                proxy_buffering         on;
                proxy_cache_valid	200 1d;
                proxy_cache_use_stale   error timeout invalid_header updating http_500 http_502 http_503 http_504;

                proxy_pass              http://localhost:3000;
                proxy_read_timeout	1m;
                proxy_connect_timeout   1m;
        }
}
	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}

[Diizzayy]

@quartze A few changes have to be made to allow development to run smoothly as expected behind your NGINX Proxy with SSL.

Everything below was tested and works properly, so let me know if you encounter any issues.

1. Modify your nuxt config to set vite's hmr clientPort to 443(default https / ssl port) and path to "hmr/".
   Explanation: The vite server uses port 24678 for HMR by default, we are not going to change this.
   Setting clientPort to 443 will allow us to then use NGINX to proxy the request back to vite.

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        protocol: "wss",
        clientPort: 443,
        path: "hmr/",
      },
    },
  },
});

2. Modify the NGINX conf for you site
   Firstly, web sockets require HTTP/1.1, so the following is required in either your server or location block

proxy_http_version 1.1; # required
proxy_set_header Upgrade $http_upgrade; # required
proxy_set_header Connection "upgrade"; # required

Add location block to match the hmr path /hmr that we set in step 1.

location /_nuxt/hmr/ {
        proxy_pass http://localhost:24678;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
}

@quartze I went ahead and modified your server block as needed:
ps: I also made substantial improvements to your gzip compression, you should now get much faster load times ⚡️.

server {                                                                                                         
    listen 80;
    listen 443 ssl;
    server_name dev.domainname.pl;

	gzip on;
	gzip_disable "msie6";
	gzip_vary on;
	gzip_proxied any;
	gzip_comp_level 6;
	gzip_buffers 16 8k;
	gzip_http_version 1.1;
	gzip_min_length 256;

	gzip_types
		application/atom+xml
		application/geo+json
		application/javascript
		application/x-javascript
		application/json
		application/ld+json
		application/manifest+json
		application/rdf+xml
		application/rss+xml
		application/xhtml+xml
		application/xml
		font/eot
		font/otf
		font/ttf
		image/svg+xml
		text/css
		text/javascript
		text/plain
		text/xml;

    # This is a cache for SSL connections
    # ssl_session_cache shared:le_nginx_SSL:1m;
    # ssl_session_timeout 1440m;

    rewrite ^/(.*) /$1 break;

    location / {
        proxy_set_header        Host $host;
        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 $scheme;
        proxy_redirect          off;
        proxy_buffering         on;
        proxy_cache_valid	200 1d;
        proxy_cache_use_stale   error timeout invalid_header updating http_500 http_502 http_503 http_504;

        proxy_pass              http://localhost:3000;
        proxy_read_timeout	1m;
        proxy_connect_timeout   1m;
    }

    location /_nuxt/hmr/ {
        proxy_pass http://localhost:24678;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

[quartze]

@Diizzayy working perfectly. Thanks for rewriting my code.
Can you add this to docs?

[bubooon]

Hey, I had the same issue and this helped me.
Makes sense to create a guide page with this setup similar to the previous version.

[Diizzayy]

@quartze @bubooon having this setup added to the docs is a good idea. I'll get started on a PR.

[wstee]

Trying to start production server.The nuxt throw an error when i let http redirect to https on nginx.

[ivan-mihalic]

Hi, I had the same issue with docker. I have nginx as proxy for https
here is my nginx config (I am not the author, my colleague made it)
port 80 is served by default so I have proxy for 443 and 24678 (WS)
if you forced ws protocol on https, then browser throws error due to trying communicate to unsecured endpoint from secured

https-proxy.conf

server {
    listen 443 ssl http2;
    server_name _;

    location / {
        proxy_pass http://app:80;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    ssl_protocols TLSv1.2;

    ssl_certificate     /var/https-proxy-cert.cert;
    ssl_certificate_key /var/https-proxy-cert.key;

    access_log /dev/stdout;
    error_log /dev/stderr;
}

server {
    listen 24678 ssl http2;
    server_name _;

    location / {
        proxy_pass http://app:24678;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    ssl_protocols TLSv1.2;

    ssl_certificate     /var/https-proxy-cert.cert;
    ssl_certificate_key /var/https-proxy-cert.key;

    access_log /dev/stdout;
    error_log /dev/stderr;
}

and nuxt.config.js

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        protocol: 'wss',
      },
    },
  }
});