Mkcert generated rootCA on Node docker container, with Browsersync over https insecure

Question

I'm running Nginx in one container over ports 80 and 443, the later with SSL certs generated with mkcert . This works wonderfully.

In another container I'm running Node that in turn runs Gulp which in turn runs Browsersync .

My Gulp file runs in the Node container, which opens port 3000 to my local machine and proxies localhost so that: https://localhost runs from the Nginx container. https://localhost:3000 runs from the Node container with Browsersync

This works except for the fact that the node container isn't able to securely display the website via proxy.

Reading more about what might be happening with Node the certifications, I find this at mkcert

Using the root with Node.js

Node does not use the system root store, so it won't accept mkcert certificates automatically. Instead, you will have to set the NODE_EXTRA_CA_CERTS environment variable.

export NODE_EXTRA_CA_CERTS="$(mkcert -CAROOT)/rootCA.pem"

So I understand I need rootCA.pen on my Node container and that should be the end of it.

In the Dockerfile for building the node container

FROM node:12.19.1-alpine3.9

RUN npm install -g gulp-cli@2.1.0

ADD ./nginx/certs /etc/ssl
RUN export NODE_EXTRA_CA_CERTS=/etc/ssl/rootCA.pem

I grab all my certifications including the rootCA.pem file and dump them somewhere in the node container, in this case in /etc/ssl

I then set the env var of NODE_EXTRA_CA_CERTS.

Just to be safe, after going into the Node container, a checking that rootCA.pem is there, I kill the node process and run export again!

Running the gulp file:

function server(done) {
  browser.init({
    proxy: "https://nginx",
    open: false,
    https: true
  });
  done();
}

Browsersync loads and I'm shown…

[Browsersync] Proxying: https://nginx
[Browsersync] Access URLs:
 --------------------------------------
       Local: https://localhost:3000
    External: https://192.168.16.7:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------

And I can open https://localhost:3000 in the browser and browsersync works. But not without a security warning.

What am I missing?

Answer 1

For anyone having trouble with SSL while using BrowserSync, you might want to point explicitly to your custom cert and key.

browserSync( {
    proxy: "https://localhost/mysite/",
    https: {
        key: "W:/xampp/htdocs/mkcert/localhost/localhost.key",
        cert: "W:/xampp/htdocs/mkcert/localhost/localhost.crt"
    }
});

NB: I am using xampp and it's installed on W:/ drive.

You can learn more here .

HTH