Docker部署WordPress时Nginx无法加载wp-content静态文件求助

问题描述 #

使用Docker、Nginx、wordpress:fpm-alpine、PhpMyAdmin、MySQL镜像部署现有WordPress应用，参考教程修改docker-compose.yml挂载本地wp-content目录后，PHP主文件运行正常，但wp-content中的静态文件（JS、CSS、图片等）始终返回404 Not Found错误。

现有配置文件 #

docker-compose.yml

version: '3'

services:
  # Database
  db:
    image: mysql:5.7
    volumes:
      - ./db_data:/var/lib/mysql
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: "${MYSQL_ROOT_PASSWORD}"
      MYSQL_DATABASE: "${MYSQL_DATABASE}"
      MYSQL_USER: "${MYSQL_USER}"
      MYSQL_PASSWORD: "${MYSQL_PASSWORD}"
    networks:
      - network

  # phpmyadmin
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: unless-stopped
    ports:
      - '8080:80'
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: "${MYSQL_ROOT_PASSWORD}"
      UPLOAD_LIMIT: 1000M
    networks:
      - network

  # Wordpress
  wordpress:
    depends_on: 
      - db
    image: wordpress:fpm-alpine
    restart: unless-stopped
    env_file: .env
    environment:
      - WORDPRESS_DB_HOST=db:3306
      - WORDPRESS_DB_USER=$MYSQL_USER
      - WORDPRESS_DB_PASSWORD=$MYSQL_PASSWORD
      - WORDPRESS_DB_NAME=$MYSQL_DATABASE
    volumes:
      - wordpress:/var/www/html
      - ./wp-content:/var/www/html/wp-content
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini 
    networks:
      - network

  webserver:
    depends_on:
      - wordpress
    image: nginx:1.15.12-alpine
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - wordpress:/var/www/html
      - ./nginx-conf:/etc/nginx/conf.d
      - certbot-etc:/etc/letsencrypt
    networks:
      - network

  certbot:
    depends_on:
      - webserver
    image: certbot/certbot
    volumes:
      - certbot-etc:/etc/letsencrypt
      - wordpress:/var/www/html
    command: certonly --webroot --webroot-path=/var/www/html --email myemail@domain.com --agree-tos --no-eff-email --staging -d www.mywebsite.com
    
volumes:
  certbot-etc:
  wordpress:

networks:
  network:
    driver: bridge

nginx.conf

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

        server_name mywebsite.com www.mywebsite.com;

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

        # redirect to HTTPS
        location / {
                rewrite ^ https://$host$request_uri? permanent;
        }
}

server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name mywebsite.com www.mywebsite.com;

        index index.php index.html index.htm;

        root /var/www/html;

        server_tokens off;
         client_max_body_size 75M;

        ssl_certificate /etc/letsencrypt/live/mywebsite.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/mywebsite.com/privkey.pem;

        include /etc/nginx/conf.d/options-ssl-nginx.conf;

        add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-XSS-Protection "1; mode=block" always;
        add_header X-Content-Type-Options "nosniff" always;
        add_header Referrer-Policy "no-referrer-when-downgrade" always;
        add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always;
        # add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
        # enable strict transport security only if you understand the implications

        location / {
                try_files $uri $uri/ /index.php$is_args$args;
        }

        location ~ \.php$ {
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass wordpress:9000;
                fastcgi_index index.php;
                include fastcgi_params;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                fastcgi_param PATH_INFO $fastcgi_path_info;
        }

        location ~ /\.ht {
                deny all;
        }

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

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

解决方案 #

1. 给Nginx容器挂载本地wp-content目录 #

当前问题核心是：wordpress服务将本地./wp-content挂载到了自身容器的/var/www/html/wp-content，但webserver（Nginx）服务仅挂载了wordpress卷，无法访问本地的wp-content目录。

修改docker-compose.yml中webserver服务的volumes，添加本地wp-content的挂载：

webserver:
  # 其他配置保持不变
  volumes:
    - wordpress:/var/www/html
    - ./wp-content:/var/www/html/wp-content  # 新增此行，让Nginx能访问本地静态文件
    - ./nginx-conf:/etc/nginx/conf.d
    - certbot-etc:/etc/letsencrypt

2. 修复文件权限（关键步骤） #

本地挂载的wp-content目录权限可能与Nginx容器内的运行用户不匹配，导致无法读取文件。执行以下命令调整本地目录权限：

chown -R 82:82 ./wp-content

注：Alpine镜像中www-data用户的UID是82，与Debian/Ubuntu系的33不同，需使用该UID匹配容器内权限。

3. 重启容器使配置生效 #

docker-compose down && docker-compose up -d

额外验证 #

你的Nginx配置中已经包含了静态文件的处理规则（location ~* \.(css|gif|ico|jpeg|jpg|js|png)），且root路径设置正确（/var/www/html），这部分无需修改。重启后即可正常访问wp-content内的静态文件。

内容的提问来源于stack exchange，提问作者Listoun developer