Cannot access static files of WordPress docker container over HTTPS

Question

I am trying to create a WordPress container over HTTPS, I have Apache running on the VPS and using it as a proxy to route requests to WordPress container.

I've managed to access the container to load WordPress Installation page over HTTPS but CSS/JS files won't load because they are requested over HTTP I don't know why the redirect is not working with these files, I did other websites like this.

Here is a print of the output

If I access the files on ' http://example.com/wp-admin/css/install.min.css?ver=5.2.2 ' the redirect works fine (print of the css file over HTTPS after accesing the link above)

This is the redirect for 80 to 443 on the domain.

<VirtualHost *:80>
    ServerName example.com
    ServerAdmin admin@example.com
    Redirect permanent / https://example.com/
</VirtualHost>

Here is the proxy on 443:

<IfModule mod_ssl.c>
    <VirtualHost *:443>
        ServerName example.com
        ProxyPreserveHost On

        ProxyPass / http://172.20.0.100/ 
        ProxyPassReverse / http://172.20.0.100/


        SSLEngine on

        SSLCertificateFile /fullchain.pem
        SSLCertificateKeyFile /privkey.pem
    </VirtualHost>
</IfModule>

WordPress container listens only on port 80

Here is the docker-compose file:

version: '3'

services:
  wpdb:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
        MYSQL_ROOT_PASSWORD: pass
        MYSQL_DATABASE: wordpress
        MYSQL_USER: wordpres_admin
        MYSQL_PASSWORD: pass

  wordpress:
    depends_on:
     - wpdb
    image: wordpress:latest

    networks:
      default:
        ipv4_address: 172.20.0.100
    restart: always
    environment:
        WORDPRESS_DB_HOST: wpdb:3306
        WORDPRESS_DB_USER: wordpres_admin
        WORDPRESS_DB_PASSWORD: pass
volumes:
    db_data: {}

networks:
 default:
   external:
     name: router_default

How can i solve this problem?

Answer 1

I found the solution, looks like WP is already configured to be used through a proxy with SSL and there is no need to change anything in the WP container or WP settings, all that needs to be done is to rewrite the header of the request with :

RequestHeader set X-Forwarded-Proto "https"

The updated proxy config looks like this:

<IfModule mod_ssl.c>
<VirtualHost *:443>
    ServerName example.com

    <IfModule headers_module>
        RequestHeader set X-Forwarded-Proto "https"
    </IfModule>

    ProxyPreserveHost On

    ProxyPass / http://172.20.0.100/ 
    ProxyPassReverse / http://172.20.0.100/


    SSLEngine on

    SSLCertificateFile /fullchain.pem
    SSLCertificateKeyFile /privkey.pem
</VirtualHost>

For more info: https://wordpress.org/support/article/administration-over-ssl/#using-a-reverse-proxy and https://webmasters.stackexchange.com/questions/97005/setting-x-forwarded-proto-under-apache-2-4