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

はじめに

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
• Docker Compose
• Composer
• yarn

サーバー環境の準備

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

https://github.com/nanoninja/docker-nginx-php-mysql

リポジトリのダウンロード

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

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

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

$ docker-compose up

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

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

$ rm -rf ./web

環境変数の設定

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

.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のプロジェクトを作成します。

$ composer create-project roots/bedrock bedrock`

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

./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の設定ファイルを修正します。

./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のルートディレクトリを修正します。

./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のインストール

バックグラウンドで起動してみます：

$ docker-compose up -d

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

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

テーマ開発環境Sageのインストール

Bedrockのプロジェクトにおけるテーマディレクトリに移動します。

$ cd ./bedrock/web/app/themes/

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

$ composer create-project roots/sage your-theme-name

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

$ yarn && yarn build

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

$ yarn run start

まとめ

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