WordPressの開発環境をDockerで構築する方法

今までのVagerantから、Dockerに切り替えた際の備忘録(Mac)

---
#### 実際に使う時のメモ

dockerアプリを起動して下記URLにアクセス

[http://localhost:8080/](http://localhost:8080/)

[docker-composeの各種コマンド](https://qiita.com/okyk/items/a374ddb3f853d1688820)

---
## 1.Docker Desktopをダウンロード

Windows 10 Professional／Enterprise 64-bit：[Docker CE for Windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows)
OS X Yosemite 10.10.3 以降：[Docker CE for Mac](https://hub.docker.com/editions/community/docker-ce-desktop-mac)

ダウンロード後、アカウントを作成する。

```
$ docker ps
CONTAINER ID  IMAGE  COMMAND  CREATED  STATUS  PORTS  NAMES
```
ターミナルでdockerコマンドが使用可能に。

### 使用可能Resourceの変更
これをしないでいたら、謎のコマンド実行不能に陥ったので最初に設定変更後、RestartでDocker Desktopを再起動しておく。

[Docker for Macが突然応答しなくなったら？](https://dawaan.com/docker-for-mac-hung/)
上記記事より、
「Preferences...」>「Resouces」タブから、MemoryとSwapを適宜増やす。
![c6f75540-cd96-4bbf-937d-b277fd5f7d25-960x1418r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304716/ac4601ef-b4de-69db-f9d0-c558198592b2.png)


![ef3eaeca-d883-4822-b039-9b0a12eff4bf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304716/65e20786-b88a-81cf-036f-1fcccd8ddfcb.png)


##  WordpressとMySQLのimageをダウンロードする

個別にダウンロードして連携する方法で上手くいかなかったので、
[Wordpress imageの公式ページ](https://hub.docker.com/_/wordpress/)に記載されているdocker-composeファイルを使う方法で起動。

1. Docker用のフォルダをローカルに作成
2. "docker-compose.yml"というファイル名で下記のコードを記載したファイルを作成
3. 当該ファイルで`docker-compose up -d`を実行すると、必要なimageがダウンロードされる


**... via docker stack deploy or docker-compose**
より、

```
version: '3.1'

services:

  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - wordpress:/var/www/html

  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

```

##  Wordpressの起動

`docker-compose up -d`を実行してimage DL後、少し時間を置いて
[http://localhost:8080/](http://localhost:8080/)
にアクセスすると、WordPressのスタート画面が表示される。

以降も
`docker-compose up -d`で仮想環境の立ち上げ、
`docker-compose stop`で環境の停止を行う。

なお`docker-compose down`で一度コンテナ・ネットワークを停止・削除してから立ち上げても後述プラグインで一度入れたデータベースは消えないことを確認済み。

[docker-composeの各種コマンド](https://qiita.com/okyk/items/a374ddb3f853d1688820)

## ローカルのWordpressフォルダにマウントする
上記までの状態だと、wordpressコンテナ内の`/var/www/html`内にインストールされたWordpressを参照している状態。
（ `docker exec -it [container ID] bash` コマンドで、コンテナ内サーバーの構成を確認できる）
ローカルフォルダにて管理しているテーマファイルをコンテナから参照したい場合は、
"docker-compose.yml"を置いたフォルダに"wordpress"というフォルダを作る。

上で貼った"docker-compose.yml"内の下記の部分を

```
  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - wordpress:/var/www/html
```

```
    volumes:
      - wordpress:/var/www/html
```
から
```
    volumes:
      - ./wordpress:/var/www/html
```
に書き換えるだけで、コンテナのマウント先をローカルファイルに指定した状態になる。

```
//volumesは下記の記法でマウント先を設定する。
volumes:
      - [マウントするローカルファイルのパス]:[コンテナ内で実行されるファイルのパス]

 *マウント先のパスは/を含むとパスとして認識されるっぽい。
 「wordpress」だけの初期状態だと、そのまま左側のパスを参照するっぽい。
```
参考：
[https://docs.docker.com/compose/compose-file/#short-syntax-3](https://docs.docker.com/compose/compose-file/#short-syntax-3)より

```
volumes:
  # Just specify a path and let the Engine create a volume
  - /var/lib/mysql

  # Specify an absolute path mapping
  - /opt/data:/var/lib/mysql

  # Path on the host, relative to the Compose file
  - ./cache:/tmp/cache

  # User-relative path
  - ~/configs:/etc/configs/:ro

  # Named volume
  - datavolume:/var/lib/mysql
```

書き換え後`docker-compose up -d`を行うと、
空の"wordpress"フォルダにデフォルト状態のWordPressがDLされるが、双方向に同期されているので、あとはローカルフォルダを編集すると、Dockerの仮想環境に反映される。
これでテーマとプラグインが移行できました。

## データベースの移行

1. 開発と本番両方でプラグイン「All-in-One WP Migration」を有効化する
2. 本番側にて「高度な設定オプション」から、データベース"だけ"をエクスポートする設定に
3. フォルダにエクスポートする
4. 開発環境側の All-in-One WP Migration からインポートする。（10 分以上かかる場合あり） ※初期設定だと、ファイルサイズ制限でファイルをアップロード出来ないため、[このページ](https://help.servmask.com/2018/10/27/how-to-increase-maximum-upload-file-size-in-wordpress/)の**2. Update .htaccess file**を行ってサイズ上限を増やす。
5. 「サイトのインポートしました」というダイアログが開いたら「パーマリンク構造を保存する」をクリック ※当該ダイアログが開かなかった場合は手動で「設定」内の「パーマリンク設定」に移動する
6. 「パーマリンク設定」のページに移ったら「変更を保存」を押す（この時ログイン画面が出たらログインして、再度５のダイアログからリンクを押すと「パーマリンク設定」のページに行ける）
7. 画像ファイル以外のデータは移行出来たので環境構築は完了！（画像は重い上に不可欠ではないので移行しない）

[使用法参考サイト](https://www.vektor-inc.co.jp/post/all-in-one-wp-migration-more-details/)


## 使用メモ

### ローカルホストの割当エラー
>for wordpress Cannot start service wordpress: driver failed programming external connectivity on endpoint wordpress_docker_wordpress_1 (393592c06d5d5a3ae66698c46502754200d7d3cbc91e35f080c105982126fb3d): Bind for 0.0.0.0:8080 failed: port is already allocated

docker hubを再起動して`docker-compose up -d`したところ、上記のエラーが出てしまった。
原因は他のフォルダでテストした時に作成した別のwordpressコンテナが先に起動していて、http://localhost:8080/をすでに使用していたこと。
使っていないコンテナだったので、当該コンテナを止めてから削除することで解決。

[参考記事](https://qiita.com/ponsuke0531/items/f3490f571b5eee16ea87)