Bedrock and Sageの開発環境をDocker Composeで動かしてみる

# はじめに
[roots.io](https://roots.io/)が提供しているWordpressの開発環境ツール群があります。

* Trellis
    * MAMPの様な仮想マシン環境とデプロイツールを提供してくれます
* Bedrock
    * PHP ComposerベースにWordpress環境を置き換えてくれます
* Sage
    * Webpackでjsやscssも含めてモダンな環境でテーマ開発できます

Docker Composeで構築したnginx+php+mysqlな実行環境の上で、BedrockのWordpress環境をインストールし、Composerでプラグインを管理、独自テーマの開発はSageベースにモダンな環境で行いたい。最終的には、production環境へのデプロイまで実現したいですが、まずは開発環境の構築手順をメモ代わりに記録しておきます。

# 前提
手元のPCに以下のツールがインストールされていて使用可能になっている必要があります。

- [Docker](https://www.docker.com/)
- [Docker Compose](https://docs.docker.com/compose/install/)
- [Composer](https://getcomposer.org/doc/00-intro.md#installation-linux-unix-osx)
- [yarn](https://yarnpkg.com/lang/ja/)

# サーバー環境の準備
すでにnginx+php+mysqlな環境を立ち上げてくれるDocker Composeの設定ファイルがあるのでそちらを利用させてもらいます。

[https://github.com/nanoninja/docker-nginx-php-mysql](https://github.com/nanoninja/docker-nginx-php-mysql)

# リポジトリのダウンロード
自分のリポジトリで管理したいので、クローンではなくてアーカイブをダウンロードして展開します。

```shell-session
$ wget https://github.com/nanoninja/docker-nginx-php-mysql/archive/master.zip
$ unzip master.zip
$ mv docker-nginx-php-mysql-master myproject
$ cd myproject
````

試しに起動してみます（初回はファイルのダウロードに少し時間がかかります）。

```shell-session
$ docker-compose up
```

ブラウザで`localhost:8000`を開きますと、composer関係の設定をしていないためエラーが出ますが、とりあえずサーバーが立ち上がっている事を確認できるはずです。

![Screen Shot 2018-07-20 at 0.03.36.png](https://qiita-image-store.s3.amazonaws.com/0/13655/0a3d4397-26d2-72a2-a629-31c3f2b08175.png)

確認ができたら`ctrl+c`で一度終了します。最後に`./web`は不要なので削除します

```shell-session
$ rm -rf ./web
```

# 環境変数の設定
myprojectのルートディレクトリにあるDocker Compose用の設定ファイルを必要に応じて変更します。

```shell:.env
#!/usr/bin/env bash

# See https://docs.docker.com/compose/environment-variables/#the-env-file

# Nginx
NGINX_HOST=localhost

# PHP

# See https://hub.docker.com/r/nanoninja/php-fpm/tags/
PHP_VERSION=latest

# MySQL
MYSQL_VERSION=5.7.22
MYSQL_HOST=mysql
MYSQL_DATABASE=test
MYSQL_ROOT_USER=root
MYSQL_ROOT_PASSWORD=root
MYSQL_USER=dev
MYSQL_PASSWORD=dev
```

今回は特に変更は不要ですが、MySQLにアクセスするための情報は次のステップで必要となります。

# Bedrockのインストール
Composerを使用してBedrockのプロジェクトを作成します。

```shell-session
$ composer create-project roots/bedrock bedrock`
```

Bedrock用の環境ファイルを設定します。ここで`DB_NAME`, `DB_USER`, `DB_PASSWORD`は`myproject`のルートディレクトリにある`.env`内でセットした値に合わせます。また、`DB_HOST`は下記の`docker-compose.yml`内で参照されているmysqlのホスト名に合わせます。最後の各種キーはコメントに書かれたサイトにアクセスして自動生成されれるキーにすべて置き換えます。

```shell:./bedrock/.env
DB_NAME=test
DB_USER=dev
DB_PASSWORD=dev

# Optional variables
DB_HOST=mysql
# DB_PREFIX=wp_

WP_ENV=development
WP_HOME=http://localhost:8000
WP_SITEURL=${WP_HOME}/wp

# Generate your keys here: https://roots.io/salts.html
AUTH_KEY='generateme'
SECURE_AUTH_KEY='generateme'
LOGGED_IN_KEY='generateme'
NONCE_KEY='generateme'
AUTH_SALT='generateme'
SECURE_AUTH_SALT='generateme'
LOGGED_IN_SALT='generateme'
NONCE_SALT='generateme'
```

# Docker Composeの設定
Bedrockのディレクトリ構成に適合するように、Docker Composeの設定ファイルを修正します。

```yaml:./docker-compose.yml
version: '3'
services:
    web:
        image: nginx:alpine
        volumes:
            - "./etc/nginx/default.conf:/etc/nginx/conf.d/default.conf"
            - "./etc/ssl:/etc/ssl"
            - "./bedrock/web:/var/www/html" #変更
            - "./etc/nginx/default.template.conf:/etc/nginx/conf.d/default.template"
        ports:
            - "8000:80"
            - "3000:443"
        environment:
            - NGINX_HOST=${NGINX_HOST}
        command: /bin/sh -c "envsubst '$$NGINX_HOST' < /etc/nginx/conf.d/default.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"
        restart: always
        depends_on:
            - php
            - mysqldb
    php:
        image: nanoninja/php-fpm:${PHP_VERSION}
        restart: always
        volumes:
            - "./etc/php/php.ini:/usr/local/etc/php/conf.d/php.ini"
            - "./bedrock:/var/www" #追加
            - "./bedrock/web:/var/www/html" #変更
    composer:
        image: "composer"
        volumes:
            - "./bedrock:/app" #変更
        command: install
    myadmin:
        image: phpmyadmin/phpmyadmin
        container_name: phpmyadmin
        ports:
            - "8080:80"
        environment:
            - PMA_ARBITRARY=1
            - PMA_HOST=${MYSQL_HOST}
        restart: always
        depends_on:
            - mysqldb
    mysqldb:
        image: mysql:${MYSQL_VERSION}
        container_name: ${MYSQL_HOST}
        restart: always
        env_file:
            - ".env"
        environment:
            - MYSQL_DATABASE=${MYSQL_DATABASE}
            - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
            - MYSQL_USER=${MYSQL_USER}
            - MYSQL_PASSWORD=${MYSQL_PASSWORD}
        ports:
            - "8989:3306"
        volumes:
```

BedrockではWordpressの設定情報をできるだけ公開ディレクトリに置かない様な設計になっています。したがって、webサーバーには`bedrock/web`ディレクトリのみをマウントし、設定情報関係のディレクトリはphpサーバーにだけマウントするように変更しています。

# nginxの設定の修正
nginxのルートディレクトリを修正します。

```nginx:./etc/nginx/default.template.conf
server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name ${NGINX_HOST};

    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html; #修正

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}
```

# docker-composeの起動とwordpressのインストール
バックグラウンドで起動してみます：

```shell-session
$ docker-compose up -d
```

ブラウザで`localhost:8000`を開き、いつものこのスクリーンが表示されれば成功です。

![Screen Shot 2018-07-20 at 0.38.41.png](https://qiita-image-store.s3.amazonaws.com/0/13655/26241399-cf60-6702-8d71-a09abc00469b.png)

必要な情報を入力してWordpressのインストールが完了します。

## テーマ開発環境Sageのインストール
Bedrockのプロジェクトにおけるテーマディレクトリに移動します。

```shell-session
$ cd ./bedrock/web/app/themes/
```

ComposerでSageをインストールします。必要に応じて`your-theme-name`を適当な名前に変更します。

```shell-session
$ composer create-project roots/sage your-theme-name
```

この際にテーマに関する情報をいくつか質問されるので適当に答えます。インストールが完了したら、新しいテーマディレクトリ`./your-theme-name`移動して`yarn`で`npm`パッケージのインストールと初期ビルドを行います。

```shell-session
$ yarn && yarn build
```

次のコマンドを実行すると、ブラウザを開き、テーマディレクトリ内のファイル変更があるとそれを検知して、ブラウザの表示内容を自動更新してくれます。

```shell-session
$ yarn run start
```

# まとめ
とりあえずこれでテーマ開発環境が整いました。