PhpMyAdmin behind reverse proxy (with docker) shows blank page in browser

Viewed 1219

So, I spent an hour or so to solve a problem, which I solved a year ago and did not remember. For this reason, I am showing the solution here for myself (in another year :-) and for everybody else, who has the same problem.

The setup is like this:

  • PhpMyAdmin
  • Docker
  • nginx

Docker-Compose file:

phpmyadmin:
  image: phpmyadmin/phpmyadmin:latest
  container_name: k3635013_phpmyadmin
  restart: always
  environment:
    MYSQL_ROOT_PASSWORD: <your PW here>
    PMA_HOST: k3635013_db
    PMA_ABSOLUTE_URI: https://phpmyadmin.domain.com/

Wrong nginx file:

server {
    listen 443 ssl;
    client_max_body_size 5900M;
    server_name phpmyadmin.domain.com;
    server_tokens off;
    ssl_certificate /etc/letsencrypt/live/phpmyadmin.domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/phpmyadmin.domain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

   location / {
        resolver 127.0.0.11 valid=30s;
        set $upstream k3635013_phpmyadmin;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://$upstream:80/;
    }
}

The problem, when you open https://phpmyadmin.domain.com in your browser:

  • Blank page
  • If you look at the console, you see that the index page is fetched correctly, which triggers to loads JavaScript files. But instead of the correct JavaScript files, the start page is loaded again. Also, Chrome tells you, a HTML file was loaded instead of JS. (Some error about a wrong mime type or so).
1 Answers

And here the solution/answer:

Correct nginx file:

server {
    listen 443 ssl;
    client_max_body_size 5900M;
    server_name phpmyadmin.domain.com;
    server_tokens off;
    ssl_certificate /etc/letsencrypt/live/phpmyadmin.domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/phpmyadmin.domain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

   location / {
        resolver 127.0.0.11 valid=30s;
        set $upstream k3635013_phpmyadmin;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://$upstream:80;
    }
}

You notice the little and subtile difference?

proxy_pass http://$upstream:80;

instead of

proxy_pass http://$upstream:80/;

So one slash too much at the end, which totally stops PhpMyAdmin from loading correctly. Remove the slash, restart nginx and it works!

PS: You wonder about resolver and $upstream ? With this setup, you can start nginx even when the docker containers are not running. If you use the hostnames directly in the proxy_pass statments, the docker containers must run, bevor starting nginx.

Related