Docker环境下NGINX容器无法正确路由WordPress静态资源

VPS上运行主NGINX容器及多个Docker服务，各服务子域名配置正常。新增Bitnami WordPress容器后，站点可正常响应，但静态资源（JS/CSS/图片等）持续返回403 Forbidden错误。

相关配置 #

WordPress docker-compose配置 #

version: '3.1'

services:
  blog-wp:
    image: docker.io/bitnami/wordpress:6
    container_name: blog-wp
    restart: always
    env_file:
      - .env
    volumes:
      - 'wordpress_data:/bitnami/wordpress'
    depends_on:
      - blog-db
    environment:
      - ALLOW_EMPTY_PASSWORD=yes
      - WORDPRESS_DATABASE_HOST=${DB_HOST}
      - WORDPRESS_DATABASE_PORT_NUMBER=${DB_PORT}
      - WORDPRESS_DATABASE_USER=${DB_USERNAME}
      - WORDPRESS_DATABASE_NAME=${DB_DATABASE}

主NGINX容器配置文件 #

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

    server_name blog.domain.com;

    return 301 https://blog.domain.com$request_uri;
}

server {
    listen [::]:443 ssl http2;
    listen 443 ssl http2;

    server_name blog.domain.com;

    ssl_certificate /etc/nginx/ssl/live/domain.com/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/live/domain.com/privkey.pem;

    root /var/www/html;
    index index.php;

    location ~ /.well-known/acme-challenge {
         allow all;
         root /var/www/html;
    }

    location / {
        try_files $uri $uri/ @apache;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        allow all;
        expires max;
        log_not_found off;
    }

    location ~ ^/.user.ini {
        deny all;
    }

    location ~*  .(svg|svgz)$ {
        types {}
        default_type image/svg+xml;
    }

    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }

    location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }

    location @apache {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $host;
        proxy_pass http://blog-wp:8080;
    }

    location ~[^?]*/$ {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $host;
        proxy_pass http://blog-wp:8080;
    }

    location ~ .php$ {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $host;
        proxy_pass http://blog-wp:8080;
    }

    location ~/. {
        deny all;
        access_log off;
        log_not_found off;
    }
}

核心问题 #

主NGINX的静态资源location块尝试读取本地/var/www/html目录下的文件，但这些静态资源实际存储在WordPress容器内，且该location块未配置代理到WordPress容器，导致返回403。

修复步骤 #

1. 修改静态资源location配置
   给静态资源相关的location块添加代理规则，指向WordPress容器：

   location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
       allow all;
       expires max;
       log_not_found off;
       proxy_set_header X-Real-IP  $remote_addr;
       proxy_set_header X-Forwarded-For $remote_addr;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header Host $host;
       proxy_pass http://blog-wp:8080;
   }
   
   location ~*  \.(svg|svgz)$ {
       types {}
       default_type image/svg+xml;
       proxy_set_header X-Real-IP  $remote_addr;
       proxy_set_header X-Forwarded-For $remote_addr;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header Host $host;
       proxy_pass http://blog-wp:8080;
   }
   

2. 验证WordPress容器内文件权限
   进入容器检查静态资源目录权限，确保所有者为daemon（Bitnami容器默认运行用户）：

   docker exec -it blog-wp ls -l /bitnami/wordpress/wp-content/uploads
   

   若权限异常，执行修复命令：

   docker exec -it blog-wp chown -R daemon:daemon /bitnami/wordpress
   

3. 确认WordPress站点URL配置
   登录WordPress后台，在设置->常规中确认WordPress地址(URL)和站点地址(URL)均为https://blog.domain.com，避免静态资源生成错误路径。

4. 重载NGINX配置
   修改主NGINX配置后，执行重载命令生效：

   docker exec -it <主NGINX容器名称> nginx -s reload
   

内容的提问来源于stack exchange，提问作者Félix Daniel