ここ最近 WordPress を利用したコーポレートサイトの制作が続いたので、ワークフローを見直してみました。僕は Github より GitLab のほうが好きなんですが、今回は巷で話題の Github Actions で試してみました。Circle CI も昔はよく利用していたんですが、今後どうなるんですかね…。栄枯盛衰を感じます。
今回開発したワークフローを図式化してみました。
1. Mac ローカルで WordPress 開発環境を作る
Docker で作るのが最速かと思います。が!Docker for Mac がとてつもなく動作が重いのです …。このへんの苦闘の歴史はググるとたくさんでてきます。
そのなかでも「Docker for Mac が遅いなら、VirtualBox 上の Ubuntu で Docker を使えばいいじゃん!」的な記事があったので試してみました。
Vagrantを使う「Mac最速のDocker環境」を初心者向けに解説 – Qiita
参照の記事とは違って、ディレクトリ権限の設定で苦戦しましたが以下の Vagrantfile で Docker を起動することができました。VirtualBox や Vagrant のインストールは上記のブログをご参照ください。Vagrant ってなに?と思われるかもしれませんが、僕は Vagrant を「VirtualBox をコマンドラインから操作するツール」的なボンヤリした認識でとらえています。
続いて、Ubuntu にログインして app ディレクトリへ移動します。
$ vagrant up
$ vagrant ssh
$ cd app
Ubuntu にログインした状態で、Docker を起動します。Mac 上の Docker for Mac ではなく、VirtualBox 上で立ち上がった Ubuntu で Docker を起動しているのがミソです。
docker-compose.yml はこんなかんじです。
Dockerfile はこんなかんじです。WP-CLI を利用できるようにカスタムしています。
このへんは特に変わったことはしていないです。Docker for Mac でも動作します。以下のコマンドで Docker を起動させます。
$ docker-compose up
Docker for Mac の WordPress より圧倒的に高速で動作していると思います。
2. リモートサーバーに WordPress をインストールしておく
Github Actions で Git リポジトリから、サーバーにファイルを転送しますが、WordPress 自体は リモートサーバーに用意しておく必要があります。リモートサーバーの選定ですが、簡単にやりたいならエックスサーバーがオススメです。
レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
エックスサーバーは以下のポイントを抑えています。
- 鍵認証を使った SSH ログインが可能
- rsync が使える
同等レベルでよく採用されている heteml は rsync が使えないのでオススメはできません。SCP は使えるのかな。rsync はローカルに無いファイルを消去してくれたりと、デプロイ用途に便利です。AWS S3 とかを使わない場合は是非に欲しい機能です。FTP でもいいのですが、FTP は転送が途中で失敗したり、古いファイルが残ってしまったりとかなりイマイチです。
エックスサーバーで SSH 接続の設定をすると、秘密鍵が貰えるので保存しておきましょう。それを Github に登録します。
SSH_PRIVATE_KEY という名前で保存しました。では、実際に rsync を実行する Github Actions です。
セキュリティに関わる箇所は xxxx と伏せ字にしてあります。
ポイントとして、.htaccess と wp-config.php は同期していないところです。
.htaccess はベーシック認証の設定だったり、ローカル環境とは設定が違うことが多いので同期しないようにしてあります。
wp-config.php も同様で、データベースの情報などがローカル環境と、リモート環境で異なるので、同期しないように設定してあります。
これで、Github に Push すると、エックスサーバーにテーマファイル等 WordPress を構成するファイルが一式同期されるようになりました。
3. データベースを同期する
テーマファイルやプラグインなどは rsync で同期できるのですが、データベースの中身までは同期できません。ではどうするのでしょう?
mysql の中身を Import / Export するシェルスクリプトを書くとか色々方法はありますが、最も簡単なのは All-in-One WP Migration を利用することです。
All-in-One WP Migration – WordPress プラグイン | WordPress.org 日本語
プラグインメニューから簡単にバックアップもリストアも実行できます。WordPress 開発で一番嫌なところは、データベースのマイグレーションだったのですが、このプラグインが諸々の問題を解決してくれました。便利。

ローカル環境で開発して、データベースに変更があったら、プラグインメニューからバックアップを作成。バックアップファイルが自動で作られるので、リポジトリにプッシュします。
各メンバーは、リポジトリからプルを行い、バックアップファイルを受け取ります。そして、プラグインメニューから復元するだけです。
ただひとつ、問題があります。GUI からのバックアップですと、テーマファイルまで無条件に上書きされてしまうのです。
Aさんがデータベースをバックアップして、Bさんがそれを受け取ると、Bさんが開発中だったテーマファイルがAさんのテーマで上書きされてしまうのです。
All-in-One WP Migration は WP-CLI 経由でコマンドラインから操作できる有料オプションが存在します。
All in One WP Migration Unlimited Extension | WordPress Deployment | ServMask Inc.
これを追加するとコマンドラインから細かい指定をしたバックアップを実行できます。
# Ubuntu に SSH ログインします
$ vagrant ssh
# app ディレクトリに移動します
$ cd app
# Docker を立ち上げます。
$ docker-compose up -d
# Docker 内のコンテナにログインします
$ docker-compose exec wp bash
# バックアップを実行します。
$ wp ai1wm backup --allow-root --exclude-spam-comments --exclude-post-revisions --exclude-media --exclude-themes --exclude-inactive-themes --exclude-muplugins --exclude-plugins --exclude-inactive-plugins --exclude-cach
データベース以外の余計なバックアップは除いてあります。これで、テーマファイルは Git 経由でしか更新できないようにします(このへんも GUI から設定できたらいいのにな…)。
コマンドラインから作成したバックアップファイルでも、復元はプラグインメニューから行うことができるので安心です。
4. フロントエンドの開発環境について
ここは本題とは関係ないのですが、WordPress におけるフロントエンドの開発環境について最近思ったことです。
基本的に WordPress で作るモノはコーポレートサイトやメディアサイトが多いです。したがって、SPA のような複雑な JavaScript は必要ありません。複雑な JavaScript が必要ないので、Webpack ではなくて、gulp で十分だと考えます。
jQuery のプラグインを利用するだけなのに、ES6 は必要ないですよね?
とにかく開発環境を難しくして、メンテナンス不可能にするフロントエンド現場を何度も経験してきました。コーポレートサイトは納品した後に、忘れたころにアップデートの依頼が入ったります。そのときに、ややこしい開発環境だと困るのです。サクッと対応できるようにしておくのが正だと思います。
ですので、僕は難しくないサイトの場合は、普通に jQuery でトランスパイラも利用せずに書くことがほとんどです(React はもちろん最高だと思ってます)。
メンテナンスの観点から Sass すらも使いたくないのですが、さすがに CSS を Sass 無しで書くのは苦行なので使っています。
そんなかんじの僕の最近の gulpfile です。
最近は Vue.js を jQuery の代わりに利用する方も多いようですが、小回りが効いて何でもできる jQuery をシンプルなウェブサイト制作の際は今も愛用しています(SPA の場合は React のヘビーユーザーです)。
5.まとめ
コーポレートサイトは、一度作ったらなかなかリニューアルはしないものだと思います。コンテンツを増やしたり等々はチラホラ出てくると思いますが、そこに予算はきっと多くはかけられないはずです。
ですので、誰にでも簡単に扱えるように作っておくのが、クライアントさんへのおもてなしなんじゃないかと思って、作り手側の自己満足にならないように気をつけています。できることが同じならイージーよりシンプルを選ぶ、というか。
ということで会社のメンバーで書籍を出版しましたのでどうぞよろしく!
初心者からちゃんとしたプロになる JavaScript基礎入門 | 西畑 一馬, 須郷 晋也, 岡島 美咲, 扇 克至, 岩本 大樹 |本 | 通販 | Amazon
フロントエンドエンジニア積極採用中
株式会社トゥーアールでは現在フロントエンドエンジニア積極的に採用中です!
興味がある人は採用ページをチェック!!