How do I fix nginx reverse proxy to a wordpress docker redirecting port for the user?

Viewed 2332

So I have a raspberry pi web server I have been experimenting with, which runs nginx to serve multiple sites and such. I want to run wordpress in a docker container as a blog, but I am having issues configuring the nginx+docker wordpress setup correctly.

Here is my docker-compose.yml:

version: "3"
services:
  db:
    image: hypriot/rpi-mysql
    restart: always
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: <password>
    networks:
      - wp

  wordpress:
    depends_on:
      - db
    image: wordpress
    restart: always
    volumes:
      - ./:/var/www/html/wp-content
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: <password>
    ports:
      - 8082:80
    networks:
      - wp

networks:
  wp:

volumes:
  db_data:

Here is my current nginx .conf for example.com:

server {
    client_max_body_size 32M;

    # Listen HTTP
    listen 80;
    server_name www.example.com example.com;

    # Redirect HTTP to HTTPS
    return 301 https://$host$request_uri;

}

server {
    client_max_body_size 32M;
    
    # Listen HTTP
    listen 443 ssl;

    server_name example.com www.example.com;

    # SSL config
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
   
    # does not fix the issue
    port_in_redirect off;

    # Proxy Config
    location / {

        # My attempts at fixing the port issue (did not work in any combination) 
        proxy_bind $host:443;
        proxy_redirect off;
        port_in_redirect off;
        absolute_redirect off;
        proxy_set_header Location $host:443;
        proxy_set_header Host $http_host:443;

        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://localhost:8082/;
    
        # an extra try despite my 8082 port not being open
        proxy_redirect https://example.com:8082/ https://example.com/;
    }

    # testing and looking at just the /wp-login.php "works" but without any of the content
    location ~ \.php {
        proxy_pass http://127.0.0.1:8082;
    }

}


My issue: upon visiting my example.com domain, I am getting redirected to example.com:8082 and not getting any of the content and I've had a lot of issue trying to figure out a way of fixing it. I have also tried just using http on port 80 but that doesn't make a difference (unless I am on the local network, for which it gets the files locally)

Is there a simple thing that I am missing from the above nginx setup?

Is there a way to make the docker forward it on a different virtual port?

1 Answers

Ok so it looks like the problem was not so much with the docker/nginx setup, but with the wordpress. I made the mistake of filling out the initial wordpress setup over [rpi.local.ip.address]:8082 and this was saved in the config.

I ended up just resetting the volumes with docker-compose down --volumes, though this deletes all your data.

The real answer is the solution the the problem found here: Docker: I can't map ports other than 80 to my WordPress container

I also made some modifications to the files, so the ones that work are below:


If these do not work for you either, then you can:

  • reset the container with docker-compose down --volumes,
  • remove ports: - 8082:80
  • forward to the ip address found by docker inspect [id-of-wordpress-container] with proxy_pass http://[docker-ip]:80/;

Then set up the wordpress install, and only after re-add ports: - 8082:80 as this ip can change after a reboot


docker-compose.yml

version: "3"
services:
  db:
    image: mysql/mysql-server:8.0
    restart: always
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: VNz5EHiZkec9mn
    networks:
      - wp
    command: '--default-authentication-plugin=mysql_native_password'
   
  wordpress:
    depends_on:
      - db
    image: wordpress
    restart: always
    volumes:
      - ./wp-content/:/var/www/html/wp-content
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: VNz5EHiZkec9mn 
    networks:
      - wp
    ports:
      - 8082:80

networks:
  wp

volumes:
  db_data:


/etx/nginx/sites-available/example.com.conf

There is an added redirect in case the 301 redirect was cached in the browser

server {
    client_max_body_size 32M;

    # Listen HTTP
    listen 80;
    server_name www.example.com example.com;

    # Redirect HTTP to HTTPS
    return 301 https://$http_host$request_uri;

}

server {
    listen 8082 ssl;
    server_name example.com www.example.com;

    # SSL config
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    return 301 https://scienceangles.com;
}

server {
    client_max_body_size 32M;
    
    # Listen HTTP
    listen 443 ssl;
    
    server_name example.com www.example.com;

    # SSL config
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    ssl_stapling on;
    ssl_stapling_verify on;
   
    port_in_redirect off;

    # Proxy Config
    location / {
    proxy_pass http://localhost:8082;
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    }

}
Related