Web制作コラム

ステージング環境とは|開発環境との違いと、本番への反映の自動化

用語・技術解説

更新やデザイン変更を本番で試すのは、営業中の店舗を改装するようなものです。開発環境との役割の違い、作り方、そして本番への反映を自動化する形までまとめます。

ステージング環境とは、本番と同じ中身を持つ確認用のサイトです。テスト環境、検証環境とも呼ばれます。ここで試してから本番に反映することで、訪問者に壊れた画面を見せずに済みます。

何に使うか

  • WordPress本体やプラグインの更新を試す
  • デザイン変更を見てもらう
  • 新しい機能を試す
  • 移行やリニューアルの作業場所にする

特に更新の確認に価値があります。本番で更新して壊れると、復旧のあいだサイトが止まります。先に試しておけば、壊れることが分かった時点で止められます。

開発環境との違い

ステージング環境と開発環境は、同じ「本番ではない場所」ですが役割が違います。混同すると、作業中の状態をお客様に見せてしまったり、逆に確認用の環境で直接開発を始めてしまったりします。

開発環境ステージング環境本番環境
目的コードを書く・壊す本番と同じ条件で確認する訪問者に見せる
置き場所作業する人のパソコン本番と同じサーバー本番サーバー
見る人作業者だけ作業者・社内・依頼主訪問者
中身のデータサンプルでよい本番の複製本物
壊れてよいか壊れて当然壊れても困らない絶対に壊せない
人ごとに1つサイトに1つサイトに1つ

※ 横にスクロールできます

開発環境は、作業する人それぞれのパソコンにあるものです。保存するたびに画面を見て直す、という作業はここでやります。サーバーに上げてから確認していると時間がかかりすぎます。

ステージング環境は、書き終えたものを本番と同じ条件で確かめる場所です。PHPのバージョン、サーバーの設定、SSL、メールの送信といった「パソコンの中では再現できないもの」を確認します。依頼主に見てもらうのもここです。

開発環境だけで済ませると、手元では動くのに本番では動かないという事故が起きます。逆にステージングで直接コードを書き始めると、誰が何を変えたのか分からなくなり、本番へ反映する内容を特定できなくなります。2つは分けてください。

作り方は3つ

1. サーバーの機能を使う

多くのレンタルサーバーに複製を作る機能があります。ボタン1つで作れて、本番へ戻す機能まで付いていることが多いので、これが使えるなら一番簡単です。

2. サブドメインに複製する

stg.example.com のようなサブドメインを作り、ファイルとデータベースを複製します。機能が無いサーバーでもできます。

3. 手元のパソコンに作る

開発作業はここが一番速く進みます。ただしサーバーの設定まで同じにはならないので、サーバー側が原因の問題は再現しません。確認には 1 か 2 を併用します。

必ずやる設定

  1. 検索エンジンに出ないようにする(ベーシック認証をかけるのが確実です)
  2. フォームの送信先を確認用のアドレスに変える
  3. 決済や外部連携はテスト用の設定に切り替える
  4. アクセス解析のタグを外す(本番の数字が汚れます)

確認用のサイトが検索結果に出てしまい、本番と重複していると判断される事故があります。noindex だけでは漏れることがあるので、認証で閉じてください。

本番への反映は自動化したほうがよい

ステージングで確認できたものを本番に持っていく作業は、手作業にしないほうがよいです。FTPで必要なファイルを選んで上げる方法は、一見簡単ですが次の問題が起きます。

  • 上げ忘れる … 3ファイル直したのに2つしか上げず、本番だけ壊れる
  • 余計なものまで上げる … 作業用のファイルや、別の人の作業中のコードが混ざる
  • 誰が何をいつ反映したか分からない … おかしくなったとき、どこまで戻せばよいか特定できない
  • 戻せない … 上書きしてしまうと、直前の状態が残っていない

望ましいのは、ステージングで確認したものが、決めた操作1つで本番にそのまま反映される形です。同じものが同じ手順で届くので、上げ忘れも混入も起きません。

自動化のやり方

  • サーバーの機能を使う … レンタルサーバーのステージング機能に付いている「本番へ反映」を使います。追加の準備が要らないのが利点です
  • Git と連携する … テーマやプラグインのコードを Git で管理し、特定のブランチに反映した時点でサーバーへ配置します。develop はステージング、main は本番、という形が分かりやすいです
  • rsync で同期する … 差分だけを決まった範囲に送ります。対象のフォルダと除外するものを決めておけば、毎回同じ結果になります
  • 移行用のプラグインを使う … 画面の操作でファイルとデータベースを同期します。手軽ですが、データベースまで含むものは次の注意を必ず読んでください

どれを選んでも、大事なのは「手順が決まっていて、毎回同じ結果になる」ことです。Git で管理してあると、おかしくなったときに1つ前の状態へ戻せるという利点もあります。

データベースは自動同期の対象にしない

ここが一番の事故ポイントです。ステージングを丸ごと本番に上書きすると、その間に本番で増えた記事・問い合わせ・注文が消えます。取り返しがつきません。

  • 自動で同期するのはコード(テーマ・プラグイン)だけにする
  • データベースは本番のものを正とし、上書きしない
  • 設定の変更は、本番の管理画面で同じ操作をやり直す
  • アップロードした画像も、本番から消さない方向だけにする

逆方向(本番 → ステージング)にデータベースを持ってくるのは問題ありません。むしろ定期的に本番の複製を取り直しておくと、確認の精度が上がります。自動化するなら、こちらの向きだけにしてください。

本番を直接いじらない

自動で反映する形にしたら、本番のファイルを直接編集してはいけません。次の反映で上書きされて消えます。急ぎの修正であっても、ステージングで直してから流す、という順番を崩さないことです。

本番で1行だけ直したものが、翌日の反映で消えて原因が分からなくなる、というのは実際によくある事故です。急ぎのときこそ手順を守るほうが早く終わります。

運用を前提に用意します

当社では、納品後に手を入れる前提のサイトでは、確認用の環境と本番への反映の仕組みをあわせてご用意しています。テーマのコードを Git で管理し、確認できたものだけが本番に届く形です。更新が怖くて止まっている、本番を直接触る運用から抜けたい、という状態の解消からご相談いただけます。

「用語・技術解説」のコラム

この記事と同じカテゴリの記事です。

一覧に戻る

SERVICES

WordPressとECサイトの制作、
まとめてご相談いただけます

WordPress

WordPress制作・構築代行

デザインデータやコーディング済みHTMLを、オリジナルテーマとして構築します。プラグイン開発も対応。

構築基本費用 50,000円

詳しく見る
コーディング

コーディング代行

デザインデータをHTML/CSSに起こします。WordPress化まで通しでも、コーディングだけでも承ります。

1ページ 15,000円〜

詳しく見る
React

Reactコーディング代行

デザインデータをReactのコンポーネントとして実装します。既存アプリへの画面追加・UI改修だけでも承ります。

1ページ 18,000円〜

詳しく見る
Next.js

Next.js制作・コーディング代行

検索エンジンに読まれるHTMLを返せるNext.jsで構築します。静的書き出しでレンタルサーバーでも公開できます。

1ページ 18,000円〜

詳しく見る
EC / WordPress

WelcartでのECサイト構築

WordPress専用のネットショップ構築プラグイン。機能面まで踏み込んだカスタマイズができます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / EC-CUBE

EC-CUBEでのECサイト構築

国産オープンソースのECパッケージ。決済・受注・在庫まわりを業務に合わせて作り込めます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / ASPカート

ECサイト制作代行

Shopify・MakeShop・カラーミーなどのカートに、オリジナルデザインを組み込みます。

構築基本費用 100,000円

詳しく見る

制作のご相談も承っています

デザインデータと画面数をお知らせいただければ、お見積りと納期をご提示します。