ブラウザがサーバーにアクセスする際ブラウザとサーバーは何している？

UPDATE：2020.06.12 RELEASE：2020.06.09

普段見ているインターネットがどのようにして画面に表示されているのか。
WEBサイトやページを作る人でも、HTML・CSS・Javascriptがどのようにして表示されているのか。
実際のところあまり詳しく知らないのではないでしょうか。
今回は、表側ではなくあくまでも裏側。普段見ているページがどのようなフローを経て、サイトに表示されるのか。これを深堀りしていこうと思います。

参考記事：https://gigazine.net/news/20190624-how-web-works/

1 URLをアクセスするとどうなるか？
- 1.1 01：URLを解析する
- 1.2 02：DNS
2 まとめ

URLをアクセスするとどうなるか？

01：URLを解析する

URLは単なる文字列ではない！？
実は、URLにはドメインと呼ばれる他に「リソース」と「プロトコル」と呼ばれる情報が含まれているのです。
よく目にする「http」この部分で「HTMLやXMLで書かれた文章を転送してほしい！」というお願いをサーバーに送っています。

02：DNS

サーバーはいわゆるコンピューターです。私達がブラウザを通して見ているのもコンピューターです。
そのコンピューター同士をインターネットと呼ばれる「線」でつなげるためには「相手を特定する情報」が必要になります。
そこで使われているのが「IPアドレス」です。
「え？ドメイン（～～.com）がIPアドレスなの？」
と思う方もいるかも知れませんが、違います。よく目にする「～～.com」は
「～～～.comが来たらIP～～～～にアクセスしてね」と命令をしているのです。
そこで使われているのが「DNS」と呼ばれるものです。
このDNSのステップには下記のステップがあると言われています。

ブラウザキャッシュ
OSキャッシュ
ルーターキャッシュ
ポート番号を調査
HTTPプロトコル
HTTPサーバー処理
サーバーレスポンス

ブラウザキャッシュ

ブラウザがURLにアクセスする際、ブラウザは自分自身の中にある「キャッシュ（画像・css・html・jsなどのデータ）」をまず見ます。
キャッシュが既にあるのに、またデータを読み込む必要というのはないですからね。
そして、以前に接続していたキャッシュ（画像・css・html・jsなどのデータ）が有ればそれを利用してブラウザ上に表示していきます。
このキャッシュは「TTL」と呼ばれる、いつまでこのデータを残すか。を伝えることができないため、ブラウザのキャッシュは20～30分ほど残っています。

OSキャッシュ

ブラウザにキャッシュが残っていれば、ブラウザはURLを元にDNSの検索を行います。
この検索にも、「前に検索したデータ」を蓄積して、検索の時間を短縮しています。

ルーターキャッシュ

上記2つのキャッシュがない場合…ルーターにDNS検索を依頼することになります。

ポート番号を調査

IPアドレスが特定されると「このパソコンに繋げばいいんだ」とブラウザが理解し、IPアドレスをたどり接続を行います。
ここで、終わりかと思われるかもしれませんがまだあるんです。
次に「どのコンピューターのどの部分にアクセスするのか？」という特定をしていかなければなりません。
そこで利用されているのが「ポート番号」と呼ばれるものです。
接続されるコンピューターに何も指示がない場合、通常「httpなら80/httpsなら443」というポート番号が利用されています。
参考画像　Xamppのポート部分

この接続をするときhttpsでは特殊な方法で通信を行いますが、今回は割愛します。
（別途別の記事でここは深く解説していきたいと思います…）

HTTPプロトコルとは

インターネットでURLを叩いた際、実際ブラウザは接続先のコンピューターに対して下記のような情報（抜粋）を送るようになっています。

GET http://www.google.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: google.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]/* Your code... */

色々書いていますが抜粋して解説していきます。

一行目

今回はGoogleにアクセスした場合のHTTPプロトコルになっています。
まずGETと呼ばれるメソッド（サーバーに対してどうしたいのかという命令）を利用してアクセスし、「http://www.google.com/にアクセスしたい」という要求が記載されています。

Accept

これは、「こういったファイルをください」というものが明記されています。

User-Agent

これは、ブラウザが「私はこういったものです。」というものが明記されています。
ブラウザや使っているOSによってこの部分は変わってきます。参考としてはこれだけの種類があるとされています。https://qiita.com/kapiecii/items/093ffd6f0b09ad775250

Accept-Encoding

ここでは、「どのような圧縮形式ならば、私の使っているブラウザは理解できる。」と明記しています。
今回では「gzip」というのをブラウザはHTTPプロトコルに明記しています。

Cookie

意外と知られていないこの「Cookie」。実は、サーバーに自分の保持しているCookieを接続先のコンピューターに対して「私はこんだけのデータを他に持っているぞ」ということを伝えています。

HTTPサーバー処理

接続先のコンピューターはこのHTTPリクエストを元にして、

「どうしたいのか？」「どこに行きたいとのか？」「どんなデータが欲しいのか？」を分析して、接続先のコンピューター内にそのすべての要求があるかを調査して答えてくれます。その際「どこに行きたいのか？」というものがない場合、404エラー「探したけどありませんでしたよ」という情報を送るようにしています。

また、すべての要求を満たした場合、必要に応じてPHPやRubyなどを動かし、HTMLに変換してブラウザに送るようにしています。

これらは、接続先のコンピューターにApacheやngixなどの「HTTPD(HTTP Daemon)サーバーアプリケーション」をインストールしていることが前提になります。

サーバーレスポンス

「HTTPプロトコル」「HTTPサーバー処理」を減て、接続先のコンピューターは下記のような情報（抜粋）を返すようにしています。

HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
    pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
P3P: CP="DSP LAW"
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
X-Cnection: close
Transfer-Encoding: chunked
Date: Fri, 10 Wed 2020 09:05:55 GMT

豆知識なるのですが…
よく、「アクセスが多すぎてサーバーがダウンする…」と聞くことがあるかもしれません。
そしてそれが静的のページだった場合このレスポンスに記載されている「Cache-Control:」の部分を「Cache-Control: public, max-age=604800, immutable」とすると、サーバーがダウンすることを回避できる方法の一つになったりします。