備忘録）docker-composeでwordpress環境作る【MAC】

# はじめに
今まで業務はlocal（local by flywheel）のソフトでwordpressを触っていましたが、
最近異なる本番環境のwordpressを運用でいじることが多いためそれぞれの環境(php・phpmyadmin・wordpress)のバージョンに合わせてローカル環境でもすぐあったもので作業できる状態にしたかったので、今回docekr-composeでwordpress環境を構築し使うことにしました

# 概要
Docker(Docker Desktop for mac)をインストールする。
docker-compoceでwordpress環境を構築


【実行環境】
macOS Big sur 11.6
プロセッサ：2.7 GHz デュアルコアIntel Core i5

# Dockerインストール
https://matsuand.github.io/docs.docker.jp.onthefly/desktop/mac/install/#:~:text=Docker%20Desktop%20%E3%81%AE%20Mac%20%E3%81%B8%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E5%AE%9F%E8%A1%8C,Docker%20%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

上記からシステム要件に合っているか確認し、
合ったものをインストールします。
今回私の環境が10.15以降でintelチップのmacなのでDocker4.5.0を**intelチップのMac**ボタンからインストールしました

インストールし、Dockerを起動させると下記のように権限を求められるかもなので、その場合はokをクリックしてパスワードを入力![スクリーンショット 2022-04-24 13.04.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702325/98d6894e-15e6-a0c7-5ec2-b5eb87ac42e4.png)
他手順は上記サイトをスクロールするとわかりやすく書いてあるので省略します

## 備考
Dockerの使い方は「Containers / Apps」に
コンテナが何もない状態の時に表示される
```
docker run -d -p 80:80 docker/getting-started
```
をターミナルなどで実行して一度触れてみると、
少し入りやすい気がしました
（表示されるのは英語なのでgoogle翻訳で日本語に変換）

## Dockerを詳しく知るために参考サイト
Dockerと仮想化ソフトの違いや仕組みを理解する

https://tech-lab.sios.jp/archives/18811

コンテナとイメージの違いを理解する

https://and-engineer.com/articles/YaSPjRIAACAAkhMI

# docker-composeでwordpress環境を構築
DockerではイメージのライブラリはDocker hubからインストールして使います
wordpress環境もDocker hub上に上がっているwordpressの公式が
公開してくれているものを使うことになります
![スクリーンショット 2022-04-24 15.38.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702325/f765e18e-b8a4-ddf9-70b7-b8f3dc2ff319.png)

>docker-composeとは複数のコンテナを定義し実行する Docker アプリケーションのためのツールです

より詳しく知りたい方は下記を参考

https://docs.docker.jp/compose/overview.html

Docker Desktopをインストールが完了すると、
一緒にdocker-composeは使えるようになっていると思います（下記で確認）
```:ターミナル
docker-compose -v 
> docker-compose version 1.29.2, build 5becea4c
```

まずプロジェクト用の任意ディレクトリを生成します
```:ターミナル
mkdir project
```

そのディレクトリ内に「docker-compose.yml」ファイルを作成します
今回Gitの運用も考えていたので、こちらを参考にさせていただきました。

https://note.com/pikari_kamakura/n/n081f71c50685

今回は下記のバージョンの設定環境を用意してます
・mysql→5.7
・wordpress→5.8
・php及びwebサーバー→-php7.3-apache

バージョンを指定したい場合はdocker hubの各公式ページの
**Supported tags and respective Dockerfile links**
部分から指定のバージョンを選択します
もし指定のバージョンがない場合は**Tagsタブ**から欲しいバージョンを検索します

![スクリーンショット 2022-04-24 22.56.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702325/01f90701-6e44-7d45-207d-6029cef3f0f3.png)


```:docker-compose.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:5.8-php7.3-apache　#ここでバージョン指定
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    volumes: 
      - ./wp-content:/var/www/html/wp-content/
volumes:
   db_data:
```
ymlファイルを設定後下記のコマンドでdocker-compose.ymlを実行
※docker-composeはディレクトリ内で実行しないと起動しないので注意
```:project/
docker-compose up -d
```
これでportsで設定した「localhost:8000」をブラウザで開くとwordpressが立ち上がります。
終了する際は下記のコマンドでボリュームともにコンテナを削除します
※イメージは残ります
```:project/
docker-compose down -v
```
ただプラグインの「All-in-One WP Migration」ではなく、今回はphpmyadminから
エクスポートしてきたsqlをインポートしてプラグインの「velvet blues update urls」で書き換えて本番環境を持って来れるようにもしたかったので、
docker-compose.ymlに追記しました
```:docker-compose.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:5.8-php7.3-apache 
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    volumes: 
      - ./wp-content/:/var/www/html/wp-content/
  phpmyadmin: 
    image: phpmyadmin/phpmyadmin:latest 
    restart: always 
    depends_on: 
      - db 
    ports: 
      - "8888:80" 
volumes:
   db_data:
```
これで「localhost:8888」からphpmyadminを開くことができるようになりました
今回は「All-in-One WP Migration」を使わないため「html/wp-content/」のみにしていますが、
容量制限を変更が必要な場合は、「.htaccess」もディレクトリ内で触れるように「html/」でwordpress類データ全てをホストPCのディレクトリと同期してもいいかもしれないです
その他こちらを参考にさせていただきました（php.iniに関してもこちらが参考になるかと思いました）

https://qiita.com/tomokei5634/items/75d2501cfb968d0cfab5

# 追記
上記の設定から少し自分の中でより使いやすいように下記の変更加えました

## ローカルループバックアドレスを設定
複数コンテナ間で同じポート番号（localhost:8000など）を扱うため設定します

>ループバックアドレスとは、そのコンピュータ自身を示すIPアドレスのこと。物理的なネットワークインターフェース（NIC）ではなく、OSなどに実装された仮想的なNICであるループバックインターフェースに割り当てられる。
>`127.0.0.1～127.0.0.254`の幅のIPアドレスすべてがローカルループバックアドレスとして予約されている

デフォルトでは`127.0.0.1`のみしか設定されていないので、
コンテナを増やす場合には先に下記のコマンドで追加する
**※PCの起動のたびリセットされるので、毎回実行が必要**

```:ターミナル
sudo ifconfig lo0 alias 127.0.0.2
※追加する際管理者パスワードを聞かれるので入力して実行
```
これで新たに`127.0.0.2`のループバックアドレスが使えるようになります

## .evnファイル設定
環境変数ファイルを用意しコンテナ内の情報(データベース・wp-configの設定)及び先ほどのIP情報を.evnファイルにまとめます

```:project/.evn
container=containerName

MYSQL_RANDOM_ROOT_PASSWORD=yes
MYSQL_DATABASE=exampledb
MYSQL_USER=user
MYSQL_PASSWORD=root

WORDPRESS_DB_NAME=exampledb
WORDPRESS_DB_USER=user
WORDPRESS_DB_PASSWORD=root
WORDPRESS_TABLE_PREFIX=wp_

IP=127.0.0.2
```
## Dockerfileの設定
wordpressイメージに対して
「wordpressのアップロード容量」と「mailhog用設定」をphp.ini側に施すため下記を参考にさせていただき設定しました

https://qiita.com/hasehiro0828/items/810dfac5b3b5ef5a5769

https://web-memo-s.hatenablog.com/entry/2019/02/21/182815

```:project/Dockerfile
FROM wordpress:5.8-php7.3-apache

RUN curl --location --output /usr/local/bin/mhsendmail https://github.com/mailhog/mhsendmail/releases/download/v0.2.0/mhsendmail_linux_amd64 && \
    chmod +x /usr/local/bin/mhsendmail

RUN echo 'sendmail_path="/usr/local/bin/mhsendmail --smtp-addr=mailhog:1025 --from=admin@example.com"' > /usr/local/etc/php/conf.d/mailhog.ini

RUN echo "file_uploads = On\n" \
         "memory_limit = 500M\n" \
         "upload_max_filesize = 500M\n" \
         "post_max_size = 500M\n" \
         "max_execution_time = 600\n" \
         > /usr/local/etc/php/conf.d/uploads.ini
```
1つ目と2つ目のRUN部分がmailhogを扱うための設定で`/usr/local/etc/php/conf.d/mailhog.ini`に追加されるようになっています
3つ目のRUN部分がwordpressの容量制限を変更する設置で`/usr/local/etc/php/conf.d/uploads.ini`に追加されるようになっています
>**※`/usr/local/etc/php/conf.d`内に適当な名前のiniファイルを作れば、php.ini に書き加えたのと同じ扱いになります。**

:::note warn
この設定にすると「wordpress」のTAG部分が「latest」になってしまいますが、
wordpressのコンテナのinspactで「PHP_VERSION」を確認するとFROMで指定したバージョンになっていました。
:::

## docker-compose.yml設定
環境変数とDockerfileの設定及びmailhogイメージを追加しました

```:project/docker-compose.yml
version: "3"
services:
  db:
    # container_name: ${container}_sql
    image: mysql:5.7
    volumes:
      - ./db-data:/var/lib/mysql
      # sql読み込む場合「db-data」にsqlファイル入れる
      # - ./db-data:/docker-entrypoint-initdb.d
    restart: always
    env_file:
      - .env

  wordpress:
    # container_name: ${container}_wordpress
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./my-theme:/var/www/html/wp-content/themes
      - ./wp-content:/var/www/html/wp-content
    restart: always
    depends_on:
      - db
    ports:
      - ${IP}:8080:80
    environment:
      WORDPRESS_DB_HOST: db:3306
    env_file:
      - .env

  mailhog:
    # container_name: ${container}_mailhog
    image: mailhog/mailhog
    ports:
      - ${IP}:1025:1025
      - ${IP}:8025:8025

  phpmyadmin:
    # container_name: ${container}_phpmyadmin
    image: phpmyadmin/phpmyadmin:latest
    restart: always
    depends_on:
      - db
    ports:
      - ${IP}:8888:80
```
上記を起動し`localhost:127.0.0.2:8080`を開くとwordpressのページにつながります
wordpressの`image:`で設定していたものは`build:`でDockerfileの設定を読み込んでいます。
環境変数は`${IP}`及び`env_file:`で設定しています。
mailhogは`8025`がブラウザ上でUIを起動させるポート番号となります

:::note alert
読み込むsqlファイルがある場合は`db-data`ディレクトリ配下に入れることで、実行してくれます※未検証
:::

# 番外メモ
追記の設定では予約投稿を試すと失敗してしまいますが、
下記の設定で予約投稿も一応できたのでメモ

コンテナ内のwordpressに入ります
```:project/
docker-compose exec wordpress bash
```

下記コマンド実行
```:project/
curl -I localhost:80
```

下記プラグインをwordpressにインストールして
ドメイン名とポート番号設定
https://wordpress.org/plugins/change-wp-cron-request-url/

### 参考にしたサイト
https://www.pressmantech.com/tech/wordpress-tech/5192