Webサイトを表示する仕組みと表示不具合のトラブルシュート
記念すべきノウハウ記事、第一号の記事は、Webページ表示時に行われる通信の全貌です。
名前解決（DNS）単体、ブラウザの挙動単体の記事はたくさんあるのですが、全体像をわかりやすく書いた記事が見当たらなかったので作ってみました。
例えばWebサイトがうまく表示されないといった場合にどこに問題があるのか？をトラブルシュートする時などでご活用いただけると幸いです。
またデータをキャッシュするポイントについても記載しているので、アップしたはずなのに、更新されないといったトラブル時にもご活用いただけます。
設定と図の見方について
今回は企業のネットワーク内にあるPCが、キャッシュサーバ付きのWebサイトを表示する際の通信を例にとって説明します。
表示するページは以下のページです。
https://www.tmcdigital.jp/recruit/
STEP○が図版内の黄色い円内の数字に紐づいています。
また緑色の吹き出しの箇所が、データをキャッシュするポイントとなります。
STEP1〜2
ブラウザからプロキシサーバにリクエストを送信
STEP1
PCにインストールされたブラウザにhttps://www.tmcdigital.jp/recruit/のデータが入力され、リクエストされます。
するとまず、ブラウザは、ローカルの一時保存フォルダにリクエストされたページのキャッシュがないかを調べます。
STEP2
ローカルの一時保存にリクエストしたURLのデータが見つからない場合、同社内LAN内にあるプロキシサーバにhttps://www.tmcdigital.jp/recruit/を閲覧したい旨リクエストが送信されます。
STEP3〜STEP7
プロキシサーバが名前解決を実施
STEP3
PCからリクエストを受けたプロキシサーバは、同LAN内にあるDNSキャッシュサーバに問い合わせを行います。
この時点でキャッシュされている場合には、プロキシサーバに対してwww.tmcdigital.jpのIPアドレスを返答します。
※ここではキャッシュされていなかったものとして、先に進めます。
STEP4
DNSキャッシュサーバは、まずルートDNSサーバに、www.tmcdigital.jpのIPアドレスを問い合わせます。
すると、jp DNSサーバの管理下である回答が戻ってきます。
STEP5
DNSキャッシュサーバは、jp DNSサーバに、www.tmcdigital.jpのIPアドレスを問い合わせます。
すると、お名前.comのDNSサーバの管理下である回答が戻ってきます。
STEP6
DNSキャッシュサーバは、お名前.comのDNSサーバにwww.tmcdigital.jpのIPアドレスを問い合わせます。
すると、49.212.235.179（CDN）である回答が戻ってきます。
なお、お名前.comのゾーンファイルには以下のような設定がなされています。
www.tmcdigital.jp A 3600 49.212.235.179
（ホスト名／レコード種別／キャッシュ保持秒数／IPアドレス）
※ゾーンファイルの記述方法は、レンタルサーバによっても異なります。あくまで一番シンプルな作りのDNSサーバで構築した場合を例にとり、記述しています。
STEP7
DNSキャッシュサーバはプロキシサーバに対してwww.tmcdigital.jpのIPアドレスを返します。
STEP8
プロキシサーバが、49.212.235.179に、HTMLデータのリクエストを行う。
プロキシサーバは、49.212.235.179（CDN）にHTMLデータのリクエストを行います。
そのリクエストを受け取ったCDNはまずhttps://www.tmcdigital.jp/recruit/のキャッシュデータがあるかを確認し、存在する場合には、そのデータを返します。
CDNとは
CDN（Contents Delivery Network）とは、インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを配信する仕組みです。
キャッシュサーバーは一度リクエストのあったWebサイトのコンテンツを一次的に保存（キャッシュ）しています。そして、リクエストしたユーザーから近い場所にあるキャッシュサーバーからコンテンツを直接配信することで、データが置かれているWebサーバー（オリジンサーバ）やネットワークの状態、あるいはユーザーがアクセスする場所との物理的な距離の影響を受けず、安定的にコンテンツ配信を行うことができます。
※今回の流れでは、全通信フローを説明したいため、キャッシュデータはなかったものとします。
STEP9
CDNからオリジンサーバにHTMLデータをリクエスト
CDNは、オリジンサーバに対して、https://www.tmcdigital.jp/recruit/のファイルをリクエストします。
STEP10-11
Webサーバはリクエストされたドメイン名を判別し、適切なHTMLデータを返す
リクエストを受け取ったWebサーバプログラムAPACHEは、受け取ったデータのドメイン名を確認。ドメイン名に紐づけられた適切なディレクトリにあるHTMLデータをCDNに返します。
CDNは、受け取ったHTMLデータをキャッシュとして登録します。
なおドメイン名とディレクトリの紐付けはAPACHEの設定ファイルで以下のように設定されています。
STEP12
CDNからプロキシサーバにHTMLデータが送られる
HTMLデータをCDNから、プロキシサーバに受け渡しされます。
プロキシサーバは受け取ったHTMLデータをキャッシュとして登録します。
STEP13-14
プロキシサーバからブラウザにHTMLデータが送られる
プロキシサーバから、ブラウザがデータを受け取り、PC内の一時保存フォルダにデータを保存します。
これがローカルPCのキャッシュとなります。
ブラウザが保存されたHTMLデータを読み込みます。
STEP15
ブラウザが保存されたCSS・JS（Javascript）を実行する
ブラウザが再度上記1-14までを実行し、画像やCSS、JSを取得します。そして、ローカルでCSSを実行し、見た目を整えたり、JS（Javascript）による処理でページの表示を変更したりします。
終わりに
今回の説明はいかがでしたでしょうか？
大まかにはわかっていても、プロキシサーバやキャッシュサーバが関わってくると、通信方法やその主体が一気に複雑化しトラブルシュートもしづらくなります。
そんなときは是非本記事を見直していただき、トラブルシュートに役立てていただけると幸いです。
