DockerでWordpressの開発環境構築(テーマ開発用)

# はじめに

インフラエンジニア一年生ですが、フロントも少しは勉強してみたいと思いWordpressの開発環境を構築しました。

Dockerで作ってみるとすごく簡単で便利だったのでメモしておきます。

ちなみに環境はMacを使っております。

# docker-compose.ymlファイル作成

まずはターミナルで docker-compose.yml ファイルを作るディレクトリを作成します。場所はどこでもいいです。今回はこんな感じに作成しました。

Desktop/
　├ docker/
　　　└ wordpress

ちなみにデスクトップにファイルを作るだけなので、Finderで作っても構いません。

```
$ cd desktop
$ mkdir docker
$ cd docker
$ mkdir wordpress
```

そしたら、テキストエディタで作成したディレクトリを開きましょう。今回はVScodeで「wordpress」ディレクトリを開きます。

![スクリーンショット 2021-08-25 15.13.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837136/7363e197-beb0-28c1-636b-a641ad91250e.png)

そしたら「wordpress」配下に「docker-compose.yml」ファイルを作成します。
このファイルにコードを書いて実行すると、書いたコードにしたがってdockerコンテナ群が立ち上がってくれるので非常に便利です。

![スクリーンショット 2021-08-25 15.16.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837136/d9f3cb95-cad8-affe-1540-2e7e2a17d889.png)

「docker-compose.yml」の中身を記述していきます。今回はDocker公式の「[クィックスタート: Compose と WordPress](URL "https://docs.docker.jp/compose/wordpress.html#compose-wordpress")」を参考にしました。

![スクリーンショット 2021-08-25 16.26.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837136/b50aa08b-31f3-16c4-60e7-f2525f983880.png)


こちらソースコードです。

```yml
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」アクセスします。

![スクリーンショット 2021-08-25 15.49.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837136/bbbb5c1f-d3e1-a68f-e1eb-c2cbd9a28486.png)

ワードプレスの設定画面が表示されるので、適当に入力してダッシュボードまでいきましょう。

![スクリーンショット 2021-08-25 15.52.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837136/ed354898-9d92-5068-67a7-f85da864720b.png)

wordpressダッシュボードに来ました。そしたら、「外観」⇨「テーマ」と押して一番下までスクロールします。

![スクリーンショット 2021-08-25 15.54.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837136/3767fe5a-1eb4-6b73-d1ca-c97626827d2c.png)

壊れているテーマが存在します。これはコンテナ内の「/var/www/html/wp-content/themes/mytheme」配下に「mytheme」というディレクトリが存在していて、中身が空であるからです。

VScodeでmythemeを編集するとその内容がコンテナ内のmythemeと同期しているので、設定はリアルタイムで反映されます。VScodeで「mytheme」配下に「index.php」と「styele.css」という名前のファイルを追加します。(中身は空でOKです。)

![スクリーンショット 2021-08-25 16.29.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837136/d577a9d2-fb56-d42f-e9c9-cdc54f720296.png)

これでちゃんとしたテーマとして認識されたはずです。ワードプレスのダッシュボードに戻ってみましょう。

![スクリーンショット 2021-08-25 16.32.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837136/864c167e-a649-5d96-95e6-c0759966deba.png)

内容の変更がちゃんと反映されていますね。そしたら最後に、テーマを有効化して、「index.php」にhello world でも書いて、サイトを確認してみます。

![スクリーンショット 2021-08-25 16.34.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837136/d43ce1f6-1d6f-6c90-ad95-baf58edf9997.png)

![スクリーンショット 2021-08-25 16.34.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837136/0b660fe0-eced-518f-c121-ed68b8dc77e4.png)

ちゃんと反映されています。
これで開発が捗りますね。

やっぱりDockerは便利です。（ちなみに僕はワードプレスの開発環境構築について調べたことがないので、もしかしたらこれより便利で簡単な方法があるかもです。）

というわけで今回は、Dockerでワードプレスの開発環境を構築してみました。

どうぞよしなに。