はじめに
インフラエンジニア一年生ですが、フロントも少しは勉強してみたいと思いWordpressの開発環境を構築しました。
Dockerで作ってみるとすごく簡単で便利だったのでメモしておきます。
ちなみに環境はMacを使っております。
docker-compose.ymlファイル作成
まずはターミナルで docker-compose.yml ファイルを作るディレクトリを作成します。場所はどこでもいいです。今回はこんな感じに作成しました。
Desktop/
├ docker/
└ wordpress
ちなみにデスクトップにファイルを作るだけなので、Finderで作っても構いません。
$ cd desktop
$ mkdir docker
$ cd docker
$ mkdir wordpress
そしたら、テキストエディタで作成したディレクトリを開きましょう。今回はVScodeで「wordpress」ディレクトリを開きます。
そしたら「wordpress」配下に「docker-compose.yml」ファイルを作成します。
このファイルにコードを書いて実行すると、書いたコードにしたがってdockerコンテナ群が立ち上がってくれるので非常に便利です。
「docker-compose.yml」の中身を記述していきます。今回はDocker公式の「クィックスタート: Compose と WordPress」を参考にしました。
こちらソースコードです。
version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
volumes:
- ./mytheme:/var/www/html/wp-content/themes/mytheme
volumes:
db_data:
変更したのは、27,28行目あたりです。これを記述すると、ローカルのディレクトリとコンテナの中身が同期してくれます。
今回は、docker-compose.ymlがあるディレクトリ配下の「mytheme」というディレクトリと、コンテナ内の「/var/www/html/wp-content/themes/mytheme」を同期させています。
ちなみにコンテナ内にディレクトリが存在しない場合は勝手にディレクトリを作成してくれます。
ディレクトリを同期させるのがポイントで、VScodeで「mytheme」内にファイルを作成することで、オリジナルテーマを簡単に開発できます。
Dockerコンテナ起動
そしたらDockerコンテナを起動させましょう。ターミナルを開いて先ほど作成した「docker-compose.yml」ファイルがあるディレクトリに移動します。
$ pwd
/Users/username/desktop/docker/wordpress
$ ls
docker-compose.yml
同期させる予定の、「mytheme」ディレクトリを作成します。
$ mkdir mytheme
$ ls
docker-compose.yml mytheme
そしたら「docker-compsoe.yml」ファイルを使ってDockerコンテナ群を立ち上げます。ちなみにDocker環境がない人はDockerをインストールしておいてください。
「-d」オプションでコンテナをバックグラウンド実行します。また、dockerイメージがないとイメージのダウンロードから始まりとても時間がかかるので気長に待ちましょう。
$ docker-compose up -d
ワードプレスの設定とディレクトリ同期の確認
コンテナ群が立ち上がったら、「localhost:8000」アクセスします。
ワードプレスの設定画面が表示されるので、適当に入力してダッシュボードまでいきましょう。
wordpressダッシュボードに来ました。そしたら、「外観」⇨「テーマ」と押して一番下までスクロールします。
壊れているテーマが存在します。これはコンテナ内の「/var/www/html/wp-content/themes/mytheme」配下に「mytheme」というディレクトリが存在していて、中身が空であるからです。
VScodeでmythemeを編集するとその内容がコンテナ内のmythemeと同期しているので、設定はリアルタイムで反映されます。VScodeで「mytheme」配下に「index.php」と「styele.css」という名前のファイルを追加します。(中身は空でOKです。)
これでちゃんとしたテーマとして認識されたはずです。ワードプレスのダッシュボードに戻ってみましょう。
内容の変更がちゃんと反映されていますね。そしたら最後に、テーマを有効化して、「index.php」にhello world でも書いて、サイトを確認してみます。
ちゃんと反映されています。
これで開発が捗りますね。
やっぱりDockerは便利です。（ちなみに僕はワードプレスの開発環境構築について調べたことがないので、もしかしたらこれより便利で簡単な方法があるかもです。）
というわけで今回は、Dockerでワードプレスの開発環境を構築してみました。
どうぞよしなに。