フロントエンドロードマップの覚書① ~HTTPの概念~
日本語翻訳のある CLOUD FLARE と MDN の記事を読み進める。
インターネット > What is HTTP?
Frontend Developer Roadmap: Learn to become a modern frontend developer
HTTPは、TCP/IPベースのアプリケーション層通信プロトコルで、クライアントとサーバーの通信方法を標準化したものです。インターネット上でコンテンツがどのように要求され、どのように伝送されるかを定義しています。
What is HTTP? > What is HTTP
HTTPとは
- ハイパーテキスト転送プロトコル
- www の基盤
- アプリケーション層のプロトコル
- クライアントがサーバーに要求しサーバーが応答する一連のルール
アプリケーション層プロトコル
- ユーザが直接さわったりするところ
- アプリケーション層のプロトコル一覧
- HTTP: クライアントからのリクエストに対して、WebサーバがHTTPレスポンスを返す
- SMTP: メール送信
- POT/IMAP: メール受信
- FTP: ファイル転送
- DHCP: IPアドレス割当
- NTP: 時間のズレを補正
- DNS: ドメインからIPを返す
- Telnet: サーバやルータを遠隔操作
- SNMP: ネットワーク機器を監視
HTTPリクエストには何が含まれるのか
- HTTPバージョンタイプ
- URL
- HTTPメソッド
- HTTPリクエストヘッダー
- HTTP本文
HTTPメソッドとは
HTTPリクエストがサーバーに期待するアクションを示す
GETとPOSTの違いについて - Qiita
- GET: 情報取得
- POST: 登録とか更新処理
HTTPリクエストヘッダーとは
キーバリューのペアで保存されている様々なテキスト情報
デベロッパーツール > Network > Headers > Resquest Headers
本文
ユーザー名やパスワード、その他フォームに入力されたデータなど
HTTPレスポンスには何が含まれるのか
- HTTPステータスコード
- HTTP応答ヘッダー
- オプションのHTTP本文
HTTPステータスコード
- 1xx 情報
- 2xx リクエスト成功
- 3xx リダイレクション
- 4xx クライアントエラー
- 5xx サーバーエラー
HTTPレスポンスヘッダー
キャッシュ、日時、ステータスコード、言語などなど様々な情報が返される
What is HTTP? > An overview of HTTP
HTTPベースシステムの構成要素
- HTTP はクライアントサーバーのプロトコル
- リクエストはユーザーエージェント（≒ブラウザ）またはプロキシから送信される
クライアント: ユーザーエージェント
- ≒ブラウザ
- ウェブページに必要なリソースをリクエスト
ウェブサーバー
- リクエストに応じて文書を提供
プロキシ
- ウェブブラウザとWebサーバを中継
- 透過的: 受信したリクエストを変更せず送信
- 透過的でない: サーバーを通過する前に何らかの形でリクエストを変更
- キャッシュ (キャッシュは共用、あるいはブラウザーキャッシュのように個人用にできます)
- フィルタリング (アンチウィルススキャンやペアレンタルコントロールなど)
- 負荷分散 (複数のサーバーが別々のリクエストに対応できるようにする)
- 認証 (さまざまなリソースへのアクセスを制御する)
- ログ記録 (履歴情報の保管を可能にする)
HTTP の基本方針
HTTPはシンプル
- HTTP/2 で HTTP メッセージをフレームにカプセル化され複雑さは増加
- メッセージは人間が読んでも理解できるようになった
HTTPは拡張可能
- HTTP ヘッダーによってプロトコルの拡張や実験が容易
HTTP はステート（状態）レスであるがセッションレスではない
- 同じコネクション上であっても、連続的に実行される2つのリクエスト間に関係性はない
- コネクション
- 通信してるもの同士が仮想的な接続状態を確立すること
- 例えば ブラウザ→プロキシ プロキシ→ブラウザ は別々のコネクション
- コネクション
状態が維持されない
→ このままではショッピングバスケットなどが使いにくい。ログインもアクセス毎に必要になってしまう。
→ ヘッダーを拡張して Cookie を追加する。
→ Cookie にはセッション情報が含まれておりサーバーのセッション情報と照らし合わせてログインを維持することができている。
HTTP とコネクション
- コネクションはトランスポート層で制御されているからHTTPの範囲から根本的に外れている
-
Connectionヘッダーを使用して部分的に制御
HTTP が制御できること
- キャッシュ
- サーバーはプロキシやクライアントに対して、なにをどれだけの間キャッシュするか指示できる
- オリジン制約の緩和
- 認証
- WWW-Authenticateヘッダの利用
- または Cookie を使用し特別なセッションを設定
- プロキシとトンネリング
- サーバーやクライアントがイントラネットに配置されているときIPアドレスが見えない
- この境界を渡るためHTTPリクエストはプロキシを通過
- セッション
- Cookie を使用してリクエストとサーバーのセッションを関連付ける
→ ステートレスプロトコルにもかかわらず、セッションを作成できる
- Cookie を使用してリクエストとサーバーのセッションを関連付ける
HTTP のフロー
クライアントがサーバー (最終目的地のサーバーまたは中間のプロキシ) と通信したいとき、クライアントは以下の段階を踏む
- TCP コネクションを開く
- HTTP メッセージを送信する
- サーバーから送信されたレスポンスを読み取る
- 次のリクエストのためにコネクションを閉じるか再使用する
- HTTP パイプラインが有効であればレスポンスを待たずしてリクエストを送信できる
→今のところ無理
→リクエストを多重化する機能で代替
リクエスト
以下の要素で構成
- HTTP メソッド
- リソースのパス
- HTTPプロトコルバージョン
- ヘッダー: サーバーに追加の情報を与える
- Body: POSTのようなメソッドでは送信するリソースを包含
レスポンス
- 準拠する HTTP プロトコルのバージョン
- ステータスコード
- ステータスメッセージ
- リクエストと同様の HTTP ヘッダー
- (省略可) リソースを含む本文
HTTP に基づく API
- ユーザーエージェント（≒ブラウザ）とサーバー間でデータ交換ができる
- XMLHttpRequest API
- Fetch API
- サーバーからクライアントへの一方通行のデータを送信
- server-sent event
まとめ
HTTP は容易に使用できる、拡張可能なプロトコルです。クライアントサーバー構造と単純にヘッダーを追加できる機能性を組み合わせて、 HTTP はウェブの機能拡張に合わせて進化できます。
Discussion