kisse-logs!

楽しいエンジニア生活を送りたい大学生kisseの雑記ブログ。

Docker for MacとDocker ComposeでWordPressのテーマ開発環境を構築した

by · 公開 · 更新済み

こんにちは、kisseです。

Docker ComposeでWordpressのテーマ開発環境を構築したので記事にします。
クイックスタート・ガイド：Docker Compose と WordPress
こちらのページを参考にして、ローカル上にWordpressの環境を構築してみました。

やりたいこと及び対象の読者

本ブログはWordpressで書いていまして、テーマのカスタマイズをしっかり行いたいと常々思ってました。
しかし、いきなり本番環境で変更するのは論外なので、自分のPC上でテーマを作成してテストすることができる環境を作ることにしました。

「Dockerがなんとなく使える」以上のレベルの人が対象です。
私も、あんまりDocker使いこなせてないので安心してもらって大丈夫です。(???)
私の使用OSがMacOSなので、Docker for Macを使用します。
その他のOSを使ってる方は動かない可能性も考慮にいれつつ試してもらって大丈夫です。




作り方

Docker for Mac及びDocker Composeが利用できる環境であるとします。
(確か、今はDocker for Macをインストールしたら、Docker Composeを使えたと思うのですが、確認してないです。Docker for Macの公式ドキュメント)

目的の作業ディレクトリに

docker-compose.yml

というYAMLファイルを作成します。
そのファイルに以下の内容を記述します。

version: '2'
services:
  db:
    image: mysql:5.7
    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
    volumes:
      - "./.wp:/var/www/html"
    links:
      - db
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_PASSWORD: wordpress

このファイルを作成したあとに、

docker-compose up -d

を実行すると2つのコンテナが生成されます。
指定バージョンのwordpressとmysqlのDockerイメージがローカルにない場合には、ダウンロードが始まるのでしばらく待ちましょう。

コンテナが立ち上がったら、ブラウザからwordpressコンテナに接続しましょう。
localhost:8000 をブラウザに入力することで、接続することができます。
Wordpressの初期画面が出てくれば成功です。

また、作業ディレクトリにある.wpディレクトリから、wp-content/themes/に移動するとテーマが保管されています。
ここに作成したテーマを置くことによって、Wordpressの管理画面からテーマの変更が行えるようになるはずです。

今回、参考にしたサイトに倣い、ローカル上のディレクトリ名を「.」で始まる不可視ディレクトリにしてしまいましたが、面倒なので「.」つけずに通常のディレクトリにした方が良いですね。
不可視ファイルを可視化しても良いですが、ちょっと面倒な上に余計なファイル見えたりと不都合が多いので。
ローカル上のディレクトリ名を変更するには、docker-compose.yml内の

volumes:
      - "./.wp:/var/www/html"

の.wpの部分を変更すればおっけーです。
例えば

volumes:
      - "./wp:/var/www/html"

と「.」を外すだけでFinderなどで見ることができるようになります。




まとめ

Docker Composeを使って、割と簡単にWordpressテーマ開発環境を構築できます。
もし、興味がある人はやってみてください。

最後までよんでいただきありがとうございます!

参考

dockerでWordPressローカル開発環境を作りました。 docker docker WordPress WordPress
クイックスタート・ガイド：Docker Compose と WordPress

あわせて読みたい