2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

hostsで本番環境とテスト環境を切り替える運用から、プロキシで切り替える方式に変更する

Posted at

いまだにhosts運用ですか?

本番環境にいきなり適用するのは怖い。
でもテスト環境用に別リソース用意するのは面倒。

わかります。結果本番をコピーして、別環境にデプロイしますよね。
テストして気付きます。

「ソースコードにIPアドレスとかドメインをハードコーディングしていますよ」

トップページの画像やScript、CSSが読み込めません。
はい。動きません。
テストできません。

そんなとき、テストクライアントの hosts 変更で対応しますね。

これ、とっても面倒です。
hostsは管理者権限必要ですし、エディタ開くのも面倒です。

スマホの実機で確認できないじゃないですか

はい。今の時代、ウェブサイトをスマホで見る想定がありません、なんていう運営者はいないですね。
ChromeのDEV Toolでレイアウトは確認できるでしょうけど、Scriptの動作まで確認できません。
実機では違う動作するかもしれませんよ。

プロキシで丸っと解決だ!

ローカルWindowsPCにプロキシ構築して、どちらも解決しちゃいましょう。
使うのは Squid です。
無料かつシェアが高そうなので利用しています。

ネットワークのイメージはこんな感じ

通常時のネットワークイメージ

image.png

テスト時のネットワークイメージ

image.png

Squidのインストール~設定

ダウンロード

公式サイトバイナリイメージダウンロード
こちらから、バイナリイメージをダウンロードしましょう。
通常のPCなら、左をクリックすれば、インストーラがダウンロードできますよ。
image.png

インストール

インストーラ起動して、どんどん Next してください。

起動

デスクトップにアイコンが出ます。
image.png

あれ、クリックしても何も起きないよ?
ではありません。
ちゃんと右下のタスクトレイにアイコンが出現しています。

image.png
※夜更かししちゃダメ

ちなみに、英語圏のネイティブの方々は、イカのことを「Squid (スクィード)」というそうです。
由来はわかりませんが、開発コードなんだとか。

設定

タスクトレイのアイコンを右クリックします。
image.png
Open Squid Configuration をクリックします。
エディタが起動します。
最後に、hosts と同等のことをするための設定ファイルの場所がありますので、確認してください。
Squidの通信ポート番号も確認忘れずに。
image.png
image.png

上記で確認した hosts.txt を開いて、以下のフォーマットで変換テーブルを作成します。
気を付けたいのが、次の通り
-余計なスペースや改行、タブは入れない
-IPアドレスとドメインの間はスペース1つ
こちらを参考にしてください。
@non_z250 いつもありがとうございます。

hosts.txt
yy.yy.yy.yy hogehoge.com

プロキシ経由にする設定をしましょ

タスクトレイのネットワークアイコンを右クリック
image.png
または、設定から「ネットワークとインターネット」をクリックします。
image.png
左ペインに「プロキシ」がありますので、クリック。
image.png

手動プロキシ セットアップ の項を次のように設定
image.png
「保存」をクリックするのをお忘れなく。

スマホからは、Wifi経由で、SquidをインストールしたPCをプロキシにして接続します。
Wifiの詳細設定を開きます。
プロキシ-手動 という項目がありますので、こちらで、👆と同様の設定をします。
image.png
image.png
「192.168.1.xxx」のところは、SquidをインストールしたPCのIPアドレスを入れてくださいね。
PCのIPアドレスは、PCのコマンドプロンプトで ipconfig しちゃってください。

以上で、プロキシを使ってインターネットに接続されました。

普段は通常の状態にして、テストのときにプロキシ経由にすれば、テストサーバに接続されますね。
hostsよりも簡単&安全だし、スマホからもテストサーバに簡単に接続できるようになりました。

参考

ログがたまります。
/Squid/var/log/squid/ にあるので、適宜削除がよろしいかと。

まとめ

今回はテストサーバと本番サーバを切り替えることと、スマホ実機からテストサーバへの接続に Squid を使うことを提案してみました。
私の受注している案件の、歴代のエンジニアさんたちが、本番にアップロードするまでスマホ実機でチェックできない、などと脈々と受け継がれたマニュアルに終止符を打つことができました。
困っている人多いんでしょうね。

ちなみに言わせていただきますと、 ホストに関する情報をハードコーディングすることがよろしくない んですよ。
でも、そうなっていないことが良くあるんですよね。

今度はハードコーディングの起こす落とし穴をまとめてみたいです。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?