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

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

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

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

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

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

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

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

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

#プロキシで丸っと解決だ！

ローカルWindowsPCにプロキシ構築して、どちらも解決しちゃいましょう。
使うのは **[Squid](http://www.squid-cache.org/)** です。
無料かつシェアが高そうなので利用しています。

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

##通常時のネットワークイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/e4470cd2-5330-4272-6026-d35851932d52.png)

##テスト時のネットワークイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/ec5da23e-350e-ca8b-4f48-fdcbd9a4f712.png)


#Squidのインストール～設定
##ダウンロード
[公式サイトバイナリイメージダウンロード](https://squid.diladele.com/)
こちらから、バイナリイメージをダウンロードしましょう。
通常のPCなら、左をクリックすれば、インストーラがダウンロードできますよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/0334f6b8-2cfa-458d-1e6b-b55532d8f791.png)

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

##起動
デスクトップにアイコンが出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/dfbc0a60-f371-6600-b61e-4837c8b18cb6.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/a10f48fa-9c6a-91c0-df4a-2c55bf61c895.png)
※夜更かししちゃダメ

ちなみに、英語圏のネイティブの方々は、イカのことを「Squid （スクィード）」というそうです。
由来はわかりませんが、[開発コードなんだとか。](https://www.robata.org/docs/squid/faq_1.html#L-3)

##設定
タスクトレイのアイコンを右クリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/a582dbf1-0f80-ab76-4c3a-180fa3049ce9.png)
**Open Squid Configuration**　をクリックします。
エディタが起動します。
最後に、hosts と同等のことをするための設定ファイルの場所がありますので、確認してください。
Squidの通信ポート番号も確認忘れずに。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/23683432-e73f-cd6a-40f3-ef13135a62a5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/7e2b8d33-d68c-e2ea-00b7-97d47261c13d.png)

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

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

#プロキシ経由にする設定をしましょ
タスクトレイのネットワークアイコンを右クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/50673711-7432-512a-1080-4faf161c1a18.png)
または、設定から「ネットワークとインターネット」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/96addef9-edb2-220d-0e10-19c9e553359b.png)
左ペインに「プロキシ」がありますので、クリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/04d0ac1e-d2b2-e2ae-a4c4-fd315b035c07.png)

手動プロキシ セットアップ　の項を次のように設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/b78865e6-8f8a-57ed-88b7-c98cc72a03c5.png)
**「保存」をクリックするのをお忘れなく。**

スマホからは、Wifi経由で、SquidをインストールしたPCをプロキシにして接続します。
Wifiの詳細設定を開きます。
プロキシ-手動　という項目がありますので、こちらで、👆と同様の設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/ec6dcc27-b839-a927-68ac-c86c7bfe9e16.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/53c523e0-60ea-4fa4-3838-90ff1ba607cf.png)
「192.168.1.xxx」のところは、SquidをインストールしたPCのIPアドレスを入れてくださいね。
PCのIPアドレスは、PCのコマンドプロンプトで ipconfig しちゃってください。


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

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

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

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

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

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