Web ページを巡る冒険

C302e84057a922dce0ecbe80207e3fcc?s=47 mu_zaru
August 27, 2020

Web ページを巡る冒険

配信動画はこちら
https://www.youtube.com/watch?v=LaJWTPq5cSU&feature=youtu.be

もし良かったらムーザルちゃんねるのチャンネル登録お願いします!
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_vpoe
zaru
https://twitter.com/zaru

C302e84057a922dce0ecbe80207e3fcc?s=128

mu_zaru

August 27, 2020
Tweet

Transcript

  1. YouTube Live (2020.08.27 Thur. 21:00~)

  2. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近は SwiftUI で

    macOS アプリづくりが 趣味 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします!
  3. 主な登場人物 ブラウザー君 ユーザ君 DNS さん ルーターさん ISP さん・IX さん サーバーさん

  4. 第一部 Web ページは どこにある? 第一部 Web ページは どこにある?

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

  6. ユーザ ブラウザ サーバ URL を指示 HTML をもらう HTML レンダリング ①

    ② ③ ④ サーバさんの ところに行けば いいんだ Web ページを見に行く流れ
  7. http://example.com/hoge スキーマ ホスト パス トップレベルドメイン セカンドレベルドメイン URL は大きく 3つの構成に分かれる スキーマ

    : 通信方式の種類( https や ftp など) ホスト : サーバの識別名 パス : リソースの中の場所 サーバは どこにある の?
  8. http://example.com/hoge なるほど サーバに辿り着く には IP アドレス が必要だよ 仮想的な場所 ホスト名 物理的な場所

    IP アドレス ( 例 203.0.113.0.9 ) ホスト名だとサーバの 場所は分からない
  9. DNS は全ての答えを知らない example.com の IP アドレス 教えて 僕は持って ないなぁ

  10. 担当 DNS に再起的に問い合わせ example.com の IP アドレス 教えて 知ってる? 知らんけど

    .com の情報を知っ てるサーバなら分か るから教える〜 example.com の情 報を知ってるサーバ なら分かるから教え る〜 exmaple.com は 203.0.113.0.9 だ よ〜 2LD 権威サーバ TLD 権威サーバ ルートサーバ ① ② ③
  11. • dig ホスト名 • nslookup ホスト名 ホスト名を IP アドレスに変換するコマンド 僕に聞いてね

    小ネタ
  12. DNS はキャッシュする 次、聞かれたときの ためにキャッシュし よう DNS のキャッシュ期間は、設定した TTL 値によっ て決まる。TTL

    が長いと DNS レコードを変更して も反映されるまでに時間がかかる。 小ネタ
  13. IP アドレス 203.0.113.0.9

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

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

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

    小ネタ
  17. どうやってサーバ と会話すればいい んだろう? … サーバとの会話は握手 サーバーさん

  18. TCP 3way handshake で挨拶する 会話を3つの ステップで開始 ① SYN ② SYN

    + ACK ③ ACK SYN : Synchronize ACK : Acknowledge
  19. S : SYN S. : SYN + ACK . :

    ACK • tcpdump port 見たいポート番号 サーバとの会話の中身を見ることができるコマンド 小ネタ
  20. 80 番ポートの /hoge っていうのください GET /hoge HTTP/1.0 Host: example.com User-Agent:

    curl/7.64.1 Accept: */* リクエストヘッダでページを要求 メソッド バージョン HTTP/1.1 や 2 などがある パス リクエストヘッダ : 区切りの key-value リクエストする側の情報 などを記載している
  21. GET の /hoge に 該当するコンテン ツください アプリケーションサーバーさん (Web) サーバーさん ディスクくん

    メソッドとパスに応じた コンテンツを返す GET の /hoge な ら僕が持ってる〜 Web サーバ単体でコンテンツを返 すこともあるし、図解のようにアプ リケーションサーバが別にあり、そ こから返すこともある。サーバの構 成による。
  22. アプリケーションサーバーさん Web サーバーさん Web サーバと アプリケーションサーバ 一部、重なっているところはあるが、一般的には静的コンテンツや ルーティングなどサーバの基本的なことを担うのが Web サーバ。

    特定の言語を動かすものがアプリケーションサーバ。片方だけでやる 場合もあるし、両方連携してやる場合もある。 小ネタ
  23. 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つの改行が区切 りとしてある
  24. HTML

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

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

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

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

    効率的に会話する
  29. KeepAlive する TCP 3way handshake が面倒くさいので、 HTTP1.1 で デフォルトになった HTTP

    KeepAlive して同じ接 続を使い回す 疲れた
  30. ① SYN ② SYN + ACK ③ ACK データもらう +

    接続終了の通信 KeepAlive なし KeepAlive あり ① SYN ② SYN + ACK ③ ACK データもらう + 接続終了の通信 ① SYN ② SYN + ACK ③ ACK リクエスト データもらう + 接続終了の通信 また handshake しないといけない 接続を閉じずに再利用してい るので handshake は必要な い
  31. サーバから返されるレスポンスヘッダにある Content-Type でファイル種類を判断する Content-Type で分類する 小ネタ http://example.com/photo.jpg 拡張子では判断しない HTTP/1.0 200

    OK Content-Type: image/jpeg レスポンスヘッダ ( MIME )
  32. GET /hoge HTTP/1.0 Host: example.com User-Agent: curl/7.64.1 Accept: */* 対応可能なコンテンツを提案

    リクエストヘッダ ブラウザが対応可能なコン テンツの種類を MIME で伝 えることを、コンテンツネ ゴシエーションと呼ぶ accept: image/webp webp 対応してます webp あげます 小ネタ
  33. うーん さっきのページをもう一回見せて

  34. ブラウザキャッシュ HTTP/1.1 200 OK cache-control: public, max-age=600 etag: "de5659f2" レスポンスヘッダ

    キャッシュしていい期間や ルールなどを提示 コンテンツが更新されている かどうかの判断に使う ありがとう〜 これは 600 秒だ けキャッシュし ていいよ
  35. cache-control: public, max-age=600 etag: "de5659f2" 600秒以内のリクエスト は、キャッシュを参照す る レスポンスヘッダ まず、サーバにファイルを取りに行く

    再リクエストが 600 秒以内の場合 Cache-Control の動き
  36. GET /hoge If-None-Match: "de5659f2" リクエストヘッダ HTTP/1.1 304 OK cache-control: public,

    max-age=600 etag: "de5659f2" コンテンツ更新 されてる? してないから、 またキャッシュ していいよ ステータス 304 の場合は、コンテ ンツをダウンロードせず、手元の キャッシュを利用する 再リクエストが 600 秒を超えた場合 レスポンスヘッダ ① ② ③ ETag の動き 送られてきた ETag を見 て、サーバが最新のファ イル状況と比較する
  37. 第三部 cookie で 状態を復元する 第三部 cookie で 状態を復元する

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

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

    でデータ送信
  40. はーい ありがとー、じゃあ商品 ページに行ってきて〜

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

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

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

  44. 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 の保存期間 やルールなどの情報
  45. GET / HTTP/1.1 cookie: key=value; リクエストヘッダ ログイン情報の cookie を送ります cookie

    をサーバへ送る はい zaru さん ですね
  46. 第 n 部 Web の未来 第 n 部 Web の未来

  47. XMLHttpRequest? Ajax? SSL/TLS? HTTP2? HTTP3? OAuth? JWT? fetchAPI? WebRTC? WebPush?

    webcoket? AMP? CDN? ロードバランサ? ブラウザー君の冒険は まだまだ続く…!(かも)
  48. ありがとうございました! 次回は... コードレビューをやります! 木曜21時から30分 質問感想など呟いていただけると嬉しいです! - ハッシュタグ #mu_zaru - ツイッター情報

    @mu_vpoe , @zaru チャンネル登録 Good ボタン お願いします! ムーザルちゃんねる