Docker Wordpress Nginx 不提供静态文件

Question

我正在尝试使用 Docker 和 Nginx + Wordpress:fpm-alpine + Phpmyadmin + Mysql 图像 设置现有的 wordpress

Web 应用程序

按照本教程，我更改了 docker-compose.yml 文件以挂载我的 wp-content 文件。

问题是我无法让 Nginx 正确处理 wp-content 中的静态文件（js、css、图像等），

我不断收到 404 Not Found 错误，而主 .php 文件工作正常

这是我的 docker-compose 文件：

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 [email protected] --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;
        }
}

有没有办法配置 Nginx 来提供静态文件？

Answer 1

我能够通过在 Nginx 容器中绑定 wp-content 来解决问题，方法是在 docker-compose.yml 的 Nginx 部分中添加

- ./wp-content:/var/www/html/wp-content文件：

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

这是我的最终 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
      - ./wp-content:/var/www/html/wp-content
      - ./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 [email protected] --agree-tos --no-eff-email --staging -d www.mywebsite.com
    
volumes:
  certbot-etc:
  wordpress:

networks:
  network:
    driver: bridge