Post/Code

HomeAboutUsesNow

WordPress, Docker and the REST API.

Brad Traversy has a great introductory video to running WordPress, MySQL and phpMyAdmin within a Docker container. In short, he shows you how to quickly setup a docker-compose file to spin up the official Docker images for WordPress, MySQL and phpMyAdmin.

To my mind, the payoff for using Docker for WordPress is that, once you have Docker setup on your machine, the famous 5-minute WordPress install is now down to as long as it takes the docker-compose up command to run!

No more downloading and unzipping folders, no manual installation of WAMP or XAMPP or any of the rest of it... You just run run one command and boom, you are ready to roll!

From there, I advise you to take a look at Brad's follow-up video about using the WordPress REST API with React. In it, he runs you through the basics of setting up the WP REST API and then shows you how to setup and use JWT Authentication, Custom Post Types and Custom Fields to customise your data. From there, he builds some very bare bones React components to illustrate usage with Axios and React-Router-Dom. The fantastic thing about this is that, if you have a little bit of WordPress knowledge, and are accustomed to working with React (or Angular, Vue) you will feel right at home in starting to build-out a front-end to use WordPress as a headless CMS.

I really enjoyed these two videos. All up they should only take you and hour or two to work through and they really open up your eyes to a more flexible and modern way of working with WordPress.

If you are interested, here is the docker-compose.yml:

version: "3"

services:
  # database
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    networks:
      - wpsite
  # phpMyAdmin
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - "8081:80"
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
    networks:
      - wpsite
  # WordPress
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      # 8000 on localhost, to 80 on container
      - "8080:80"
    restart: always
    # ./ on local machine maps to /var/www/html on Apache, which is where WP files are stored
    volumes: ["./:/var/www/html"]
    environment:
      # 'db' is service above. 3306 is default port on MySQL
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: ${WORDPRESS_DB_USER}
      WORDPRESS_DB_PASSWORD: ${WORDPRESS_DB_PASSWORD}
    networks:
      - wpsite
networks:
  wpsite:
volumes:
  db_data:

In future, I will look to add the React front-end to this docker-compose setup so that the React client can also get up and running with the docker-compose up command.

Also note, in the example above, I have used environment variables for the users and passwords. As much as possible, I find it easier to use environment variables like this where I can. I find it simpler to use the same patterns and it (mostly) keeps me from having to think about where I defined what.

The env vars should be populated into a .env files on the same directory level as the docker-compose file:

MYSQL_ROOT_PASSWORD=password_goes_here
MYSQL_DATABASE=database_goes_here
MYSQL_USER=user_goes_here
MYSQL_PASSWORD=password_goes_here
WORDPRESS_DB_USER=user_goes_here
WORDPRESS_DB_PASSWORD=password_goes_here

One thing I do need to look into however is how to use environment variables with WordPress and Git repos. In the Brad Traversy video linked, he adds the JWT secret into the wp-config.php file. There are several other secrets in this file which should not be committed as is to a public repo in my mind. I added the wp-config.php file to my .gitignore file for the meantime, but that is not a solution in my mind...