Dockerを使用してWordPress開発環境を構築する
当サイトはWordPressで構築しているのですが、ローカル開発環境が存在せずテーマを編集するときはサーバー上でファイルを直接編集しています。これでは思い切った変更がやりづらいので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テーマのリファクタリングを進めていきたいと思います。
この記事をシェアする
この記事と同じカテゴリーの記事
GulpとBrowsersyncを使ってSassを快適に書く環境を構築する
Dockerを使用してWordPress開発環境を構築する
ソースコードをハイライト表示するJSライブラリ highlight.jsにAtomのテーマが追加
JavaScriptで縦長画像を判定して縮小表示を行う方法
WordPressの記事一覧ページでカテゴリー表示を色分けする方法
この記事を書いた人
naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。