Serving WordPress static files from Docker container

Question

I have a WordPress Docker container and using nginx as reverse proxy on host.

WP container serving WordPress on the port 32776 and my nginx configuration is like this on host machine:

nginx configuration (host)

map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
}
server {
...
    location /blog {
                    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_pass http://127.0.0.1:32776;
                    proxy_http_version 1.1;
                    proxy_set_header Upgrade $http_upgrade;
                    proxy_set_header Connection $connection_upgrade;
            }
...
}

nginx configuration INSIDE Docker

server {
    listen 0.0.0.0:80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.php index.html index.htm;

    server_name _;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini

        fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
        fastcgi_index index.php;
        error_log ... error;
        access_log ...;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

When I browse to domain.com/blog it's working but without style and javascript files. Because when I go to domain.com/blog/wp-content/themes/twentyseventeen/style.css it's automatically redirecting to domain.com/blog/wp-content/themes/twentyseventeen/style.css/ and according to my access logs it's trying to find domain.com/blog/wp-content/themes/twentyseventeen/style.css/index.php

How can I set up my Nginx configuration files properly?

Answer 1

When using nginx reverse proxy.. You should put your static files within that nginx container like

location /static{
    alias /usr/src/app/static;
}

I would recommend to use volumes or multi-build-staging for this setup