Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTTP入門

2,881 views

Published on

About HTTP

社内向け勉強会のスライドです。

Published in: Technology
  • Be the first to comment

HTTP入門

  1. 1. HTTP入門 @sugiuras
  2. 2. はじめに
  3. 3. 目標 • 「ブラウザでURLを打ち込み、ページが出る」まで に何が起きているのかを知る • HTTPの特徴を知る • HTTPにできること/できないことを知る
  4. 4. アジェンダ ✓ HTTP is ✓ HTTPの役割 ✓ Web通信の流れ ✓ HTTPの実態 ✓ HTTPにできる / できないこと ✓ まとめ
  5. 5. HTTP is
  6. 6. HTTP is • HTTP = Hyper Text Transfer Protocol • HTTPとはWebブラウザとWebサーバの間でHTML などのコンテンツの送受信に用いられる通信プロト コルである。
  7. 7. HTTPはWebと共に生まれた • HTTPは1989年3月に誕生した • 遠隔地で研究者同士の知識を共有するための仕組み としてWWWが考案された • 構成要素としてHTML, HTTP, URLが提案された
  8. 8. WebのためのHTTP HTTPはHTMLを始めとしたWeb上のリソースを インターネットを通じて配信するために生まれた
  9. 9. HTTPは方法 • HTTPはプロトコルの一種であり、インターネット 通信方法の一種 • プロトコルとは誰かと誰かがやりとりする時の取り 決め
  10. 10. 郵便で言うプロトコル • 送信者 • 郵便物に住所と名前を書いて、ポストに入れる • 受信者 • ポストを用意する • ポストに入った郵便物を受け取る
  11. 11. あらかじめ通信方式を決めることで 届けたい物を届けたい場所に確実に届けることができる
  12. 12. HTTPの役割
  13. 13. HTTPはWebのための技術
  14. 14. WebにおけるHTTPの役割を知る
  15. 15. クライアントサーバモデル • Web通信にはクライアントとサーバが存在する • サーバはリソースを配信する • クライアントはリソースを問い合わせる • クライアントが何もしない限り通信は発生しない
  16. 16. サーバとクライアント ユーザー/ブラウザ (クライアント) サーバー (サーバー)
  17. 17. サーバとクライアント (@cosme見たいなぁ) ユーザー/ブラウザ (クライアント) サーバー (サーバー)
  18. 18. サーバとクライアント (配信準備できてるぞ∼) ユーザー/ブラウザ (クライアント) サーバー (サーバー) (@cosme見たいなぁ)
  19. 19. リクエストとレスポンス • クライアントがサーバにリソースを要求する時に送 るメッセージがリクエストです • そのメッセージに対するサーバの返事がレスポンスです
  20. 20. リクエストとレスポンス ユーザー/ブラウザ (クライアント) サーバー (サーバー) @cosmeページくれYO OKだYO リクエスト レスポンス
  21. 21. リクエストとレスポンス ユーザー/ブラウザ (クライアント) サーバー (サーバー) @cosmeページくれYO OKだYO リクエスト レスポンス ↑ここでHTTPが 使われる
  22. 22. HTTPの役目 • リクエストやレスポンスの書き方を定めたものが HTTPの実態
  23. 23. HTTPはルール • 「このページください」というリクエストや「は い、このページだよ」というレスポンスの書き方が HTTPの正体 • HTTPの決まりに則って作られたHTTPメッセージ を用いてリクエスト/レスポンスを送る • リクエスト/レスポンスを解釈するための共通言語
  24. 24. いったんおさらい • Web通信にはクライアントとサーバが存在する • クライアントがサーバにリクエストを送る • サーバがクライアントにレスポンスを返す • リクエスト/レスポンスはHTTPで定められたルール で作られたHTTPメッセージを使用する
  25. 25. これだけ?
  26. 26. これだけじゃない(´・ω・`)
  27. 27. HTTP in TCP/IP HTTP TCP IP Network HTTP TCP IP Network ユーザ サーバ TCP/IP
  28. 28. ざっくり流れを追う
  29. 29. Web通信の流れ
  30. 30. ページが表示されるまでに 起こっていることを知る
  31. 31. 例:お化粧を探したいS君 S君
  32. 32. 例:お化粧を探したいS君 S君 @cosmeが見たいなぁ(・o・)
  33. 33. Web通信の流れ ① クライアント(ユーザ)がURLを入力する ② そのURLが指すサーバがどこにあるのか調べる ③ 調べたサーバと通信開始の信号を送り合う ④ リクエストを送る
  34. 34. http://cosme.netが見たいなぁ URLを打ち込む おう、分かったで ① URLを打つ クライアント S君
  35. 35. ②送信先を調べる • URLは人間が分かりやすいように考えられたもの • 機械はURLからサーバの場所を知ることができない • URLをもちいてIPアドレスをDNSサーバに問い合わ せる必要がある • ※厳密にはURL中に含まれるHost名
  36. 36. cosme.netってどこにいるんや ②送信先を調べる DNSサーバ 210.129.109.21におるで クライアント よっしゃ、210.129.109.21と通信始めるで
  37. 37. ③通信を開始する • メッセージを送る前に通信の開始の合意を取る • これをすることによってメッセージが返ってこな かったり、途切れたりということがないようにする • TCPがこの役割を担う
  38. 38. 210.129.109.21さんコンニチワ、通信していいですか ③通信を開始する cosme.net @210.129.109.21 コンニチワ、OKです。 こちらからも通信していいですか クライアント OKです
  39. 39. 210.129.109.21さんコンニチワ、通信していいですか ③通信を開始する クライアント OKです TCPによるスリーウェイハンドシェイク cosme.net @210.129.109.21 コンニチワ、OKです。 こちらからも通信していいですか
  40. 40. ④リクエストを送る • 通信経路をTCPで確保した後、リクエストを送る • リクエスト/レスポンスはHTTPメッセージを使用する
  41. 41. http://cosme.netのページが見たい ④リクエストを送る クライアント cosme.net @210.129.109.21
  42. 42. http://cosme.netのページが見たい ④リクエストを送る クライアント HTTPリクエスト cosme.net @210.129.109.21
  43. 43. http://cosme.netのページが見たい ④リクエストを送る OK、ファイル送ったるわ クライアント HTTPリクエスト cosme.net @210.129.109.21
  44. 44. http://cosme.netのページが見たい ④リクエストを送る OK、ファイル送ったるわ クライアント HTTPリクエスト HTTPレスポンス cosme.net @210.129.109.21
  45. 45. やったー!!! 通信で受け取ったリソースを表示する おら、@cosmeやで めでたしめでたし クライアント S君
  46. 46. Not only HTTP • HTTPはリクエスト/レスポンスメッセージで使われ るプロトコル • 通信先を探したり、実際に通信を行うのは別のプロ トコルが担当している • Webの通信は様々な技術によって成り立っている
  47. 47. HTTP in TCP/IP • そんなWebのイケてるプロトコルたちをまとめて TCP/IPと呼んだりします • HTTPもTCP/IPの一部です • TCP/IPを制するものはWebを制する • [ 検索 ] [ マスタリングTCP/IP ]
  48. 48. HTTPの実態
  49. 49. HTTPメッセージ is テキスト • HTTPメッセージの実態はテキスト • HTTPのルールに則って作られたテキストがHTTP メッセージ
  50. 50. http://cosme.netのページが見たい OK、ファイル送ったるわ クライアント HTTPリクエスト HTTPレスポンス cosme.net @210.129.109.21
  51. 51. GET / HTTP/1.1 Host: sota1235.com HTTP/1.1 200 OK Date: Thu, 30 Jul 2015 02:47:55 GMT Server: Apache Last-Modified: Thu, 04 Dec 2014 06:50:12 GMT ETag: "700d9f-3776-5095e5f2e5100" Accept-Ranges: bytes Content-Length: 14198 Content-Type: text/html <!DOCTYPE html> … クライアント HTTPリクエスト HTTPレスポンス cosme.net @210.129.109.21
  52. 52. HTTPリクエスト
  53. 53. GET /top/login HTTP/1.1 User-Agent: Telnet [ja] Host: sota1235.com name=sota&hobby=aiko
  54. 54. GET /top/login HTTP/1.1 User-Agent: Telnet [ja] Host: sota1235.com name=sota&hobby=aiko メソッド URI プロトコルバージョン
  55. 55. GET /top/login HTTP/1.1 User-Agent: Telnet [ja] Host: sota1235.com name=sota&hobby=aiko リクエストヘッダーフィールド メソッド URI プロトコルバージョン
  56. 56. GET /top/login HTTP/1.1 User-Agent: Telnet [ja] Host: sota1235.com name=sota&hobby=aiko リクエストヘッダーフィールド エンティティ メソッド URI プロトコルバージョン
  57. 57. HTTPレスポンス
  58. 58. HTTP/1.1 200 OK Date: Tue, 10 Jul 2015 06:50:15 GMT
 Content-Length: 362 Content-Type: text:html <html> ………
  59. 59. HTTP/1.1 200 OK Date: Tue, 10 Jul 2015 06:50:15 GMT
 Content-Length: 362 Content-Type: text:html <html> ……… プロトコル バージョン ステータス コード ステータスコードの 説明
  60. 60. HTTP/1.1 200 OK Date: Tue, 10 Jul 2015 06:50:15 GMT
 Content-Length: 362 Content-Type: text:html <html> ……… プロトコル バージョン ステータス コード ステータスコードの 説明 レスポンスヘッダーフィールド
  61. 61. HTTP/1.1 200 OK Date: Tue, 10 Jul 2015 06:50:15 GMT
 Content-Length: 362 Content-Type: text:html <html> ……… プロトコル バージョン ステータス コード ステータスコードの 説明 レスポンスヘッダーフィールド ボディ
  62. 62. いつ使うの? • はっきり言ってほとんど使う場面はないです • でもWebと関わる人は知っておくべき技術です • 以下のものは押さえときたい • メソッド • ステータスコード • 主要なヘッダー
  63. 63. ヘッダーを意識する • 普段の開発で意識しとくとよいのがヘッダー • あなたの想像よりも多機能(きっと) • 様々なヘッダー設定することで通信を制御したり、ブラウザ に特定の振る舞いを命令することができる ✓ キャッシュ ✓ CSP ✓ リソース読み込み元の制限(Same Origin Policy) ✓ ファイル転送方式(gzipによる圧縮等)
  64. 64. 閑話休題
  65. 65. 20年以上もWebを支えてる HTTPスゲー!
  66. 66. 本当に(´・ω・`)?
  67. 67. HTTPの特徴を見てみる
  68. 68. HTTP通信の特徴 • HTTPは1回の通信で1つのリソースしか送らない
  69. 69. GET / HTTP/1.1 @cosmeのトップページを取得
  70. 70. GET / HTTP/1.1HTML上のリソース全てに する • ページで使われるjs • ページで使われるcss • ページで使われる画像 も全部!
  71. 71. GET / HTTP/1.1HTML上のリソース全てに する • ページで使われるjs • ページで使われるcss • ページで使われる画像 も全部! 問題 使うリソースの数に比例してページ読み込みが 遅くなる
  72. 72. HTTP通信の特徴 • HTTPは1回の通信で完結する
  73. 73. クライアント サーバ HTTPリクエスト HTTPレスポンス Disconnect Three Way Handshake
  74. 74. クライアント サーバ
  75. 75. クライアント サーバ 問題 同じ相手とやりとりしてるのにリクエストごとに毎回 TCP通信が発生する = IP逆引きもTCP確立もやり直し
  76. 76. HTTP通信の特徴 • HTTPは状態を保持しない • HTTPはステートレスなプロトコル • サーバは以前の通信内容を覚えない
  77. 77. クライアント サーバ ログインフォーム送信! ログインOK!マイページ送るね 1回目の通信
  78. 78. クライアント サーバ プロフィール編集するぞー 未ログインだ、ログインページを送ろう! あれ?ついさっきログインしたばっかりなのに… 1回目の通信 2回目の通信
  79. 79. クライアント サーバ プロフィール編集するぞー 未ログインだ、ログインページを送ろう! あれ?ついさっきログインしたばっかりなのに… 1回目の通信 2回目の通信 問題 状態を保持しないのでたとえ同じ相手でも 以前の通信内容をサーバが全く覚えていない
  80. 80. HTTP通信の特徴 • クライアントからアクションを起こさない限り、 通信は発生しない
  81. 81. クライアント サーバ 掲示板自動更新してよ!
  82. 82. クライアント サーバ 掲示板自動更新してよ! 君がリクエスト送らないと レスポンス送れないから無理だよ! HTTPリクエスト
  83. 83. クライアント サーバ 掲示板自動更新してよ! 君がリクエスト送らないと レスポンス送れないから無理だよ! HTTPリクエスト 問題 サーバは常に受け身で通信しなければならない ページの自動更新ができない
  84. 84. 昔はよかった • HTTPは当初、ドキュメントを配信するため作ら れた • でもTwitterとかログインできるWebサービスとか ワンページアプリケーションとかできるなんて誰 も想像してなかった
  85. 85. 諸行無常 • 時代が変わるにつれてHTTPだけじゃ対応できな くなってきた • そもそもHTTPが古すぎる • 今主流のHTTP/1.1が策定されたのは1997年 • とてもじゃないがHTTPだけではそれらのサービ スを実装できない
  86. 86. 諸行無常 • 時代が変わるにつれてHTTPだけじゃ対応できな くなってきた • そもそもHTTPが古すぎる • 今主流のHTTP/1.1が策定されたのは1997年 • とてもじゃないがHTTPだけではそれらのサービ スを実装できない
  87. 87. でも大丈夫
  88. 88. 素敵な仲間たちがいるから
  89. 89. HTTPにできる/できないこと
  90. 90. HTTPにできること
  91. 91. できること • TCP通信の省略 • (セキュアな通信)
  92. 92. TCP通信の省略 • HTTP/1.1であればConnectionヘッダーで制御可能 • Connection: Keep-Alive • 特に指定がなくてもほとんどの環境で自動的に適用 されます
  93. 93. クライアント サーバこれが
  94. 94. クライアント サーバこうなる
  95. 95. セキュアな通信 • HTTP/1.1であればBASIC認証, DIGEST認証が使用可 能 • HTTPの段階でセキュアに認証するために導入された • でも全然セキュアじゃないので使わないでください
  96. 96. セキュアな通信 • BASIC認証 • パスワードが平文でHTTPメッセージに乗っかる • DIGEST認証 • パスワードはメッセージに乗らないが認証トークンはメッ セージに乗っかる いずれも盗聴されたら終わり 認証機構をHTTPのみで実装するのはやめましょう
  97. 97. HTTPにできないこと
  98. 98. できないこと • 状態保持(ステートフルな通信) • セキュアな通信 • サーバプッシュ • 通信の並列 / 多重化
  99. 99. 状態保持 • HTTPはステートレスなプロトコル! • HTTPヘッダー内でCookieを使用することで実現可能
  100. 100. Cookie??
  101. 101. クライアント サーバ ログインフォーム送信! ログインOK!マイページ送るね 1回目の通信
  102. 102. クライアント サーバ ログインフォーム送信! ログインOK!マイページ送るね 1回目の通信 あ、あと次回のためにCookieも発行しておくね! ログイン済みCookie
  103. 103. クライアント サーバ ログインフォーム送信! ログインOK!マイページ送るね 1回目の通信 あ、あと次回のためにCookieも発行しておくね! ログイン済みCookie 2回目以降の通信はこいつを 含めてやりとりすることで ログイン済みかどうか判断
  104. 104. Cookie • ログイン情報やECのカート情報をCookieに入れてお き、次回以降は常にCookieも含めて通信する • 状態保持ができ、ステートフルな通信を実現できる • Cookieには有効期限をつけたりJSから読み込めなく したりすることもできる
  105. 105. セキュアな通信 • HTTPS通信で実現できる • HTTPS = HTTP + SSL / TLS • 複数プロトコルを組み合わせ、暗号化通信を実現する • BASIC, DIGESTと違い盗聴されても大丈夫! • ただし導入にはコストがかります( ꒪⌓꒪)
  106. 106. サーバプッシュ • JavaScriptのAjaxによって実現される • 手法がいくつか存在する • Polling / Comet(Long Polling) / WebSocket • それぞれの長所 / 短所を知り、使い分けるのが大事 • 選択肢はComet or WebSocket
  107. 107. 通信の並列/多重化 • HTTP/1.1までで実現する方法はないです(´・ω・`) • のでフロントをデザインする際はリソースの読み込 み順や通信量を意識する必要がある • ただしモダンなブラウザでは通信の並列化を行って いる
  108. 108. 通信の並列/多重化
  109. 109. 通信の並列/多重化 並列でリクエストしてる
  110. 110. 通信の並列/多重化 • だいたいのブラウザでは6個まで処理できる • 7つ目のリクエストは6個のうちどれかが完了するま でWaiting状態になる • ページが重い時はHTTPリクエストの所作を見るのを おすすめします
  111. 111. まとめ
  112. 112. Web通信で大事なこと • Web通信はクライアント/サーバがリクエスト/レスポ ンスをやりとりすることで実現される • リクエスト/レスポンスにHTTPが使用される • クライアントからアクションを起こさない限り通信 は発生しない
  113. 113. HTTPで大事なこと • HTTPはステートレスなプロトコル • HTTPメッセージの実態はテキスト • HTTPの役割を理解し、できる/できないことを知る
  114. 114. おまけ
  115. 115. HTTP/2.0 • 最新バージョンであるHTTP/2.0の最終ドラフトが 2015年2月17日に承認されました! • めでたい!
  116. 116. HTTP/2.0 • 今までできなかったことができるようになるらしい • サーバプッシュ • ストリームによる通信の多重化 • ボディのバイナリ化による高速化 • リソース読み込み優先順位付け
  117. 117. HTTP/2.0は次回ヾ(*´∀`*)ノ
  118. 118. 以上、解散!

×