Use Wordpress Behind NGINX-PROXY - with SSL

If your Wordpress Installation won't load resources via https it's because behind the Proxy/Loadbalancer etc. the traffic is handled via http, mostly because it's a secured subnet or it's on the same machine. So there is no need for encryption.

NGINX PROXY

If you're using an NGINX Proxy - I don't know why anyone won't use nginx these days ;) - youre probably sending the HTTP_X_FORWARDED_PROTO in your header. Normally Wordpress would detect an SSL connection and serve all your files via https, but since you're behind an proxy there is probably no need for an encrypted connection. So Wordpress doesn't know it should send all the resources via https.
This leaves you with a broken site, because CSS and JavaScript resources could not be loaded.

This little icon tells you that Chrome did not load unsafe sources

Above: The little shield icon tells you that chrome prevented to load resources via unencrypted http

SOLUTION

One simple solution is just to keep your backend encrypted. So just activate ssl in your Wordpress installation. What you have to do is forward all traffic from your Proxy to your Wordpress via https.

With Jwilder Nginx-Proxy you can do this like this:

VIRTUAL_PROTO=https
VIRTUAL_PORT=433

With this way Wordpress recognizes an encrypted connection and does what it can to deliver all resourced as https ... and morst importantly it writes https:// before all resources.

If you have done this step above you don't need the steps below. So just be happy it works. :)

Other way: (may still break)
You need the following code in your wp-config.php

//Load Balancer NGINX Proxy
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
    $_SERVER['HTTPS']='on';

You don't need any other rewrite rules or something else. And this works fine with:

Docker Letsencrypt Nginx Proxy Companion
and with
Jwilder Nginx-Proxy

My Wordpress still breaks.

Find out which resource causes the problem. Go to the source view of your site and just search for http:// if some CSS or JavaScript is embedded per http then you know what causes it.

Mostly common it is just a Wordpress Plugin - so just deactivate all your Plugins and turn them on one by one.

If you've found this useful please share it and leave a comment in the comment section below :)