Local WordPress Development with Docker and Docker Compose part 2

In my previous post i went through some basics on how to get started with WordPress and Docker Compose This time I’ll continue with some tooling and tips and tricks that will make your setup work better.

Use extra tools and packages

Often you would want to use additional packages not installed in the base docker image.

Create Dockerfile, extend the base image and install our needed tools, for example WP-CLI

FROM wordpress:php7.2-fpm

# Install wp-cli
RUN curl -o /bin/wp-cli.phar https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
RUN chmod +x /bin/wp-cli.phar
RUN cd /bin && mv wp-cli.phar wp

# Install sockets for PHP
RUN docker-php-ext-install sockets

Modify our docker-compose.yml to build or container.

  wordpress:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: myapp-wordpress

Use docker-compose up -d --force-recreate --build when you make changes to the Dockerfile

php.ini

Often you want change the defaults for some php.ini directives you can set to configure your PHP setup. for example upload_max_filesize to allow larger uploads in wp-admin.

Create config/php.ini and add:

file_uploads = On
memory_limit = 512M
upload_max_filesize = 128M
post_max_size = 128M
max_execution_time = 600
client_max_body_size =  128M

In our WordPress service in docker-compose.yml mount a volume

    volumes:
      - ./config/php.ini:/usr/local/etc/php/conf.d/php.ini

Cache volumes

To improve the file performance, you can add :cached flags to your volumes. I’m only using them on larger mounts. Don’t put them on databases, because you want realtime data.

    volumes:
      - ./src:/var/www/html:rw,cached

Read more

Serve missing media from the production server

This is a nice little nginx tip.

When working on a website locally, it can become quite tedious to pull down all media from a production environment. Often I’d like to have a copy of the production database locally, but just an empty or tiny uploads folder. At all depends on what kind if site you’re working on of course.

Using this nginx location directives we can display live site images in our development site.

Edit our nginx/wordpress_ssl.conf

    location ~* \.(png|jpe?g)$ {
        expires 24h;
        log_not_found off;
        try_files $uri $uri/ @production;
    }

    location @production {
        resolver 8.8.8.8;
        proxy_pass https://mydomain.com/$uri;

    }

Read more

Let me know if you have any questions! Also checkout Part 1 and my example repo