Docker を使った ablog cms 開発環境の作成

ablog cms の拡張アプリ acm-google-calendar を制作するにあたり、いちいち本ブログをテスト環境にするのは面倒ですし、安全ではないので、ローカルに開発環境を作成しました。 ローカルに開発環境を作成する方法はいくつかありますが、今回は Docker を使いたいと思います。以下で環境構築の説明をしますが、既にDocker 及び docker-compose はインストールされているものとします。

作成方法

ローカルでの開発環境作成には大きく分けて「コンテナ作成段階」と「ablog cms インストール段階」の2つのステップがあります。

コンテナ作成

公式サイトに説明があるように、docker-compose.yml を作成することで簡単に開発環境を作成できます(とは言え、いろいろ調べながらやっていたら3時間ほどかかりました...)。

次のコードは docker-compose.yml です。公式サイトのものと少し変えてあります。

• mysql の environment に MYSQL_DATABASE:db、MYSQL_ROOT_USER:root を追加しました。
• command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci を追記して、データベースが utf-8 を扱うように変更しました(utf-8じゃないとバグります！)
• php7.3 を使いたかったので、image:atu666/ioncube:7.3 へ変更しました。
• www の volumes を自分が共有したいフォルダに変更しました

詰まったポイント1つ目
フォルダの共有は ホスト側のフォルダ:ゲスト側のフォルダ と定義します。つまり、今回の設定ファイルの場合、(僕のパソコンの共有したいディレクトリ):/var/www/html(ホスト側。つまり Docker側) です。/Users/yoshihito/Work/Appleple/Docker/ablog_cms にファイルを追加すると、Docker側の /var/www/html のファイル内容も変化します。
ここで、/var/www/html はApacheのドキュメントルートで、localhost でアクセスした時に表示される場所です。

version: '2'
# service
services:
    # mysql
    mysql:
        image: mysql:5.7
        command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
        ports:
            - "3306:3306"
        environment:
            MYSQL_DATABASE: db
            MYSQL_ROOT_USER: root
            MYSQL_ROOT_PASSWORD: root
    # proxy
    proxy:
        image: jwilder/nginx-proxy:latest
        volumes:
            - /var/run/docker.sock:/tmp/docker.sock:ro
        ports:
            - "80:80"
    # www
    www:
        image: atsu666/ioncube:7.3 # phpのバージョンにあったものを指定
        privileged: true
        volumes:
            - /Users/yoshihito/Work/Appleple/Docker/ablog_cms:/var/www/html
        links:
            - mysql:mysql
        environment:
            - VIRTUAL_HOST=acms.lab,www.acms.lab # host名を指定
            - APACHE_DOCUMENT_ROOT=/var/www/html # ドキュメントルートを指定

次に、hostsファイルの設定をします。これは、上記の例では、http://acms.lab とブラウザに入力した場合に、APACHE_DOCUMENT_ROOT が表示されるようにするために行います。
hostsファイルは Mac の場合 /private/etc にあります。下の図の一番下の箇所 # docker blog-cms が今回追加した設定です。 これで、http://acms.lab を、127.0.0.1(ローカルホスト)に対応づけます。

hostsファイル

詰まったポイント2つ目
localhost と入力しただけでは jwilder/nginx-proxy というアプリケーションの画面が表示されることになります。VIRTUAL_HOST を設定し、設定した名前でローカルホストにアクセスすることによって初めて APACHE_DOCUMENT_ROOT が表示できるようです。

最後に、docker-compose.ymlがあるディレクトリに移動し、

$ docker-compose up -d

と入力して、コンテナの作成は完了です。

ablog cms インストール

続いて、先ほど作成したコンテナに ablog cms をインストールします。公式サイトから、使用するphpのバージョンにあったものをダウンロードします。そして、先ほど共有フォルダと定義したホスト側のフォルダ(今回の場合ですと /Users/yoshihito/Work/Appleple/Docker/ablog_cms)に ablogcms フォルダの中のファイルをアップロードします。下の図のようになります。そして、公式の説明に従い htaccess.txt の名前を変更し、Webブラウザでのセットアップを開始します。先ほどhostsファイルの設定を行なったので、http://acmes.labでアクセスできます。

詰まったポイント3つ目
あとは、ほとんど説明にしたがって進めていくだけなのですが、1つだけ詰まった点がありました。データベースの設定です。docker-compose.yml でデータベーススキーマ名、ユーザ名、パスワードを設定したので、次のように登録できます。

以上で、ローカル開発環境の作成が完了しました。
Docker を前から触ってみたいと思いながら、なかなか触れていなかったのですが、この機会にと思い挑戦してみました。なんとか環境作成までできてよかったです。

追記

今回ローカル環境を整備したのは、google calendar と連携する拡張アプリの開発のためでした。その際、この設定ではうまくいかなかったことがあったので、ここに追記します。

Google API では、Oauth認証にリダイレクトURLが必要になります。その時、URLの指定に.comや.orgなどが含まれるようなドメイン名しか指定できず、acms.lab が設定できませんでした。localhost なら指定できるのですが、前述したように、localhost では jwilder/nginx-proxy というアプリケーションにアクセスされてしまいます。

この問題は、ドメイン名を acms.lab から acms.com のような、リダイレクトURLに指定できるようなアドレスに変更することによって回避できました。