Docker Wordpress Nginx doesn't serve static files

Question

I'm trying to setup my existing wordpress web app using Docker and Nginx + Wordpress:fpm-alpine + Phpmyadmin + Mysql images

By following this tutorial, I've changed the docker-compose.yml file to mount my wp-content files.

The problem is that I can't get Nginx to properly process static files in wp-content (js, css, images..etc),

I keep getting a 404 Not Found error, while the main .php files are working fine

This is my docker-compose file:


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

Here is my nginx.conf file :


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;
        }
}

Is there a way I can configure Nginx to serve static files?

Docker Wordpress Nginx doesn't serve static files

Answers (1)

Related Questions

Docker Wordpress Nginx doesn&#39;t serve static files

Answers (1)

Related Questions

Docker Wordpress Nginx doesn't serve static files