Local domain and SSL certificates not working with dev server.

[michaelalhilly]

Describe the bug

I'm trying to serve a Vue.js website from a Docker container using a custom domain and SSL cert. It looks like Vite is not serving the SSL cert and the browser is blocking the site with the error: NET::ERR_CERT_AUTHORITY_INVALID. This is because the browser is not receiving the provided SSL cert and is using the browser default example.org self signed cert.

This is currently working with Vue CLI using the same Docker image and run options.

Here are my Vite server settings:

host: '0.0.0.0',
port: 443,
https: {
  key: readFileSync(ssl_key),
  cert: readFileSync(ssl_cert)
},
proxy: {
  '/socket.io': {
    target: 'ws://mydomain.test',
    ws: true
  }
}

Server terminal output:

vite v2.9.9 dev server running at:

> Local:    https://localhost:443/
> Network:  https://172.17.0.2:443/

This is working with Vue CLI using the following:

port: 443,
host: '0.0.0.0',
https: true,
key: readFileSync(ssl_key),
cert: readFileSync(ssl_cert),
public: 'mydomain.test'

Vue CLI server terminal output:

App running at:
- Local:   https://localhost:443/ 
- Network: https://mydomain.test/

Is there a way to change "Network" in Vite as we can in Vue CLI?

Reproduction

https://github.com/michaelalhilly/ViteCustomDomain

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (6) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 6.78 GB / 7.77 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^2.3.1 => 2.3.3 
    vite: ^2.9.5 => 2.9.9

Used Package Manager

npm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[jaybe78]

Getting same issue ! The cert provided is not used by the server

[torenware]

There appears to be two pieces of this problem:

1. The docs on server.hmr are not helpful. Not sure how to figure out what the correct settings are for a reverse proxy using SSL. This needs to be much better documented.
2. Getting a reverse proxy to handle web sockets is itself a difficulty. I've made some headway using nginx.

I'm willing to help with the documentation piece, and I have a good set up for playing with vite and reverse proxies that I'd post if there is someone to look it over.

[nikhilshinday]

Hey @torenware - did you ever resolve this for yourself?

[torenware]

Hey @torenware - did you ever resolve this for yourself?

Kinda. I wrote up how to put vite behind a secure proxy, which covers a lot of this.

I did not directly configure Vite to use a specific X509 key pair, since I don't generally do development that way. But AFAIK it would work.