はじめに
WEBページにアクセスした際にどのような仕組みでWEBページが表示されるのかについてきちんと理解していなかったので、その仕組みについてまとめました。間違い等あればご指摘ください！
WEBページ表示の大まかな流れ
WEBページが表示される際の大まかな流れは以下の通りです。
1.ブラウザにアクセスしたいURLを入力する。
2.入力されたURLに含まれているドメインをDNSサーバに問い合わせ、ドメインをIPアドレスに変換する。
3.DNSサーバは対応するIPアドレスをブラウザに返答する。
4.ブラウザは指定されたIPアドレスに対して、リクエストを要求する。
5.リクエストをWEBサーバが受け取り、指定されたWEBページを表示する。
DNSサーバの名前解決の仕組み
ユーザがURLをブラウザに入力してリクエストを送信した際の処理についてもう少し詳細にまとめます。
キャッシュDNSサーバへの問い合わせ
まず、ユーザがURLをブラウザに入力して検索ボタンを押すと、まずは、キャッシュDNSサーバに対して、指定されたページのIPアドレスを持っていないか確認します。ここでもし以前にそのURLにアクセスしたことがあれば、キャッシュDNSサーバにアクセスしたいサイトの接続先情報が残っているので、キャッシュDNSサーバは指定したURLに対応する、IPアドレスを返答します。もし、キャッシュDNSサーバに指定したURLのIPアドレスが残っていなければ、キャッシュDNSサーバがコンピュータの代わりに上位DNSサーバに問い合わせを行います。
DNSサーバへの問い合わせ
キャッシュDNSサーバに指定したURLに対応するIPアドレスがなければ、上位DNSサーバに対して問い合わせを行います。まずは権威DNSサーバという、世界に13台しかないDNSサーバに問い合わせを行い、それから下位のDNSサーバに対して問い合わせを行い、最終的に指定したサイトのIPアドレスを知ることができます。以下にその仕組みを図解します。
WEBサーバが指定のページを表示するまで
WEBサーバへのリクエスト
WEBサーバのIPアドレスがわかったので、WEBサーバにHTTPリクエストを送ります。QiitaのトップページにHTTPリクエストを以下のコマンドで送信してみます。
curl -v https://qiita.com/
ここで送信したリクエストの一部を抜粋します。
> GET / HTTP/2
> Host: qiita.com
> user-agent: curl/7.88.1
> accept: */*
1行目はリクエストライン、2~4行目はヘッダー、今回はGETメソッドなのでメッセージボディはないですがPOSTメソッドなどではWEBサーバへの送信内容などもこのリクエストの中に含まれます。
WEBサーバからのレスポンス
WEBサーバからのレスポンスを一部抜粋します。
< HTTP/2 200
< date: Fri, 16 Jun 2023 02:01:52 GMT
< content-type: text/html; charset=utf-8
< server: nginx
< x-frame-options: SAMEORIGIN
< x-xss-protection: 1; mode=block
< x-content-type-options: nosniff
< x-download-options: noopen
< x-permitted-cross-domain-policies: none
< referrer-policy: strict-origin-when-cross-origin
< vary: Accept
< etag: W/"5c2a8edb06aaa7f267d5788fd4d259f3"
< cache-control: max-age=0, private, must-revalidate
< set-cookie: _qiita_login_session=p6tBaG%2FoA6in5jycw18LgHpIPDrHBXz72MQaYma7sCqHQnvpq8OkAUoy%2F9NKaXyMU4pQbGpHHerssis9bnxdGEzWPCfO%2Bgyz86DsKYmcW4IHcteas6zmjXNUpQ4jd3wlVggXO9KDRQpI%2BrdOdime3IAtJzQEyRQB4aAnBGI%2FhTPU1WOvhhXaKVLYs2o3AKK1VOR2tQ0kDKwFDoW1dZk34wu0%2Bot3GC%2Fpr0qEydeK7gGrhcy2KyhVsX8nNmF2fzSCCjY9j9ohNY2HeOFsaI3D1w3UdJsHHJHwg2td8qFlv6oE7LVTJ%2FDAWA9qY7B0pRpVM5pN3LELTpajRwXcFBTDhfzx32pTEyjhgshIYfVz--j7bdiV4llk6YAi39--%2BTW2gfCnjp3maDqrtJVq5Q%3D%3D; domain=.qiita.com; path=/; expires=Sun, 16 Jun 2024 02:01:52 GMT; HttpOnly
< x-request-id: 191a2ada-ccc7-4a26-bcfc-e884ca7e1853
< x-runtime: 0.228379
< strict-transport-security: max-age=2592000
<
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8" /><title>Qiita</title><meta content="Qiitaは、エンジニアに関する知識を記録・共有するためのサービスです。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。" name="description" /><meta content="width=devic
先ほどのリクエストと同様に1行目がステータスライン、2行目〜がヘッダー、最終行がメッセージボディになります。ステータスラインでは200というステータスコードがレスポンスで帰ってきており、正常に通信されていることがわかります。ヘッダー部分にはアクセス日時、サーバの種類などが記載されています。メッセージボディにはHTMLが記載されています。
最後にこのHTMLを解析して、HTMLの中で参照されている、CSSファイルやJavaScriptファイルを読み込み最終的に指定されたWEBページを表示することができます。この仕組みはレンダリングと呼ばれており、奥深いので後日また勉強しようと思います。以上でWEBページが表示されるまでの仕組みを簡単にまとめました。最後まで読んでいただきありがとうございました。
参考
https://e-words.jp/w/DNS%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%82%B5%E3%83%BC%E3%83%90.html
https://teru1213.com/site-structure/#step3
https://www.kagoya.jp/howto/it-glossary/domain/dns-server/
https://www.youtube.com/watch?v=b_apIgHNqtk