Dockerを使用してWordPress開発環境を構築する

当サイトはWordPressで構築しているのですが、ローカル開発環境が存在せずテーマを編集するときはサーバー上でファイルを直接編集しています。これでは思い切った変更がやりづらいのでDockerを使用して開発環境を作ってみました。

事前準備

• Get Docker | Docker
• Install Compose – Docker

DockerおよびDocker Composeをあらかじめインストールしておく必要があります。

Docker Composeを使って開発環境を起動する

複数コンテナを同時に起動することができるツール「Docker Compose」を使って、WordPressの開発環境に必要なコンテナをまとめて起動します。これを行うにはプロジェクトルートにdocker-compose.ymlが必要です。

version: '2'
services:
  db:
    image: mysql:5.7
    # ./.data/db（ホストOS）にデータが保持される
    volumes:
      - "./.data/db:/var/lib/mysql"
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    links:
      - db
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_PASSWORD: wordpress

上記に示したdocker-compose.ymlはクイックスタート・ガイド：Docker Compose と WordPress — Docker-docs-ja 1.12.RC ドキュメントで公開されているものです。

注目すべきはservices dbのvolumesの- "./.data/db:/var/lib/mysql"という記述です。Dockerのコンテナは削除すると、データも消えてしまうのでMySQLコンテナ上のデータをホストOS側で保持するようになっています。

# -dをつけるのはデーモン化（バックグラウンド起動）するため
$ docker-compose up -d
Starting dockerwordpress_db_1
Starting dockerwordpress_wordpress_1

ターミナルにてdocker-compose.ymlを設置したディレクトリに移動し、コマンドを実行します。WordPressとMySQLのDockerイメージをダウンロードし、コンテナを起動します。

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
eddb5fd6a26d        wordpress:latest    "docker-entrypoint.sh"   3 minutes ago       Up 3 minutes        0.0.0.0:8000->80/tcp   dockerwordpress_wordpress_1
4bc36056596b        mysql:5.7           "docker-entrypoint.sh"   3 minutes ago       Up 3 minutes        3306/tcp               dockerwordpress_db_1

$ docker psコマンドを実行すると、WordPressとMySQLのコンテナが起動していることが確認できます。

コンテナが起動したら、ブラウザでhttp://localhost:8000またはhttp://<docker-machine ip>:8000にアクセスします。WordPressの設定画面が表示されるので案内に従って操作を行います。

Tips

ホストOS側で編集したテーマファイルをWordPressコンテナに反映させたい

WordPressのテーマ作成で便利なTipsです。ホストOS側でファイルを編集し、すぐに変更を確認できます。

これを行うにはWordPressコンテナのファイル群をホストOS側で保持する必要があります。docker-compose.ymlを編集すればOKです。

# ./html（ホストOS）にデータが保持される
volumes:
  - "./html:/var/www/html"

WordPressコンテナでは/var/www/htmlにWordPressがインストールされて、関連するファイル群が設置されています。docker-compose.ymlのwordpressにvolumes設定を追記して、WordPressに関連するファイル群をホストOSのhtmlフォルダで保持するよう設定します。

.
├── index.php
├── license.txt
├── readme.html
├── wp-activate.php
├── wp-admin
├── wp-blog-header.php
├── wp-comments-post.php
├── wp-config-sample.php
├── wp-config.php
├── wp-content
├── wp-cron.php
├── wp-includes
├── wp-links-opml.php
├── wp-load.php
├── wp-login.php
├── wp-mail.php
├── wp-settings.php
├── wp-signup.php
├── wp-trackback.php
└── xmlrpc.php

マウントがうまくいくとホストOS側のhtmlフォルダはこのようにファイルが表示されます。wp-content/themes以下にテーマフォルダを設定すると、WordPressコンテナに同期されます。あとはホストOS側でテーマファイルを編集し、http://localhost:8000にアクセスすると変更が反映されています。

WordPressコンテナに入る

$ docker exec -it dockerwordpress_wordpress_1 bash

上記コマンドでWordPressコンテナに入ることができます。ファイルの場所やディレクトリ構成を確認するとき便利です。

トラブルシューティング

ERROR: error pulling image configurationが発生した

$ docker-compose upしたあとにこのようなエラー発生する場合があります。Dockerイメージのダウンロードエラーなので、$ docker pull wordpress:latest、$ docker pull mysql:5.7といった感じで各イメージを個別にダウンロードしましょう。

さいごに

とりあえずWordPressの開発環境は完成したので、当サイトで使っているWordPressテーマのリファクタリングを進めていきたいと思います。