HMR does not work with proper SSL certificates #6937
Comments
|
|
FYI: This might be a duplicate of #1653Experiencing the same issue here. Seems to come and go between reloads in my case, these are some of the patterns I've noticed if it helps anyone:
All in all, I'm thinking it could be some sort of timing mismatch between Vite's response/dispatch and ESBuild finishing. It also flares up when we have errors or under-performance from our linting plugins (TSLint/ESLint), which again affects timing which might play a role here. I am going to spend some time looking at the net internals to see if I can find anything else of interest, but I'm not a network engineer so can't promise much lol. Some potential workarounds/solutions:
const viteBaseUri = 'https://baseuri.test/';
// I got this solution from another issue, unfortunately, I was unable to find the original issue I found it in. But unless I'm completely misunderstanding I believe this essentially forces Node's HTTP server to downgrade to HTTP 1.1
// There's also some additional solutions I haven't tried that are more oriented specifically towards HMR config here: https:/vitejs/vite/issues/1653
export default defineConfig({
server: {
proxy: {
[viteBaseUri]: viteBaseUri
}
}); |
|
I was not able to reproduce it with Vite 2.8.3 and 2.9.9. Steps I did. I'm using Windows + Chrome.
|
|
Was able to reproduce this with the vite-plugin-mkcert as well on a react project. Adding the above config from @CristianHG2 resolved this for me. |
|
i get the same issue with nestjs as api, vite+vue as frontend and nginx as proxy for both, after some research i get it work, i develop all those with docker and docker-compose, here is my setting, if someone needed. // docker-compose.yaml
services:
api:
build:
context: .
dockerfile: ./packages/api/Dockerfile
target: base
image: "api:base"
restart: on-failure
volumes:
- ./:/src
ports:
- 3000:3000
depends_on:
- mongo
command: yarn workspace api start:dev
backend:
build:
context: .
dockerfile: ./packages/backend/Dockerfile
target: base
image: "backend:base"
restart: on-failure
volumes:
- ./:/src
ports:
- 3001:3001
depends_on:
- api
command: yarn workspace backend dev
frontend:
build:
context: .
dockerfile: ./packages/frontend/Dockerfile
target: base
image: "frontend:base"
restart: on-failure
volumes:
- ./:/src
ports:
- 3002:3002
depends_on:
- api
command: yarn workspace frontend dev
mongo:
image: "mongo"
restart: on-failure
volumes:
- ./docker/mongo/conf:/etc/mongo
- ./docker/mongo/data:/data/db
- ./docker/mongo/init:/docker-entrypoint-initdb.d:ro
ports:
- 27017-27019:27017-27019
environment:
MONGO_INITDB_ROOT_USERNAME: XXX
MONGO_INITDB_ROOT_PASSWORD: XXX
MONGO_INITDB_DATABASE: blog
command: --auth -f /etc/mongo/mongod.conf
nginx-api:
image: "nginx"
restart: on-failure
volumes:
- ./docker/nginx-api/conf:/etc/nginx
- ./docker/nginx-api/keys:/etc/nginx/keys
- ./docker/nginx-api/html:/usr/share/nginx/html
- ./docker/nginx-api/logs:/var/log/nginx
ports:
- 8080:80
- 4430:443
depends_on:
- api
nginx-backend:
image: "nginx"
restart: on-failure
volumes:
- ./docker/nginx-backend/conf:/etc/nginx
- ./docker/nginx-backend/keys:/etc/nginx/keys
- ./docker/nginx-backend/html:/usr/share/nginx/html
- ./docker/nginx-backend/logs:/var/log/nginx
ports:
- 8081:80
- 4431:443
depends_on:
- backend
nginx-frontend:
image: "nginx"
restart: on-failure
volumes:
- ./docker/nginx-frontend/conf:/etc/nginx
- ./docker/nginx-frontend/keys:/etc/nginx/keys
- ./docker/nginx-frontend/html:/usr/share/nginx/html
- ./docker/nginx-frontend/logs:/var/log/nginx
ports:
- 8082:80
- 4432:443
depends_on:
- frontend// packages/frontend/vite.conf.ts
...
server: {
host: true,
port: env.VITE_PORT as unknown as number,
hmr: {
clientPort: 4432,
path: '/wss'
}
}
...// docker/nginx-frontend/conf/conf.d/default.conf
server {
listen 80;
listen [::]:80;
server_name localhost;
return 301 https://$host:4432$request_uri;
}
server {
listen 443 ssl;
listen [::]:443 ssl;
server_name localhost;
ssl_certificate /etc/nginx/keys/fullchain.cer;
ssl_certificate_key /etc/nginx/keys/romenote.com.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
#access_log /var/log/nginx/host.access.log main;
location / {
# proxy_set_header HOST $host;
# proxy_set_header X-Forwarded-Proto $scheme;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header Access-Control-Allow-Origin *;
# proxy_pass_request_headers on;
# add_header Strict-Transport-Security "max-age=0;";
proxy_pass http://frontend:3002;
}
location /wss {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_pass http://frontend:3002;
}
}
|
|
I have just found that in order for Vite dev server to work in a docker container I needed to edit the files in the container directly then it will auto update on save, |
|
Closing as this wasn't able to reproduce and there isn't enough information. FYI Container related comments are not related to this issue. |
Describe the bug
I created a ZeroSSL certificate for the development environment because most browsers disabled http access to any domain other than localhost.
vite.config.ts
Reproduction
This is reproducible
System Info
Used Package Manager
yarn
Logs
Validations
The text was updated successfully, but these errors were encountered: