hostsを使ったWebページ確認 3選

ことのはじまり

弊社の技術サポートのメール宛には、よくこのようなご依頼を頂きます。

• 「新しいサーバのWebページ表示の確認方法はどうすれば良い？」
• 「LBとかCloudFrontとかを導入した状態のページ確認がしたい！」
• 「新しいサブドメインを作ってもらったけど、確認方法がわからない。」

このような、通常では確認できない新しいサーバなどに設置したコンテンツを
ドメイン名を使って確認する方法を３つ、ご紹介させて頂きます。

TL;DL

今回はhostsを利用したページ確認方法を３つご紹介します。

1. curl のオプションを利用
2. hosts ファイルを書き換える
3. Chrome拡張機能「HostAdmin App」を利用する

hostsとは

Wikipediaの記事には下記のような記載がございました。

hosts（ホスツ）とは、TCP/IPを利用するコンピュータにおけるホスト名のデータベースで、IPアドレスとホスト名の対応を記述したテキストファイルである。

(https://ja.wikipedia.org/wiki/Hosts より)

簡単に例えるならば、タウン○ークのような電話帳を想像して頂けるとわかりやすいかと思います。

「スカイアーチネットワークス」に電話 → 「03-6743-1100」 というように、
「新しいサーバ」に接続 → 「新サーバのIPアドレス」 というものを設定するものです。

新品の携帯電話の様に、この電話帳のようなhostsに対応表を登録できるのです。

タウ○ワークをイメージ

登録するIPアドレス

まずは、hostsに登録するIPアドレスを確認します。

登録するIPアドレスは、 どこを経由してWebページを表示するのか によって変わります。
ここでは、よくあるパターン２つをご紹介します。

サーバ直接

サーバへ直接アクセスしてWebページ表示をする場合、グローバルIPアドレスを利用します。
AWSの場合は、 Elastic IPアドレス (EIP) や自動で割り振られたグローバルIPアドレスを利用します。

LB (ELB) やCDN(CloudFront) などを利用

サーバへ直接アクセスしない場合、一番最初の入口部分のグローバルIPアドレスが必要となります。

環境の構成によって異なりますが、
それぞれに用意されている ドメイン名 や グローバルIPアドレス をhostsに登録することで、
Webページへのアクセスが可能となります。

ここではAWSでの例をご紹介します。

例えば、ELBを経由してアクセスをしたい場合は、まずは ELBのエンドポイント名 を用意します。
下記のような文字列です。

hosts-skyarch-1234567890.ap-northeast-1.elb.amazonaws.com

次に、このエンドポイント名に紐付いているIPアドレスを検索します。
コマンドが利用できる方は、下記のようなコマンドを入力することでIPアドレスが得られます。

$ nslookup hosts-skyarch-1234567890.ap-northeast-1.elb.amazonaws.com
Server: 192.168.255.16
Address: 192.168.255.16#53

Non-authoritative answer:
Name: hosts-skyarch-1234567890.ap-northeast-1.elb.amazonaws.com
Address: 52.194.87.175
Name: hosts-skyarch-1234567890.ap-northeast-1.elb.amazonaws.com
Address: 52.197.159.89

また、この値はWebページでも検索することができます。

https://www.cman.jp/network/support/nslookup.html

1. このページのホスト名 FQDN に ELBのエンドポイント名 を入力
2. 「nslookup実行」を押す
3. IPアドレスが出てきます。

左が設定画面、右が実行後の画面。

CloudFrontの場合も、ELBのエンドポイント名 を Domain Name に読み替えることで、
同様にしてIPアドレスが検索できます。

また、この時 IPアドレスが複数 出てくる場合がありますが、お好きなもの１つ でOKです。

なお、ELBやCloudFrontの場合は、定期的にIPアドレスが変更になります。
既に設定しているのにつながらない！という場合は、再度IPアドレスを調べて設定してください。

hostsを利用したWebページ確認

ここまでで、hostsに登録するIPアドレスがご準備できたと思います。

それでは実際にhostsを利用してWebページ確認をしてみます。
今回は私がよく使う３つの方法をご紹介します。

以下の説明では、下記のようなWebページが確認できるか。
という形でご紹介します。

テストページはこのような表示です。

[おすすめ度:★] curl を利用した確認

最初は、コマンドが利用できればすぐにできてしまう技です。

コードはこちら↓
curl -H 'Host:hosts.skyarch.net' 12.34.56.78

実際の実行結果はこちら↓ ※

$ curl -H ’Host:hosts.skyarch.net’ 12.34.56.78
＜h1＞This is a hosts.skyarch.net＜/h1＞

※:シンタックスハイライトがエスケープしてしまうので全角表記です。コピペしても動きません。。ごめんなさい。

これだけです。簡単です。

また、別の方法として、下記があります。
curl --resolv 'hosts.skyarch.net:80:13.114.29.19' http://hosts.skyarch.net

実際の実行結果はこちら↓ ※

curl --resolv ’hosts.skyarch.net:80:13.114.29.19’ http://hosts.skyarch.net
＜h1＞This is a hosts.skyarch.net＜/h1＞

※:シンタックスハイライトがエスケープしてしまうので全角表記です。コピペしても動きません。。ごめんなさい。

しかし、こちらは表示の確認ではなく、 疎通が取れるか の確認が限度だと思います。
また、Windowsには標準で curl コマンドが用意されていない為、利用までのハードルが高いです。

IPアドレスなどで制限しているかを手軽に確かめたい時におすすめです。

[おすすめ度:★★] hostsファイルの書き換え

次に、オーソドックスな方法である hostsファイルの書き換えです。

OSによって、編集するファイルの位置が異なります。
なお、両方とも 管理者権限でファイルの編集 が必要となります。

• Windows10 : C:\Windows\System32\drivers\etc\hosts
• Mac/Linux : /etc/hosts

Windowsの場合

なお、Windowsの場合は、スタートボタン横の検索からで notepad と入力し、
出てきたアイコンを右クリックし、「管理者として実行」をクリックします。

「管理者として実行」

表示されたメモ帳にて上記パスのhostsファイルを開き、編集をします。
(※etcフォルダ以下でファイルが表示されない場合は、右下のドロップダウンリストを
「テキスト文章」から「すべてのファイル」に切り替えてください。）

Mac / Linux の場合

両方とも、ターミナルを利用しての編集が簡単です。

$ sudo nano /etc/hosts

※ nanoはお好きなエディタに読み替えてください。¹

コマンド実行後、パスワードを求められますので、入力してください。

nanoエディタでの編集後は

1. Ctrl + X で終了
2. 保存するかを尋ねられたときは y
3. そのあとはEnter

という順に入力することで保存ができます。

hostsファイルの書き方

hostsファイルは下記のフォーマットで記載します。

IPアドレス ドメイン名

ですので、今回の例の場合は下記のようになります。

12.34.56.78 hosts.skyarch.net

これを一番下に追記して保存します。

保存後の注意

hostsファイルを追記した後は、念の為 Chromeなどの Webブラウザのタブを閉じて 頂き、
再度開いた上で、ドメイン名を入力しアクセスしてみてください。
(私自身もこれを忘れて、よく首を傾げることがあります。)

なお、それでもだめな場合は、シークレットウィンドウなどを利用してアクセスを試してみてください。
※最初からシークレットウィンドウの場合でも、タブは開き直す必要があります！

safariでの表示イメージ。この様に表示されます。

こちらが一番オーソドックスな方法です。
しかし、hostsで定義したいドメイン名が多かったり、旧環境と新環境を交互に頻繁に確認する場合は、
都度都度ファイルを更新しなければならず、煩わしさがあります。。

[おすすめ度:★★★] Chrome拡張機能 「HostAdmin App」

「hostsファイルをいちいち開くのが面倒くさい」や、「頻繁に更新する」という方には、
HostAdmin App というChrome拡張をおすすめ致します。

HostAdmin App
https://chrome.google.com/webstore/detail/hostadmin-app/mfoaclfeiefiehgaojbmncmefhdnikeg?hl=ja

かくいう私もユーザの一人でございます。

初回の設定が若干とっつきにくいですが、
一度設定してしまえば、クリック一つで操作ができるスグレモノです。

インストール後初回設定

上記URLより、アプリを追加すると、Chromeのアプリ一覧画面に移動します。
インストールされた 「HostAdmin App」を起動してください。

そうすると、「Select Hosts File」というボタンとともに、説明文が表示されます。

まずは、hostsファイルの位置を設定する必要があります。
設定したいOS毎のhostsのファイルパスを、ここで選択します。

• Windows10 : C:\Windows\System32\drivers\etc\hosts
• Mac/Linux : /etc/hosts

設定が完了すると、下記画像のように、hostsファイルの中身が表示されます。

hostsファイルの権限変更後。エラーが消え、内容が表示される

ただ、この状態ではまだ利用できません。

https://code.google.com/archive/p/fire-hostadmin/wikis/GAIN_HOSTS_WRITE_PERM.wiki
上記サイトを参考に、hostsファイルに対して、その他のユーザで書き込み権限を付与する必要があります。

※ セキュリティ的に通常よりもゆるい状態になります。取り扱いには気をつけてください！

Windowsの場合は、コマンドプロンプト 、 Macの場合はターミナルをそれぞれ 管理者権限 で実行し、下記のコマンドを実行します。

＞ #### Windowsの場合
cacls %windir%/system32/drivers/etc/hosts /E /G Users:W

＞ #### Mac/Linuxの場合
sudo chmod og+w /etc/hosts

ここまで実施すると、既に設定されている hostsデータを利用する場合は、
各項目をクリックすることで、有効(チェックマークが付きます) / 無効 が設定できます。

また、hostsへ追加した場合は、右上の「Editor」を開くことで、
hostsファイルの編集画面が表示されます。

Editor画面。ここから編集が可能

ここに表示されいるエディタ画面に、hostsファイルの追加と同じ形式で
追記をして頂くことで、hostsファイルの編集と同じ効果を得られます。

hostsファイルの書き方

hostsファイルは下記のフォーマットで記載します。

IPアドレス ドメイン名

ですので、今回の例の場合は下記のようになります。

12.34.56.78 hosts.skyarch.net

追記後、保存することで先程のリストにもIPアドレスが追加されています。
有効 / 無効はこのリストのIPアドレスをクリックすることで可能です。

これは有効化されている状態。クリックすることで、チェックが外れる

追加機能

また、このHostAdminには、追加機能としてグループ管理する機能があります。
詳細な利用方法は、エディタ画面の下部に記載がございますので、ご参照ください。

設定サンプル。グループを一括で有効 / 無効が管理できる

以上、hosts設定方法3種をご紹介しました。

1. curl のオプションを利用
2. hosts ファイルを書き換える
3. Chrome拡張機能「HostAdmin App」を利用する

どれもメリット・デメリットがありますので、必要に応じて利用すると良いと思います！
何かのお役に立てれば幸いです。