YouTube動画では一見簡単に思えても、ウェブ開発は複雑で高度な仕事です。本番サイトでの問題を最小限に抑えるには、変更を事前にテストするのがベストプラクティスです。変更のテストにはステージングサイトが便利です。

ステージングサイトは本番サイトの複製で、本番サイトに影響を与えることなく、サイトを編集したり更新したりすることができます。作業後は、本番サイトに変更を反映可能です。

この記事では、WordPressのステージングサイトとは何か、そして作成方法をご紹介します。

WordPressステージングサイトの作成方法について動画での解説もご用意しています

WordPressステージングサイトとは

ステージングサイトとは、公開されることのない本番サイトの複製です。ステージングサイトで作業しても本番サイトに影響することはないため、ストレスなく作業を進めることができます。その後、更新や変更内容に問題がないことを確認した上で、本番サイトに反映することも可能です。

適切なツールさえあれば、ステージングサイトの作成は非常に簡単です。多くのホスティングサービスは、ステージングサイトの作成および本番サイトへの反映機能を提供しています。

ステージングサイトとローカル開発環境は、どちらも本番サイトの複製である点は共通していますが、一般に前者の方が本番サイトのインポートや反映が柔軟である傾向にあります。また、本番サーバーを必要とするインタラクティブなサイト要素も扱うことも可能です。

この要素については、後ほど詳しくご説明します。

WordPressステージングサイトを作成するメリット

ローカルの開発環境を使用していても、ステージングサイトは作成することをおすすめします。本番サイトに影響を与えることなく、特定のサイト要素を編集できるということはすでに触れた通り。

その他のステージングサイトの重要な特徴として、他の動的コンテンツに触れることなく特定の要素を編集できます。

サイトに投稿されるコメントがその一例です。

ウェブサイトのコメント欄
ウェブサイトのコメント欄

コメントは動的コンテンツであり、もし停止してしまうと、ステージングサイトで作業をしてから変更を反映するまでの間に投稿されたコメントが消えてしまいます。

さらに、ステージングサイトはサーバー構成のテストベッドとして機能します。優れたローカル開発環境であれば、サーバーのセットアップを再現できる場合があります。

DevKinstaのサーバー設定
DevKinstaのサーバー設定

とは言え、本番サーバーに代わることはありません。ステージングサイトでは、本番サイトがどのように動作するかを確認し、必要があれば訪問者に影響を与える前に変更することができます。

これは、WordPressのステージングサイトの以下のようなメリットにも関連しています。

  • 一般公開する前に新機能をテストすることができる─アクセス数、直帰率、総合的な分析に不可欠で、WordPressのコア、テーマ、プラグインを更新し、発生した問題を公開前に修正することができます。
  • 本番サイトがダウンすることがない─高い稼働率の確保は、サーバーにとってだけでなくビジネスにも重要です。

他にも、全体で使用するリソースを抑えることができる点、開発者が作業しやすい点(これについては後ほど詳しく)もメリットに挙げられます。

ステージングサイトでの開発作業

プロの開発者の手を借りずにサイトを制作しようとしている場合は、一度考え直してみてください。少なくとも、サイトの外観や運営方法について、第三者の意見を取り入れることをおすすめします。

開発者を採用するメリットはいくつかありますが、最大のメリットは、プロの経験や知識を活かし、サイトを配信するための手間を最小限に抑えられることです。

通常、開発者のアプローチには、以下のような重要なステップがあります。

  • ただ手当たり次第で進めるのではなく、綿密な計画段階を踏んでサイトを構築する
  • ソフトウェアスタックは使用できる機能を決定するため不可欠(サイトのパフォーマンスとスケーラビリティにも影響)
  • 質の高いサイトを維持するため、時間をかけて見直しとバグの修正を行う

ステージングサイトは、サイト構築プロセスのすべての段階において重要な役割を果たします。最初の段階ではストレステスト。これによって、サイトの今後の方向性や可能性を判断することができます。

また、他のソフトウェアへの移行(jQueryVanilla JSで代用など)やReactへの切り替えもテストすることができ、開発者が本番環境で何が実現可能かを確認することも。

さらに、バグ修正やレイアウトの改善にも役立ちます。開発者を採用していれば、現在のサイトをステージングサイトにインポートし、目立った問題を修正して、自社で気づいていなかった側面などにコメントしてくれます。

ローカルの開発環境は、サーバーリソースを消費することなく、サイトを隅々まで確認するのに有用です。ステージングサイトは、そんなローカル環境と本番環境をつなぐ重要な役割を担い、他の環境では得られない洞察を与えてくれます。

ステージングサイトを使用するタイミング

ここまでで、サイトの開発時には常にステージングサイトが有用になることがわかりましたが、本番環境に直接変更を加えることのないよう、ステージングサイトの活用は、習慣化することをおすすめします。

例えば以下のような状況では、ステージングサイトを利用したいところです。

  • テーマ、プラグイン、WordPressコアなどの簡単な更新(サイトを壊す可能性がある)
  • プラグインやテーマのインストール(訪問者に公開することなく機能や仕様のテスト、細部の編集が行える)
  • コードベースの大幅な変更(ステージングサイトは本番サイトとローカル環境の「仲介役」として機能するため、混乱などを軽減する)

テーマ、プラグイン、WordPress自体を本番サイトで直接更新することはできますが、推奨されません。また、問題が検出されたプラグインを更新したり、WordPressのメジャーリリースをインストールしたりする際は、まずは必ずステージングサイトで実行しましょう。

サイトの安定性には常に注意を払いましょう。訪問者や顧客に影響を与えたり、悪い印象を与える可能性がある変更や更新は、必ずステージングサイトでテストするようにしてください。

ステージングサイトを使用する際の注意事項

ステージングサイトは、利用しているホスティングサービスで利用できる機能があるかどうかに関わらず、その必要性を検討した上で作成しましょう。

ステージングサイトを作成する前に、例えば以下のような点を考えてみてください。

  • ステージングサイトで本番サイトのすべての機能を使用できるか
  • 他の部分(コメント欄など)には影響を与えず、特定の要素を本番サイトに反映することができるか
  • 特定の要素をローカル環境に取り込み、サーバーから離れて編集することができるか

上記はサイト所有者であれば必ず検討したい一般的な懸念事項であり、サイトによってはまた特定の注意点が挙げられるかもしれません。WordPressブロガーのChris Lema氏によるステージングサイトの必要性に関する記事(英語)も参考にしてみてください。

また、以下のようなサイトや要素にも、それぞれ確認が必要です。

  • ECサイトすべての決済プロセスをステージングサイトで再現できるか(消費者の決済体験の決定に不可欠)
  • プラグインとテーマ:サーバーアクセスが必要になるJetpackのようなプラグインがステージングサイトで機能するか
  • 動画と配信:機能を完全に再現できるか、またステージングサイトで表示される動画が本番サイトと同じであるかをどのように判断できるのか

このような確認点は、環境やサイト、要件によって異なります。計画段階で開発者に協力をお願いすれば、経験をもとに、上記のような注意点を確認してくれるはずです。

WordPressステージングサイトを作成するには(3つの方法)

それでは、WordPressのステージングサイトを作成する方法を見ていきましょう。手順の簡単なものからご紹介していきます。

3つの方法を比較し、自社に合った方法を実践してみてください。

1. ホスティングサービスのステージングサイトを使用する

まず最初の方法は、利用しているホスティングサービスの機能を使用すること。すべてのホスティング会社が提供しているわけではありませんが、優れたサービスであれば利用できるはずです。例えば、Kinstaでは、各プランに任意で追加可能なプレミアムステージング環境アドオンをご用意しています。現在、Kinstaで利用されているステージングサイト数は51,000に上ります。

お使いのホスティングサービスでステージング環境を利用できる場合、通常以下のような特徴があります。

  • 自動のステージング環境は、本番サイトを瞬時に複製することができる
  • WordPressのステージングサイトは、プライマリドメインのサブドメインを使用する(後ほどご説明します)

Kinstaのステージング環境の使用方法はこちらでご紹介していますが、大まかな手順は以下の通りです。

  1. MyKinstaでサイトを選択
  2. 画面上部の「Live」をクリックし、「新規環境の作成」を選択
  3. 「プレミアム環境」(有料)または「標準環境」(無料)を選択
  4. ステージングサイトが立ち上がるまで最大15分待つ

ステージング環境には独自のサブドメインが割り当てられ、Secure Sockets Layer(SSL)の設定も引き継がれます。

また、MyKinstaでサイトのバックアップを復元し、ステージングサイトを本番サイトに反映することも可能です。

ステージングサイトを本番サイトに反映
ステージングサイトを本番サイトに反映

Kinstaのステージング環境は、業界トップクラスであると自負していますが、DevKinstaを組み合わせれば、さらにサイト管理が効率化できます。

DevKinstaとステージングサイトを組み合わせる

MyKinstaには、本番サイトの作成と管理に必要なほぼすべての機能が搭載されています。ローカル環境で作業を行いたい場合には、DevKinstaが有用です。

DevKinstaは、ウェブ開発者とサイト所有者向けのローカル開発ツールで、誰でも無料で利用することができますが、Kinstaのお客様専用の機能もあります。

DevKinsta
DevKinsta

数回のクリックでWordPressサイトをローカルに作成できるだけでなく、実際のサーバー環境を整えるのに役立つ機能も満載です。KinstaのブログでもDevKinstaについては度々取り上げていますが、今回注目したいのは、変更内容をKinstaに反映する機能。

DevKinstaの「Kinstaに反映」ボタン
DevKinstaの「Kinstaに反映」ボタン

このボタンをクリックすると、変更を反映したいKinstaのステージングサイトを選択して、インポートすることが可能です。つまり、開発プロセス全体を通して、Kinstaのエコシステム内にとどまることができます。

まずは、DevKinstaでKinstaサイトをインポートします。

DevKinstaで「Kinstaからインポート」を選択
DevKinstaで「Kinstaからインポート」を選択

DevKinstaにサイトをインポートしたら、作業に取り掛かりましょう。変更を終えたら、「Kinstaに反映」をクリックし、サイトをホスティングサーバーに戻します。サイトを公開する準備ができたら、MyKinstaの「本番環境に適用」をクリックするだけでOKです。

2. プラグインを使ってステージングサイトを作成する

ご利用のレンタルサーバーにステージングサイトを作成する機能がない場合は、サーバーの移行を検討することをお勧めしますが、プラグインを使って作成する方法もあります。

数あるWordPressプラグインの中には、ステージング環境を作成できるものも。WordPressの管理画面上で使用でき、ホスティングサービスの機能に匹敵する機能性があります。ただし、ステージングプラグインとDuplicatorのようなサイト複製プラグインはいくつかの点で異なります。

Duplicatorはサイトを複製する優れたプラグインですが、ステージングサイトの特徴である擬似的なバージョン管理を行うことはできません。

サイト複製プラグインはステージングサイトの作成に理想的と説明する記事を目にすることがありますが、基本的には推奨されません。ただし、DevKinstaのようなローカル開発ツールの代わりにはなり得ます。

ステージングサイトの作成には、WP StagecoachWP Stagingのようなプラグインがおすすめです。

WP Stagingウェブサイト
WP Stagingウェブサイト

WP Stagingには以下のようなメリットがあります。

  • サイトを素早く複製できる
  • すべての操作が使い慣れたWordPress管理画面内で完結
  • 特定のデータベーステーブルやフォルダを除外できる
  • 反映するファイルやテーブルを選択できる

一般的なプラグイン同様、WP Stagingをサイトにインストールしてください。一部機能に制限のある無料版有料版の2種類があります。

プラグインをインストールしたら、「WP Staging」>「Sites / Start」に移動し、「Create New Staging Site」をクリックします。

WP Stagingでステージングサイトを作成
WP Stagingでステージングサイトを作成

すると「Scanning」画面が表示されます。ステージングサイトの名前を入力し、以下の設定を行いましょう。

  • Database Table:複製するテーブルを選択
  • FIle:コピーするフォルダ、ディレクトリを選択
  • Advanced Settings(有料版のみ):ステージングサイトを別のデータベースや独自のディレクトリにコピーしたり、本番サイトのアップロードを「シンボリックリンク」したりなど、複数の設定が可能

「Start Cloning」をクリックすると、ステージングサイトの作成が開始されます。

WP Stagingでステージングサイトを作成
WP Stagingでステージングサイトを作成

ステージングサイトが作成できると、ステージングサイトで作業するための詳細情報が表示されます。

ステージングサイトの作成が完了
ステージングサイトの作成が完了

ステージングサイトにアクセスすると、以下のようにツールバーがオレンジ色に変わります。

WordPressステージングサイト
WordPressステージングサイト

ここで加えた変更を本番環境に反映し、WordPressの管理画面でステージングサイトを管理することができます。

3. 自分でステージングサイトを作成する

最後にご紹介する方法は、最も難易度が高く、効率的とは言えません。特別な状況でない限りは、上でご紹介したいずれかを選択してください。

「手動」で作成するということは、必要なコンポーネントをすべて構築し、大部分を自動化せずにサイトをデプロイする方法です。これには、以下のような大きなデメリットがあります。

  • 手作業では、ワークフローでエラーが発生する確率が高くなる
  • ソフトウェア間でサイトデータを同期する方法がない
  • 選択したデータ、テーブル、ファイルを本番サイトに反映することができない

つまり、Duplicatorのようなプラグインを自分で作成することになります。このような手間のかかる作業に抵抗がなければ、いくつかメリットがある可能性があります。

例えば、ステージングサイトを構築し、狭い範囲の機能や仕様をテストできる点(WordPressコアの更新など)。ステージングサイトでの動作に満足したら、本番サイトに変更を適用することができます。

しかし、もちろん必要な作業が重複することになり、これもまた欠点と言えます。

この方法が適しているかどうかは、状況と要件次第です。自分でステージングサイトを作成するには、以下が必要になります。

また、完全なバックアップを作成してください。手作業でのステージングサイト作りは常に危険と隣り合わせ。最悪の事態に備えて、バックアップは必ず用意しておきましょう。

以下の7ステップを踏んで、作成していきます。

  1. ホスティングサービスのコントロールパネルでサブドメインを登録
  2. ステージングサイト用のSFTPアカウントを設定
  3. WordPressのファイルをステージングサーバーにアップロード(ベストな方法はWordPressを新規インストールして、themepluginsuploadsフォルダをアップロード)
  4. 本番サイトからデータベースをエクスポート
  5. コントロールパネルでステージングサイト用のデータベースを作成
  6. AdminerなどのSQLマネージャーで、データベースをステージングサーバーにインポート
  7. ステージングサイトを反映するためにwp-config.phpを更新

各ステップでの詳細な手順は自社および利用しているホスティングサービスによって異なることが予想されます。複雑な方法ですが、初心者でも実現できないことではありません。ただし、実装にかかる時間や手間を考えると、他の方法の方がやはり効率的でしょう。

自分で作成したステージングサイトのデプロイ方法

自分でステージングサイトを立ち上げたら、当然デプロイも自分で行わなければなりません。マネージドホスティングでは、デプロイは通常自動化されますが、この方法では利用できません。

PHPやSQLに精通しているバックエンド開発者であれば、自動デプロイメントを実装できるかもしれませんが、変更をデプロイするのではなく、ステージングサイトで変更を複製することをおすすめします。

まとめ

WordPressのステージングサイトは、サイトを壊す可能性のある変更や更新を行う際に非常に便利です。また本番サイトとは切り離されているため、開発者が作業しやすいのもメリットです。

今回はステージングサイトを作成する方法を3種類ご紹介しました。最後にご紹介した自分で作成する方法は管理上、非常に厄介になる可能性があります。WP Stagingのようなプラグインを使用する方法もありますが、ホスティングサービスのステージング環境を利用するのが理想的です。さらに、DevKinstaのようなローカル開発ツールを組み合わせることで、サイトを本番環境で公開する前に、ローカルサイトをステージングサイトに移行することができます。

WordPressのステージングサイトを使用していますか?またはこれから作成予定ですか?以下のコメント欄でぜひお聞かせください。

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.