4

I'm running DDEV nginx server on Bedrock wordpress site and trying to load snippet for Browsersync.

gulpfile.js browserSync task:

browserSync.init({
proxy: {
 target: "https://web.ddev.site"
}, 
https: {
 key: "/Users/user/Library/Application Support/mkcert/rootCA-key.pem",
 cert: "/Users/user/Library/Application Support/mkcert/rootCA.pem"
}, open:false});

Browser doesnt load snippet and print following error:

(index):505 GET https://web.ddev.site:3000/browser-sync/browser-sync-client.js?v=2.26.7 net::ERR_SSL_KEY_USAGE_INCOMPATIBLE

How can I get this two things to work together? Before DDEV I was using MAMP but DDEV has much better performance and I want to switch to this app. Thanks for help.

hexcross
  • 178
  • 8
  • Please start back at the beginning. Are you able to use a regular browser against your project? – rfay Jan 14 '20 at 13:44
  • Yes, nginx server started without problems. Everything working fine except I cannot reach browsersync script. – hexcross Jan 14 '20 at 19:26
  • 1
    Here's the question again: Are you able to use a regular browser (Chrome, for example) and access your project via https ? Have you ever before used the technique you show above with BrowserSync to access an https site? The most likely problem (assuming you can access the project with https with a different browser) is that your technique just doesn't work. Do you have a link to this technique? – rfay Jan 14 '20 at 20:15
  • Yes, I can access my project via https. I had successfully started project via ddev start and I never tried to run Browsersync via https or proxy..maybe my config is completely wrong. I think its is neccessary to bind some browsersync ports to docker, or something.. – hexcross Jan 14 '20 at 20:41
  • 1
    Oh, I see. You're doing the wrong thing entirely. You're supposed to have a key and a cert, and instead you're providing it a root CA and the root CA's key. See https://www.browsersync.io/docs/options#option-https - Does it work if you just leave the https stanza out? It wouldn't surprise me if it did, because maybe browser-sync uses the macos system CA. But the cert and key you need are in the ddev-router container. You can access them with `docker cp ddev-router:/etc/nginx/certs /tmp`, but they change whenever ddev-router is recreated. – rfay Jan 14 '20 at 21:43
  • It is working! I removed proxy option in gulpfile.js and updated path to docker certificate, which I copied to `~/tmp`. To make it perfect, it will be necessary to automate that, but for now its perfect. Thanks a lot! – hexcross Jan 15 '20 at 08:40

1 Answers1

8

The problem was bad ssl certificates file. It was necessary to use docker container certificate. Proxy option is not anymore required.

After setup ddev container, you need to copy docker certificate to some location:

docker cp ddev-router:/etc/nginx/certs ~/tmp

After that just update path to correct certificates files. My gulpfile task now looks like this:

browserSync.init({https: {
 key: "/Users/username/tmp/master.key",
 cert: "/Users/username/tmp/master.crt"
}, open:false});

Thanks @rfay for solution!

hexcross
  • 178
  • 8