Nginx proxy_pass to wordpress docker container

Question

Hi guys sorry if I'm making a elementary mistake but I am really lost here.

I have set up my Ubuntu 16.04 server is Nginx(Not in a docker container, running on host machine) and wordpress(In a docker container).

Docker Hub Wordpress repo: (I can't post more then two links but its the official Wordpress repo)

After some configuration, I managed to get nginx running and the wordpress container. When I access the wordpress website through the raw IP address and port it works fine. However, when I do a proxy_pass from nginx to the container, my wordpress website seems to have lost all of its css. Ironically, the page still kinda loads.

Here's an example: (Hyperlink to an image)

http://[IP Address]:51080/wp-admin/install.php

http://example.com/wp-admin/install.php

sites-available

upstream example.com {
    server localhost:51080;
}

server {
    listen  80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:51080;
    }
}

docker run command

docker run --name example.com -d -v /docker/example.com:/var/www/html wordpress

/etc/hosts (I have added the following line to the file)

[IP address] example.com

Thank you for any help!

EDIT:

/var/log/nginx/error.log - is empty (yes, I've checked, it's logging to this file)
/var/log/nginx/access.log

Log entry:

<IP Address> - - [11/Mar/2017:11:33:35 -0500] "GET /wp-admin/install.php HTTP/1.1" 200 11144 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8"

I would open the developer tools in your browser and see what URLs are 404-ing. Then, add an `access_log` and `error_log` statement in your Nginx proxy config, and also see if you're getting useful info out of those. BTW, I think your upstream config stanza is unnecessary. — Halfgaar, Mar 11 '17 at 16:30
Hi @Halfgaar, thank you for your response! I have edited the question to include both the access.log and error.log. access.log is pretty much a whole bunch of repeats so I added the last line. — kawaijoe, Mar 11 '17 at 16:40
Those repeats may be valuable. I want to see what happens to the URLs that load CSS. Are they in the log? Are they in your browser's developer tools (you can see the HTTP status of each request made). — Halfgaar, Mar 11 '17 at 16:46
@Halfgaar, I have pasted the entire access.log to a pastebin. http://pastebin.com/vbD2wh87 Errors showing in safari developer console: https://i.stack.imgur.com/MiWpc.png I might have figured out why this is happening, it may be because the client is attempting to retrieve information from the client's localhost and not the server's localhost. I'm not entirely sure how to fix that though. Thank you for your help! — kawaijoe, Mar 11 '17 at 17:21
@Halfgaar I have replaced the localhost with the server IP address and it works now. Thank you so much! Out of curiosity, this method requires me to expose the docker port to the internet. Is there a way to achieve the same result using docker's internal networking or localhost? — kawaijoe, Mar 11 '17 at 17:26
You didn't fix it, you worked around it. The way you originally intended it to work is right. I'm not quite sure what's going on. Perhaps add a `/` to your proxypass directive? You should not have to expose the docker port to the internet. — Halfgaar, Mar 12 '17 at 09:04
@Halfgaar Ya kinda figured that it was a workaround. Apparently, you need to add the home and site url for wordpress. Thank you for your help! — kawaijoe, Mar 12 '17 at 09:28

score 8 · Accepted Answer · answered Mar 11 '17 at 18:24

It may help to set some headers so that the upstream knows the correct frontend server name. See this document for more.

For example, I use:

proxy_set_header    Host                $host;
proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
proxy_set_header    X-Forwarded-Proto   $scheme;
proxy_set_header    Accept-Encoding     "";
proxy_set_header    Proxy               "";

Also, check that your HOME and SITEURL settings are correct. See this document for details.

Nginx proxy_pass to wordpress docker container

1 Answers1

Linked