Web ページを巡る冒険

YouTube Live (2020.08.27 Thur. 21:00~)

話す人現役のエンジニア二人赤貝が好きな CTO とデザイン勉強中のエンジニア @mu_vpoe 最近は SwiftUI で
macOS アプリづくりが趣味ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォローお願いします！

主な登場人物ブラウザー君ユーザ君 DNS さんルーターさん ISP さん・IX さんサーバーさん

第一部 Web ページはどこにある？第一部 Web ページはどこにある？

はーい第一部 Web ページはどこにある？ http://example.com/hoge っていうページを取ってきて〜ブラウザー君ユーザ君

ユーザブラウザサーバ URL を指示 HTML をもらう HTML レンダリング ①
② ③ ④ サーバさんのところに行けばいいんだ Web ページを見に行く流れ

http://example.com/hoge スキーマホストパストップレベルドメインセカンドレベルドメイン URL は大きく 3つの構成に分かれるスキーマ
: 通信方式の種類（ https や ftp など）ホスト : サーバの識別名パス : リソースの中の場所サーバはどこにあるの？

http://example.com/hoge なるほどサーバに辿り着くには IP アドレスが必要だよ仮想的な場所ホスト名物理的な場所
IP アドレス ( 例 203.0.113.0.9 ) ホスト名だとサーバの場所は分からない

DNS は全ての答えを知らない example.com の IP アドレス教えて僕は持ってないなぁ

担当 DNS に再起的に問い合わせ example.com の IP アドレス教えて知ってる？知らんけど
.com の情報を知ってるサーバなら分かるから教える〜 example.com の情報を知ってるサーバなら分かるから教える〜 exmaple.com は 203.0.113.0.9 だよ〜 2LD 権威サーバ TLD 権威サーバルートサーバ ① ② ③

• dig ホスト名 • nslookup ホスト名ホスト名を IP アドレスに変換するコマンド僕に聞いてね
小ネタ

DNS はキャッシュする次、聞かれたときのためにキャッシュしよう DNS のキャッシュ期間は、設定した TTL 値によって決まる。TTL
が長いと DNS レコードを変更しても反映されるまでに時間がかかる。小ネタ

IP アドレス 203.0.113.0.9

203.0.113.0.9 IP アドレスの場所は…？どこにあるの？僕に聞いて〜ルーターさん

こっちいったらあるかも〜 IP アドレス通信の経路 203.0.113.0.9 に行きたい〜 IPS・IX と言ったインターネット上の回線が相互に接続しあい、持っている経路表をもとに誘導する

• traceroute IP アドレス or ホスト名指定 IP アドレスまでの経路を表示するコマンド僕に聞いてね
小ネタ

どうやってサーバと会話すればいいんだろう？ … サーバとの会話は握手サーバーさん

TCP 3way handshake で挨拶する会話を3つのステップで開始 ① SYN ② SYN
+ ACK ③ ACK SYN : Synchronize ACK : Acknowledge

S : SYN S. : SYN + ACK . :
ACK • tcpdump port 見たいポート番号サーバとの会話の中身を見ることができるコマンド小ネタ

80 番ポートの /hoge っていうのください GET /hoge HTTP/1.0 Host: example.com User-Agent:
curl/7.64.1 Accept: */* リクエストヘッダでページを要求メソッドバージョン HTTP/1.1 や 2 などがあるパスリクエストヘッダ : 区切りの key-value リクエストする側の情報などを記載している

GET の /hoge に該当するコンテンツくださいアプリケーションサーバーさん (Web) サーバーさんディスクくん
メソッドとパスに応じたコンテンツを返す GET の /hoge なら僕が持ってる〜 Web サーバ単体でコンテンツを返すこともあるし、図解のようにアプリケーションサーバが別にあり、そこから返すこともある。サーバの構成による。

アプリケーションサーバーさん Web サーバーさん Web サーバとアプリケーションサーバ一部、重なっているところはあるが、一般的には静的コンテンツやルーティングなどサーバの基本的なことを担うのが Web サーバ。
特定の言語を動かすものがアプリケーションサーバ。片方だけでやる場合もあるし、両方連携してやる場合もある。小ネタ

HTTP/1.0 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 1256 Connection: close
レスポンスヘッダとボディレスポンスヘッダどうぞー : 区切りの key-value レスポンスしたページの情報などを記載しているステータス 404 や 500 などエラーやページの状態を伝える <!doctype html> <html> <head> <title>Example Domain</title> ボディヘッダとボディに 1つの改行が区切りとしてある

ありがとーでも、画像とか CSSがないなぁ HTML 持ってきた〜

画像とかも持ってきて〜 HTML …

第二部効率的に会話する第二部効率的に会話する

リクエストレスポンスこのやりとりを、HTML + リンクされている画像や CSS ファイルの数分、繰り返さないといけない x ファイルの数第二部
効率的に会話する

KeepAlive する TCP 3way handshake が面倒くさいので、 HTTP1.1 でデフォルトになった HTTP
KeepAlive して同じ接続を使い回す疲れた

① SYN ② SYN + ACK ③ ACK データもらう +
接続終了の通信 KeepAlive なし KeepAlive あり ① SYN ② SYN + ACK ③ ACK データもらう + 接続終了の通信 ① SYN ② SYN + ACK ③ ACK リクエストデータもらう + 接続終了の通信また handshake しないといけない接続を閉じずに再利用しているので handshake は必要ない

サーバから返されるレスポンスヘッダにある Content-Type でファイル種類を判断する Content-Type で分類する小ネタ http://example.com/photo.jpg 拡張子では判断しない HTTP/1.0 200
OK Content-Type: image/jpeg レスポンスヘッダ ( MIME )

GET /hoge HTTP/1.0 Host: example.com User-Agent: curl/7.64.1 Accept: */* 対応可能なコンテンツを提案
リクエストヘッダブラウザが対応可能なコンテンツの種類を MIME で伝えることを、コンテンツネゴシエーションと呼ぶ accept: image/webp webp 対応してます webp あげます小ネタ

うーんさっきのページをもう一回見せて

ブラウザキャッシュ HTTP/1.1 200 OK cache-control: public, max-age=600 etag: "de5659f2" レスポンスヘッダ
キャッシュしていい期間やルールなどを提示コンテンツが更新されているかどうかの判断に使うありがとう〜これは 600 秒だけキャッシュしていいよ

cache-control: public, max-age=600 etag: "de5659f2" 600秒以内のリクエストは、キャッシュを参照するレスポンスヘッダまず、サーバにファイルを取りに行く
再リクエストが 600 秒以内の場合 Cache-Control の動き

GET /hoge If-None-Match: "de5659f2" リクエストヘッダ HTTP/1.1 304 OK cache-control: public,
max-age=600 etag: "de5659f2" コンテンツ更新されてる？してないから、またキャッシュしていいよステータス 304 の場合は、コンテンツをダウンロードせず、手元のキャッシュを利用する再リクエストが 600 秒を超えた場合レスポンスヘッダ ① ② ③ ETag の動き送られてきた ETag を見て、サーバが最新のファイル状況と比較する

第三部 cookie で状態を復元する第三部 cookie で状態を復元する

はーい次は EC サイトにログインしてきて〜第三部 cookie で状態を復元する

POST /login HTTP/1.1 リクエストヘッダ id=zaru&pass=xxxx リクエストボディログインします zaru さんですね POST
でデータ送信

はーいありがとー、じゃあ商品ページに行ってきて〜

あなたは誰？さっきログインした zaru です。商品ページ見せて

HTTP はステートレスリクエスト1 リクエスト2 リクエスト同士は互いを知らない状態でサーバに受け取られる

Cookie でステートフルへリクエスト1 リクエスト2 cookie と言う状態の情報が入ったデータをサーバに渡して、リクエスト1 との関連を作る

HTTP/1.1 200 OK set-cookie: key=value; expires=Fri, 25-Sep-2020 22:21:50 GMT; path=/;
domain=.example.com; Secure; SameSite=none レスポンスヘッダログイン情報を cookie に保存しておいて cookie はサーバからもらう cookie 保存の指示保存するキーと値 cookie の保存期間やルールなどの情報

GET / HTTP/1.1 cookie: key=value; リクエストヘッダログイン情報の cookie を送ります cookie
をサーバへ送るはい zaru さんですね

第 n 部 Web の未来第 n 部 Web の未来

XMLHttpRequest? Ajax? SSL/TLS? HTTP2? HTTP3? OAuth? JWT? fetchAPI? WebRTC? WebPush?
webcoket? AMP? CDN? ロードバランサ？ブラウザー君の冒険はまだまだ続く…！（かも）

ありがとうございました！次回は... コードレビューをやります！木曜21時から30分質問感想など呟いていただけると嬉しいです！ - ハッシュタグ #mu_zaru - ツイッター情報
@mu_vpoe , @zaru チャンネル登録 Good ボタンお願いします！ムーザルちゃんねる

Web ページを巡る冒険

Web ページを巡る冒険

More Decks by mu_zaru

Other Decks in Programming

Featured

Transcript