Can't load assets in Laravel project when setting up a self-signed SSL reverse proxy with Docker

I'm trying to setup HTTPS for my dev Laravel project, as I'd like to use Facebook login (this requires HTTPS for dev environments too now)

I'm following this tutorial: https://medium.com/@oliver.zampieri/self-signed-ssl-reverse-proxy-with-docker-dbfc78c05b41

It basically says the following:

Create the self signed certificate:

openssl req -subj '/CN=localhost' -x509 -newkey rsa:4096 -nodes -keyout key.pem -out cert.pem -days 365

Find route to the host: Docker runs containers in their own sandbox, so, when the containers run in a bridged network, we need to know what is the IP address of the host (if we route to localhost or 127.0.0.1 we would proxy back into the container, instead, we need to route to the host machine)

docker network inspect bridge

=> This gives us 172.17.0.1

Now create the NginX configuration file:

server {
    listen 443;

    ssl on;
    ssl_certificate /etc/nginx/conf.d/cert.pem;
    ssl_certificate_key /etc/nginx/conf.d/key.pem;

    location / {
        proxy_pass http://172.17.0.1;
    }
}

Run the Docker container

docker run --name nginx_proxy -d -v `pwd`:/etc/nginx/conf.d -p 443:443 nginx

Last but not least I've added my created certificate in my Mac Keychain and set it to "always trust".

When I open up my (https) local site in my browser (Chrome v67), then it tells me that the certificate is valid and the website is working except for the assets.

1) I get a warning about 'insecure scripts' (my javascript files). "This page is trying to load scripts from unauthenticated sources"

2) CSS is blocked because of "mixed content"

Thanks!

via Chebli Mohamed