WordPress プロジェクトのバックアップ、アップデート、報告の自動化

WordPressサイトで、本番環境をローカルにコピーしてバックアップ、アップデート、ログや報告メールを作ってくれるシェルスクリプトを書いてみた!

初めてのシェルスクリプト!

便利なものを作ってみたいな、ということで普段使いができる、時間がかかってしまって面倒なことを自動化する試みであります。

さて、今回は、たとえば、

  • 複数の WordPress のサイトやプロジェクトを管理していて定期的に、あるいは WordPressの本体がアップデートされた時にコアやプラグインをアップデートし、チームやクライアントにメールで報告するタスク
  • 機能追加やバグ取りなどを実施する前に本番の環境を手元に持ってきて、その際にバックアップも作るしそのログも残すタスク

を自動的にやってくれるコマンドを作ってみました。

  • ローカルのDBのバックアップをする
  • リモートのファイルとデータベースを持ってきて反映
  • 同時にバックアップも作る
  • ついでに作業内容のログを残し、
  • クライアントサイトの場合には、報告のメールの文章を用意したい

という内容でございます。

もっとこういう風に書いたほうがいいよ!などのフィードバックぜひぜひお願いします。@shinichiN | Twitter です。

前提となる環境

ローカルのサーバ環境がある

VCCWwp-instant-setup, MAMP, XAMPP などなんでもOKです。

ツールが揃っている

今回使うツールは以下のものです。

実施する内容

今回自動化したい内容は、大きく分けて以下のものになります。

バックアップとアップデートの作業

  • 現状のローカル環境のデータベースのバックアップを作成
  • リモートからすべてのファイル、データベースを持ってきて適用する
  • リモートの最新状態のデータベースのバックアップを作成
  • WordPress のコアを最新のバージョンにアップデートする
  • すべてのプラグインを最新のバージョンにアップデートする

人間っぽい作業を簡単にする部分

  • 上記のすべて作業内容で出力される内容をログファイルにまとめる
  • 上記のすべての作業内容を、コピペしてクライアントに見やすくまとめたメール本文としてテキストファイルにまとめる
  • データベースの新旧バックアップファイルとログファイル、メールの本文をドロップボックスに保存する

使い方(試し方)

Github にあるスクリプトをいい感じの場所に設置して実行権限を渡し、パスを通すか、以下のワンライナーを実行してください。

curl https://raw.githubusercontent.com/ShinichiNishikawa/WP-Backup-for-client-projects/master/wp-backup.sh | sh

条件

  • wp-cli がある環境
  • Wordmove がある環境
  • Dropbox がある環境

この他に、引数を指定するのが面倒であったため、データベースのダンプファイルの名前に実行している、このスクリプトを実行しているディレクトリの名前を使ったりもしているので、いつも同じ名前のフォルダ `www` とか `public_html` などがローカル環境にある人は使いにくいかもしれません。その場合は、フォルダの名前をローカル環境のホスト名などにするなど工夫してください。

自慢ポイント

メールの本文も作ってくれるのが便利。ここからメールを送ってしまっても良いのかと思いましたが、エラーの確認や必要な修正をしてあげてから本番にアップしないといけないので、その部分は自動化できませんでした。

ログファイルの中にパスワードが含まれることになるので、それを削除しているところも色々調べて作りました。正規表現がすごく苦手なので大変でした。

今後の改善予定

wp-cli の置換コマンド `wp search-replace` に `–export=<filename>` という結果をダンプファイルとして出力させるオプションが追加されるので、もしかしたらローカルではなくリモートのホスト名でのダンプライフもここで作れるかもしれません。

作業時にDBにも手が入ることが多いのでやらないかもですが。

それから、実行されたのが WordPress のあるディレクトリじゃないとか、ネットワークに接続できなかったとき、Movefile が存在しないときなど色々なエラーを想定して、もっときちんと処理が止まったりエラーが出た旨のメールが届いたりなどしたいと思います。

もうひとつ、WordPress がインストールされているディレクトリのリストを作り、すべてのサイトにひとつのコマンドで実行ができれば、さらに効率が上がっていいな、と思います。

できあがるファイルの様子

スクリーンショット_2015-12-23_0_26_02.jpg

できあがるメールの例

いつもお世話になっております。

WordPress サイトの更新をおこないました。
変更の概要は以下のとおりです。

– 作業日: 2015年12月22日
– ローカル環境でWordPress のバージョンを 4.3.1 から 4.4 にアップグレードしました。
– ローカル環境でWordPress のプラグインを、以下のようにアップデートしました。

name version
advanced-custom-fields 4.4.4
auto-post-thumbnail 3.3.3
breadcrumb-navxt 5.3.1
contact-form-7 4.3.1
content-bootstrap 1.0.2
custom-post-type-permalinks 1.3.0
duplicate-post 2.6
image-widget 4.2.1
mailcatcher 1.0
more-body-classes 1.0
nginx-champuru 3.1.1
show-current-template 0.2.2
simple-map 2.8.8
nskw-title-description-handler
wordpress-importer 0.6.1
wp-pagenavi 2.89.1
wp-multibyte-patch 2.5
wp-simple-related-posts 1.5.1
wp-total-hacks 2.0.1

– ローカル環境で、アップデートに由来するエラーの有無を確認・修正
– 本番環境に変更を適用
– 本番環境での表示、ログインなどを確認

今後とも引き続きどうぞ宜しくお願い致します。

↓ プラグインを作る方々への本、書きました。 ↓

ローカルでのメールの確認ができるMailCatcherをMacで使う

ローカルの環境でメールの送信を確認したいとき、

  • メールが送れない
  • 送られても困る
  • いちいちメーラーを開くのも面倒だ

ということがあると思います。そんなときには、VCCW + MailCatcherで送信メールを確認するための環境を構築 | Firegoby が便利!

  • 簡単なコマンドで起動することが可能。
  • ウェブサーバーも同時に起動し、送信したメールをブラウザで確認することができる。
  • メールはMailCatcherから先には送信されない。
  • ウェブソケットを使用しており送信したメールはリアルタイムで表示される。(リロードが不要)
  • APIを搭載しており、たとえばユニットテストなどで送信メールの内容の確認を自動化できる。

僕も使ってみたので、WordPressなどなどの設定を見てみたいと思います。

MailCatcher を利用するのに必要なこと

  1. MailCatcher 本体のインストール( gem install mailcatcher )
  2. WordPress のプラグイン Mailcatcher for WordPress を有効化
  3. wp-config.phpdefine(WP_MAILCATCHER, true); を記入

だけです。

これが終わったらターミナルから、mailcatcher と実行するだけです。

$ mailcatcher
Starting MailCatcher
==> smtp://127.0.0.1:1025
==> http://127.0.0.1:1080
*** MailCatcher runs as a daemon by default. Go to the web interface to quit.

ブラウザで http://127.0.0.1:1080 へアクセスするとブラウザがメーラーになってて、WordPressが送信するメールを全部受信できます。宛先が誰であっても全部ここに来ます。メールをキャッチ!

ほんと便利。
ほんと便利。

↓ プラグインを作る方々への本、書きました。 ↓

iPhone の実機やシミュレータの Safari を Mac の Safari のインスペクタでデバッグする

デスクトップのブラウザのインスペクタやデベロッパーツールも便利ですが、最後に困ったらやっぱり iOS シミュレータや iPhone、iPad の Safari で何がどうなっているのかを見たいものですよね。

  1. Mac の Safari の環境設定の詳細タブで、「メニューバーに”開発”メニューを表示」にチェックが入っていることを確認
  2. 現れた開発メニューから iOS Simulator か、USB で接続している iOS 端末を選ぶ
  3. iOS 実機の方では、設定 > Safari > 詳細 と進んで “Webインスペクタ” をオンにしておく

以上です。3番を教えていただいた @tak_nishida さん、ありがとうございました。

シミュレータとUSBで接続している iOS 端末が並ぶ
シミュレータとUSBで接続している iOS 端末が並ぶ
iOS シミュレータの中の Safari を Mac の Safari でWebインスペクトしているところ。便利
iOS シミュレータの中の Safari を Mac の Safari でWebインスペクトしているところ。便利

上の画像のノリで、実機もいけまする。

↓ プラグインを作る方々への本、書きました。 ↓

iPhone 実機からMAMPで動いてるローカルマシンのWordPressとかにアクセスする

もっと簡単な方法があったのでくわしくは下記のFacebookでのやりとりをどうぞ!

こんにちは。 MAMP で消耗する派閥に属しておりまする。

Posted by Shinichi Nishikawa on Thursday, 26 November 2015

別にiPhoneからじゃなく別の端末からでもアクセスできますが、iPhoneからということで。

  1. Mac と iPhone で同じネットワークに接続する
  2. システム環境設定 > ネットワークでWi-Fiが設定されている IP アドレスを確認する
  3. WordPress の wp-config.php で、定数 WP_SITEURLWP_HOMEhttp://2で確認したIP にする
  4. MAMP のローカルホストのドキュメントルートを WordPress がインストールされているディレクトリに設定する
  5. 2で確認した IP に iPhone の Safari(やその他のブラウザ)でアクセスする

以上です。

注意事項としては、同じネットワークにいて、IP アドレスが分かれば誰でもアクセスできるようになりますので、カフェなどの公共の場所でやるときは危ないです。MAMP HTTP接続用に開くポートを珍しいのにするなどしたら少しは安全かもしれません。

それと、テーマをちゃんと作っておらず、静的ファイルへのパスなどを直書きしている場合などには動かないと思います。

だいたいをエミュレータやブラウザなどで確認して、最後にいろんな端末で動きを確認したい時に便利です。

2の IP アドレスの確認はこんな感じ。
2の IP アドレスの確認はこんな感じ。
MAMP Pro での設定
MAMP Pro での設定
WordPress に自身のURLを IP アドレスであると認識させる。
WordPress に自身のURLを IP アドレスであると認識させる。

↓ プラグインを作る方々への本、書きました。 ↓

最初にやる git, gitignore, wordmove, gulpfile 関係のメモ

ローカル/リモートの環境を作成する際に最初にやることのメモ。あとでスクリプトにまとまるかもしれない。

WordPress 用のgitignore

WordPress で無視したいもののリスト。

  • .htaccess や MacOSが作る不可視ファイル
  • ログ
  • WordMove や wp-cli の定義ファイル
  • サイトマップ
  • バックアップ関連
  • sql のダンプファイル
  • wp-config.php
  • WordPress からアップロードされる画像などのメディア

は git 管理から外す。いつも忘れてしまうので、毎回これを使う。

WordMove の Movefile

こちらも忘れると危なっかしいもの。

リモートでは、 git レポジトリを公開領域とは別の場所に作る

git init --separate-git-dir ..

公開ディレクトリに .git ディレクトリがいるといけないので、別の場所に作る。たとえば、ひとつ上のディレクトリ( .. )とかホーム( ~/git-projectname )とかを指定する。

gulpfile.js

themes/theme-name/gulpfile.js として設置。

  • sass ディレクトリ内から css ディレクトリ内にコンパイル
  • sourcemap を sass ディレクトリに配置
  • sass/*.scss, js/*.js, テーマ内のすべての php ファイルの行進をウォッチしてリロード
  • 使っているもの
    • gulp, gulp-sass, gulp-autoprefixer, browser-sync, gulp-plumber

gulpの件、browser-sync をWordPressでというところ、sの人さんにヒントもらいました。

今できてないのが、http://localhost:3000 じゃないアドレスでできないの?というところです。知っている方いらしたら、コメントか @shinichiN までお願いします。

memo: http://stackoverflow.com/questions/27755206/using-the-original-url-not-proxy-with-browser-sync

↓ プラグインを作る方々への本、書きました。 ↓