How to get HTTPS working locally?

[abrichr]

Hello,

Thank you for putting this template together.

We are using it to build a mobile web app. This web app needs to connect to the device's camera. We would like to accomplish this using VinceG/vue-web-cam#45, but as per that issue, the page needs to be running in https in order for this to work.

It seems to me that the documentation for getting this to run with https assumes that this is happening on a VPS. What is the simplest way to get this to run with https locally?

[lesourcil]

Im not using Swarm and I'm exactly trying to figure out the samething. No matter what i change in docker-compose for treafik, it doesn't work.

Still searching ...

[abrichr]

Here's an extremely hacky workaround using https://github.com/rchampourlier/tunnelss. Assuming your development server's LAN IP is 192.168.0.98, and you want to access it with https on iOS:

sudo gem install tunnelss
touch ~/.pow/192.168.0
echo "export POW_DOMAINS=98" > ~/.powconfig 
sudo tunnelss 192.168.0.98:443 localhost:80

Now https://192.168.0.98 proxies to http://localhost, and serves a certificate that is good enough for iOS Safari.

(You will also need to set VUE_APP_DOMAIN_DEV=192.168.0.98 in frontend/.env.)

The main drawback of this is that you need to restart the frontend via docker-compose every time you make a change, since vue-cli-service serve --https only generates a certificate for localhost, which won't work if you're accessing it over a LAN. To work around this, we can use tunnelss again:

sudo tunnelss 192.168.0.98:8080 localhost:8080

(This will also require adding https://192.168.0.98:8080 to BACKEND_CORS_ORIGINS in .env.)

Now you can access https://192.168.0.98:8080 on iOS Safari with hot reloading.

It would be great if there was a supported way to get https working locally!

[haviduck]

tried setting https true in vue config?

[abrichr]

@haviduck can you please clarify what you are referring to more specifically? Which vue config?

[haviduck]

i havent tried it myself, but id try changing up the envs.
https://github.com/tiangolo/full-stack-fastapi-postgresql/blob/490c554e23343eec0736b06e59b2108fdd057fdc/%7B%7Bcookiecutter.project_slug%7D%7D/frontend/src/env.ts#L10

and on serve you can try the various vue cli options like --host and --port

https://github.com/tiangolo/full-stack-fastapi-postgresql/blob/490c554e23343eec0736b06e59b2108fdd057fdc/%7B%7Bcookiecutter.project_slug%7D%7D/frontend/package.json#L6

so "bla bla serve --host 127.0.0.1 --port 443

if This is for development, id keep it simple and Just do chrome://flags/#allow-insecure-localhost

theres also this

https://github.com/tiangolo/full-stack-fastapi-postgresql/tree/master/%7B%7Bcookiecutter.project_slug%7D%7D#development-in-localhost-with-a-custom-domain

[tiangolo]

In case anyone comes back to this, HTTPS certificates are attached to a domain, that is what they certify, so there wouldn't be a straightforward way to have proper HTTPS certificates for localhost, there could be some tricks around it but not a "proper" thing. For example:

• Creating a self-signed certificate and making the backend (or Traefik) use it. And making the client trust it (which it wouldn't by default).
• Creating a domain that points to localhost, e.g. localhost.mysuperdomain.com pointing in the DNS records to 127.0.0.1, and then setting up the HTTPS certificates by doing a Let's Encrypt DNS challenge (writing stuff to the DNS records instead of using HTTP). And then using those local certificates. They would have to be manually udpated with the same mechanism every time they expire (3 months, I think?)