【git × Webhook】WordPressの子テーマのデプロイを自動化


はじめに

この度WordPressで新規にブログを開設しました。 LION BLOGという無料のテーマが好評だったので、こちらのテーマを使用させてもらっているのですが、デザインを微妙にカスタマイズしたくなったので、Dockerでサクッとローカル環境を構築して、子テーマをgitで管理する体制を整えたのでメモっておきます。

WordPressに関しては、未知なことばかりなので、変なことやってたらすみません。 ちなみに、本番環境はXServerを使っています。

Dockerで開発環境を作成

ローカル環境は、Dockerで構築しています。 WordPressのDocker環境構築は「docker-composeを使って WordPressテーマ開発環境を構築しよう」を参考にさせていただきました。

構成

  blog
   |docker-compose.yml 
   |db-data/ 
   |lionblog/
   |lionblog-child/
   |.env
   略

WordPressのライオンブログというテーマを用います。 テーマをそのまま使うのは味気ないのでlionblog-childというディレクトリを切って、デザインをカスタマイズしていきます。 詳しい方法は、「子テーマを作ってWordPressの既存テーマをカスタマイズする方法」をご覧になっていただくと良いかと思います。 サイトデザインをカスタマイズするためにlionblog-child内のファイルを編集してデザインの調整を行います。したがって、このディレクトリをgitで管理します。 docker-compose.yml

version: "2"
services:
    wordpress:
        image: wordpress:latest
        ports:
            - "9000:80"
        depends_on:
            - db
        environment:
            WORDPRESS_DB_HOST: "db:3306"
        env_file: .env
        volumes:
          - ./lionblog:/var/www/html/wp-content/themes/lionblog
          - ./lionblog-child:/var/www/html/wp-content/themes/lionblog-child
    db:
        image: mysql:latest
        env_file: .env
        volumes:
            - ./db-data:/var/lib/mysql

.env

WORDPRESS_DB_NAME=wordpress
WORDPRESS_DB_USER=blog
WORDPRESS_DB_PASSWORD=blog_db

MYSQL_RANDOM_ROOT_PASSWORD=yes
MYSQL_DATABASE=wordpress
MYSQL_USER=blog
MYSQL_PASSWORD=blog_db

テーマは好みを自由に用いてください。

子テーマをgitで管理

編集するファイルは、lionblog-child/なので、このディレクトリをgitで管理しておきましょう。 ローカル環境で、ファイルを編集したら、ftpクライアントなどを用いて本番にあげるのが 一般的かもしれませんが、なんだか普段使い慣れたgitを使ってdeployまでしたいものです。

Webhookを導入

そこで、便利な機能Webhookを利用します。Webhookを用いることで、

ローカルで子テーマ編集 ->コミット ->リモートにPush ->自動でデプロイ

というサイクルを作ることができます。 つまり、リモートリポジトリにPushしたタイミングで、自動で本番のレポジトリにPullさせます。

Webhookって

まず、Webhookとは何かについて簡単に説明します。 Webhookとは、何らかのアクションを検出した際に、指定したURLなど他のアプリケーションにHTTPリクエストを送ることで通知を送る仕組みのことです。 今回は、GitHubにWebhookの設定をしたいと思います。 GitHubでは、上のような手順でリポジトリにWebhookを設定できます。 今回は、リポジトリへのPushを検出すると、登録しておいたURLにリクエストを送ります。

やりたいこと

この仕組みを利用してやりたいことを、イメージとして図示するなら次のようになります。

1. ローカルで子テーマを編集してリモートにプッシュする

2. GitHubでWebhookがpushを感知してリクエストを送る

私の場合、Webhookで走るURLを次のように設定しています。

https://tanaken.me/wp_hook.php/?key=password

だれでも実行できると困るので、クエリパラメーターでパスワードを加えます。みていただければわかるように、webhookのリクエストによって、/直下に配置したwp_hook.phpが実行されます。

3. wp_hook.phpにスクリプトが実行されリポジトリにPullを要求

次のようなスクリプトを記述しました。 このスクリプトをSSH接続なり、FTPなり手動なりして本番のpublic_htmlいかに配置します。

<?php
$SECRET_KEY = 'password';

if ( isset($_GET['key']) && $_GET['key'] === $SECRET_KEY && isset($_POST['payload']) ) {
`cd wp-content/themes/lionblog-child; git pull origin master`;
}

パスワードが、一致してかつ、masterブランチの時のみ、子テーマをリモートのブランチからプルします。

4.本番環境にPull

ローカルで変更した子テーマのデザインが本番にも反映されるはずです。 私は、プルの成功、失敗に応じてSlackに通知させるように設定をしましたが、今回は割愛させてもらいます。 以上で、ローカルで編集してPushするだけで、子テーマの変更が本番に反映される環境が作られたはずです。

まとめ

WordPressの開発環境をかなり我流で作ってみました。 子テーマで結構デザインとか作り込んでいきたいって方にオススメしときます。

comments powered by Disqus