開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

WordPressステージング環境の簡単な作り方

最終更新:2017-02-15 by Joe

top_slide01
出典:キューピー3分クッキング

ワードプレスでテーマ開発をしていると、本番データと同期した開発環境や、テスト環境がだいたい欲しくなります。そんな時がステージング(staging)環境の出番です。

「そうだ、ステージング環境を作ろう!」

今回、最も本番環境に近いテスト環境」として、本番のデータベースを直接参照しながら、新しく変更を加えたテーマのソースコードをさくっとテストできる環境を用意します。

「ステージング環境って?」という方はまず「開発・検証・ステージング。それぞれの環境の違いと役割」をご覧下さい。

ワードプレス開発において、多くの場合はワードプレスの「テーマ」を開発していると思います。

 

さて、いまから作ろうとしているのは以下のような環境です。

screen-shot-2016-11-21-at-11-33-59-pm

 

テーマのコードセット(wp-content/themes/<あなたのテーマ>)のコードだけがテストできればいいわけですね。

このテスト環境を「本番と同じサーバーに」作ってしまいます。大前提としては、「開発したテーマを、本番データを直接使ってテストする」ですね。本番に反映する本当に直前の確認です。

ただし、いけてないテーマのコードを上記のステージング環境にアップすると、サーバー自体がダウンしたり、本番データを壊してしまったりするので、適していません。

また、データに依存する機能をテストしにくい場合があります。開発している新しい機能に必要なデータが、本番の振る舞いに影響を与えてしまうようなケースがアリ得るからです。これを迂回するために、設計上、後方互換を保つようにデータ構造の変更を設計したりもします。うまくやれば、先に新機能用のデータを本番に作成し(でも振る舞いに一切影響を与えない)、その後、新しいテーマの機能をテストできるという目論見です。(話が細かいのでこれ以上は割愛します)

さておき、データを本番とは独立させて安全に開発する方法をお探しの方は、いわゆる「ステージング環境」ではなく、本番環境とは別のサーバーに、テスト用の環境を作り、データを同期させる」などのアプローチのほうが適切だと思います。

→別記事「WordPressデータベースを本番環境と同期する方法まとめ」(執筆中)をお読みください。

え、そもそも「ステージング」って何なの?って人はどうかこちらをお読みください:
開発・検証・ステージング。それぞれの環境の違いと役割

ではさっそく、ステージング環境を作っておいて、簡単にテストできるようにしましょう。まずは手順のサマリから。

Wprdpressステージング環境の作り方サマリー

(1)本番サーバーで、本番のWorpdressとは別のディレクトリに、もう一つWordpressをインストールする。(これをステージング環境にします)

(2)適当にサブドメイン(完全に別ドメインでもOK)を登録して、そのドメインが、1でWordpressを配置したディレクトリを指すように設定。(バーチャルホスト設定)

(3)wp-config.phpを書きかえて、本番と同じDBを参照するにする。(本番のwp-config.phpを複製でもOK)。

(4)wp-config.phpに、DB内に登録されたサイトURLの値(home, siteurlの値)を参照しないよう設定を書き込む。このように:

※最後のスラッシュ(Trailing Slash)はいらないそうです。あっても動くけどね。

(5)最後に、ステージングにあなたの開発テーマをwp-content/themes/<your-theme-dir> と配置して完了。プラグインと本番と同じものを展開しておいて。(※本番環境のそれを参照することもできますが、今回はカバーの対象外)

 

以下、もうすこしだけ詳しく解説していきます。


(1)Wordpressディレクトリ構成

私は、個人的には、このような構成でワードプレスを作る事が多いです。筆者オススメの、さくらレンタルサーバーを例にとって行きます。

「my-website.com」は本番のURLなのですが、わかりやすいように、ディレクトリ名にも同じ文字列を使います。今回、ステージング環境なので「staging.my-website.com」というサブドメイン&ディクレトリ名でいきます。

ちなみに、さくらコンパネでは <あなたのユーザ名>.sakura.ne.jp / stating.my-website と入力して(下図参照)クイックインストールしてくださいね。何かフォルダ名を指定しないと、なぜか怒られますからね。

screen-shot-2016-11-05-at-3-12-36-pm

DBは本番と同じものを選択してください。ただ、レンタルサーバー業者によっては、インストール時にDBレコードが書きかえられてしまう事があるかもしれないので、かならず事前にSQLのバックアップ取ってから、お試しください。こわい人はいったん、仮のDBを作成してインストールして、あとで、wp-config.phpで参照するDBを変更する手順のほうがよいでしょう。

さて、さくらレンタルなら、これで、勝手に指定した名前でフォルダを掘ってくれて、そこにワードプレスが展開されるはずです。

確か、Xサーバーレンタルだと、コンパネからサブドメインを追加する操作をすると、強制的に同じ名前でサブディレクトリを掘られて、そこがルートディレクトリになるような動きをしていた気がします。まあ、いろいろですね。

 

(2)ステージング環境を指すドメインを設定

なんでもいんですけど、まあサブドメイン使うのが無難じゃないでしょうか。さくらレンタルの例です。サブドメインを登録して・・・

screen-shot-2016-11-05-at-3-02-35-pm

さっきのディレクトリをルートに指定する。以上。

screen-shot-2016-11-05-at-3-23-12-pm

(3)wp-config.phpで、本番と同じDBを参照する設定

さくらの、WPクイックインストールで、最初から本番のDBを向けた機能を使った人は、この手順は不要です。そうでない場合は、wp-config.phpを本番のWPからコピペすれば大丈夫です。

(4)DBの「サイトURL」の値を強制上書きさせる設定

これ便利な方法ですね。これで、データベース wp_optionsテーブル内の、siteurlとhomeの値を、動的に置き換えて動作してくれるようです。DBの値を書き換えることなく、振る舞いを変えられる、というわけです。

冒頭では、/path/to/staging-wordpress/と続けましたが、(2)の手順で、ドメインが指すルートにWordpress展開した場合は、上記のように空文字で(ホスト名だけで)大丈夫です。

この記述によって、テーマなどのWordpressの実行コードないでも、home_url(),  get_template_directory_uri()などの返り値が、変わります。あたかもDBの値が書き換わったように振舞う、ということですね。

 

(5)テーマとプラグインを展開

WordPressディレクトリの所定の場所に、テーマと、本番と同じプラグインを配置します。ここは説明不要でしょう。

 

以上です。できましたね。これで、wp−config.phpで、おなじDBを参照するように設定しても、別々のワードプレスが、おなじデータで動くきました。やった〜。

※このままだと、インターネットに公開されて、誰でも観れる&重複サイト認定されてしまいますので、ベーシック認証などで、蓋をするのを忘れずに。

参考:ベーシック認証のやりかた、さくらレンタルの方はこちら:
https://help.sakura.ad.jp/hc/ja/articles/206207041-ファイルマネージャーでアクセス制限をする

私もこの方法をおこなうまででは、いちいち本番のWordpressのSQLをダンプして、別の環境にインポートしたり、さらにそのあとDBに接続して、WP_OPTIONSテーブルの、siteurl, homeという値をテスト環境のを指すように書き換えて・・・、なんてやっていました。(最近はコマンドで1撃できるツールもあるようですが・・)、気持ち的にめんどくさくて辛かったです。

「そうだ、ステージング環境を(いいかげん)作ろう!」

そう思っては後回しにして、3回目くらいでようやく重い腰をあげました。ぐぐって、ぐぐって、適切そうな環境の用意を仕方を調べました。それを今回まとめてみました。

 

ちなみに、おなじWPコアファイル(プラグインも)を利用して、themeディレクトリ配下の、テーマだけをテストする方法もあります。

今回は紹介しませんが、これは/plugsinsや、/uploads配下のファイル群を本番と全く同じものを利用できるので、データのシンクは一切いりません。テーマ以外を本番と同一の条件でテストできます。こちらはまた次回ご紹介しますね。

 

おまけ:ワードプレス豆知識

蛇足ですが、siteurlとhomeという値は、名前が紛らわしいことで有名です。

siteurlは、ワードプレスのルートディレクトリ、一方で、homeは、ユーザがブラウザのアドレスバーに見ることになる、いわゆるトップページのURLを入力する場所だ。それぞれ、管理画面 > 設定で、いつも変更できる値ですが、今回紹介したように、define(‘xxx’, ‘zzz’)で上書きの記述を行うと、管理画面ではフィールドがグレーアウトされて変更できなくなります。

 

参考サイト:wp-config.php の編集

https://wpdocs.osdn.jp/wp-config.php_の編集