Search code examples
nginxbrowser-syncddev

Cant connect Browsersync with DDEV nginx server, because SSL Error

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.

Solution

  • 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!