先日、便利なツールを探り当てましたのでご報告させていただきます。
WEB開発にあたって、複数の環境を使う場合がほとんどですのでそちらについて端折り気味に説明を致します。
1.環境（用途）
Ａ ）開発環境：開発者が開発するための環境（開発者の人数分だけ必要）
Ｂ ）テスト環境：開発者が開発したものを第三者レベルで検証するための環境
Ｃ ）ステージング環境：クライアントに検収していただくための環境
Ｄ ）プロダクション環境：本番を運営するための環境
大枠的には上記４つ。Ｂ）テスト環境がＣ）ステージング環境の役割を兼ねる運用もありますし、Ａ）とＤ）のみの運用もあります。
2.パターン（役割）
１）Ａ、Ｂ，Ｃ，Ｄ、それぞれを一台のサーバーで計４台
２）Ａ＆Ｂで一台、Ｃで一台 、Ｄで一台のサーバーで計３台
３）Ａ＆Ｂで一台のサーバー、Ｃ＆Ｄで一台のサーバー、計２台
４）Ａ＆Ｂ＆Ｃで一台のサーバー、Ｄで一台のサーバー、計２台
など台数も運用形態によってさまざまです。場合によってですが、一台のサーバーに開発環境、テスト環境、ステージング環境、プロダクション環境を詰め込むのもアリです。
プロダクション環境用に取得したドメインの配下にサブドメインを登録する場合がほとんどですが、
開発用ホスト（ドメイン）：dev1. abc.com、dev2. abc.com、dev3. abc.com、dev4. abc.com
テスト用ホスト （ドメイン）：test.abc.com
ステージング用ホスト （ドメイン）：stg.abc.com
プロダクション用ホスト （ドメイン） ：www.abc.com
としたとき、ここで出番なのがDNS・HOSTSファイルです。
3.まずはＤＮＳでの運用
利用者として一番わかりやすいのはDNSによる運用です。管理者がDNSに登録したホスト名をブラウザのアドレスバーに打ち込むだけです。
ただ、何らかの事情によりDNSにレコード追加したくない、反映までタイムラグが発生する、などの理由によりDNSでの運用を見送られるケースもあります。プロダクションとステージングはDNSに登録するけどテストと開発は登録しないケースもあります。
そのようなときに使用するのがHOSTSファイルへの追記による運用です。
4.次にHOSTSファイルでの運用
HOSTSファイルの書き換えによる運用
123.45.66.890 test.abc.com #テスト環境
123.45.67.891 dev1.abc.com #開発者Aの環境
123.45.67.892 dev2.abc.com #開発者Bの環境
123.45.67.893 dev3.abc.com #開発者Cの環境
123.45.67.894 dev4.abc.com #開発者Dの環境
こんな感じの追記ですね。
今度はHOSTSファイルへの書き換えが手間なケースです。
プロダクション環境（123.45.67.891）：www.abc.com
ステージング 環境（123.45.67.892）：www.abc.com
?
…。
サーバー（IPアドレス）はちがうけどホスト名は同じ。このような場合はプロダクションホスト利用時にはDNSによるアクセス、ステージングホスト利用時にはHOSTSを利用しアクセス。
123.45.67.892 www.abc.com
⇅コメントアウトを付け（プロダクション環境にアクセス）、外し（ステージング環境 にアクセス）の繰り返し
#123.45.67.892 www.abc.com
都度都度、HOSTSファイルの書き換え（コメントアウトを付けたり＆外したり）が面倒です。
ここで困っていたところネットサーフィンでブラウザのアドオンを発見しました。
5.ブラウザのアドオンを利用する運用（hostsファイルの編集が面倒な時）
クロームとファイヤーフォックスで別の設定するのかと思いきや、「Virtual Hosts」「LiveHosts」の２つを入れるとクロームブラウザ内のタブ毎、ウインドウ毎で別々の設定が出来ます。
LiveHostsクローム版、LiveHostsファイヤーフォックス版
Virtual Hostsクローム版、Virtual Hosts ファイヤーフォックス版
何故か、片方だけでは動きませんでした。
これを利用することによりhostsファイル内のコメントアウトを付けたり外したりする必要がなくなります。
クロームブラウザのタブＡではhttp://www.abc.com/（プロダクション環境） ?DNSによるアクセス。
クロームブラウザのタブＢではhttp://123.45.67.892/（ステージング環境 ）?Tab SandboxをEnableにし、Virtual Hostsでアクセス。
?
これで並べて挙動を確認しながらの作業が可能になりました。
同一ホスト名でIPアドレス違い（同一環境の別サーバー）の場合はとても重宝しますが、逆に同一IPアドレスでホスト名違い（サーバー内に複数の環境を作成）の場合はHOSTSファイルへの追記運用の方が楽です。コメントを付けたり、外したりする必要が無いので。
6.ポート番号で切り分ける運用
ポート番号で環境を分けるパターンもあります。
http://test.abc.com/ ?テスト用環境
http://test.abc.com:9001/ ? 開発者Ａ用 環境
http://test.abc.com:9002/ ? 開発者Ｂ用 環境
http://test.abc.com:9003/ ? 開発者Ｃ用 環境
http://test.abc.com:9004/ ? 開発者Ｄ用 環境
?
DNS、HOSTSファイルに登録する場合にも「 test.abc.com 」の分だけ登録すればＯＫです。開発者Ｅ、Ｆ、Ｇ用に追加する場合もDNS・HOSTSファイル のメンテは不要です。
http://localhost:13001/ ?ＷＥＢサイトＨの開発環境
http://localhost:13002/ ?ＷＥＢサイトＩの開発環境
http://localhost:13003/ ?ＷＥＢサイトＪの開発環境
http://localhost:13004/ ?ＷＥＢサイトＫの開発環境
?
ローカルホスト内に複数サイトの開発環境を詰め込むのもアリです。ＷＥＢサイトＬ、Ｍ、Ｎの開発環境を追加するときもDNS・HOSTSファイル のメンテは不要です。
7.フォルダで切り分ける運用
https://test.abc.com/aoki/
https://test.abc.com/itoh/
https://test.abc.com/ueno/
https://test.abc.com/etoh/
?
このようにフォルダでわけるパターンもありますが、あまりメジャーではないですね。絶対パスが使えませんし…。
以上ＷＥＢ開発の小技（こわざ）でした。ありがとうございました。
8.最後は息抜きを
堅苦しい話でしたが、最後にお気に入りのラーメンのショットを添付します。美味しそう！食べたい！と思った方は「イイね」ボタンの押下をよろしくお願いいたします。? ? ? ?
