0

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

1 Answer 1

2

I was able to solve the problem by binding the wp-content in the Nginx container, by adding - ./wp-content:/var/www/html/wp-content in Nginx section of my docker-compose.yml file :

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

Here my final docker-compose.yml 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
      - ./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
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.