【開発ナレッジ】ブラウザからリクエストが送られてレスポンスが返るまでのフロー - j-komatsu/myCheatSheet GitHub Wiki

ブラウザからリクエストが送られてレスポンスが返るまでのフロー

フローのまとめ

  1. リクエストの発行:
    ユーザーが操作し、ブラウザがサーバーにリクエストを送信します。

  2. DNSルックアップ（初めて接続する場合のみ）:
    URLをインターネット上の住所（IPアドレス）に変換します。

  3. TCP接続確立:
    パソコンとサーバーがデータを送る準備を整えます。

  4. TLSハンドシェイク（HTTPSのみ）:
    安全な通信のために暗号化の鍵を交換します。

  5. HTTPリクエスト送信:
    「この情報をください！」というメッセージを送ります。

  6. サーバー処理:
    サーバーがリクエストを理解し、データベースと連携して必要な情報を用意します。

  7. レスポンス送信:
    用意したデータをブラウザに返送します。

  8. 画面の描画:
    ブラウザが受け取ったデータを解析して画面に表示します。

各ステップの詳細な説明

1. リクエストの発行

  • 専門的な言葉
    ユーザーがブラウザでHTTPリクエストを発行します。具体的には、ブラウザがGETやPOSTメソッドを使用してリソースを要求します。

  • 初学者向けの言葉
    ユーザーが「検索」ボタンを押したり、URLを入力すると、ブラウザが「この情報が欲しいです！」というメッセージをサーバーに送ります。

2. DNSルックアップ（初めて接続する場合のみ）

  • 専門的な言葉
    初めてアクセスする場合、ドメイン名（例: www.example.com）をIPアドレス（例: 192.0.2.1）に変換するDNSルックアップが行われます。この結果はローカルやISPのキャッシュに保存され、次回以降のルックアップがスキップされます。

  • 初学者向けの言葉
    初めてアクセスする場合、「[www.example.com」という名前をインターネット上の住所（例](http://www.example.xn--com(-dy3csmoa4y2bxvsgmmxbzdwd46a0ep296cqbfl8ai10buljcj9f/): 192.0.2.1）に変える作業が行われます。一度住所を調べると覚えておくので、次回はこの作業を省略します。

3. TCP接続の確立（毎回実行）

  • 専門的な言葉
    クライアントとサーバー間で3ウェイハンドシェイクを行い、TCP接続を確立します。このプロセスにより、信頼性のあるデータ送信が保証されます。

  • 初学者向けの言葉
    パソコンとサーバーが「データを送る準備OK？」とお互いに確認し合います。「OK」が確認できたらデータのやり取りを始めます。

4. TLSハンドシェイク（HTTPSの場合、初回とセッションが切れた場合）

  • 専門的な言葉
    HTTPS通信ではTLS/SSLハンドシェイクが行われ、暗号化通信を行うためのセッションキーが交換されます。一度確立したTLSセッションは、一定期間キャッシュされるため、次回以降のハンドシェイクはスキップされる場合があります。

  • 初学者向けの言葉
    初めての接続や長時間経った後の接続では、パソコンとサーバーが「暗号の鍵」を交換します。この鍵を使ってデータを安全にやり取りします。一度交換した鍵はしばらく覚えているので、次回はこの作業を省略できることがあります。

5. HTTPリクエスト送信（毎回実行）

  • 専門的な言葉
    クライアントがサーバーに対してHTTPリクエストを送信します。リクエストには、HTTPメソッド（例: GET）、URLパス、ヘッダー情報、必要に応じてボディが含まれます。

  • 初学者向けの言葉
    「この商品のページが見たいです！」というメッセージをインターネットを通じてサーバーに送ります。

6. サーバー側処理（毎回実行）

6-1. リクエスト解析

  • 専門的な言葉
    Webサーバー（例: Nginx, Apache）がリクエストを解析し、静的リソースを返すか、アプリケーション層に処理を委譲するかを判断します。

  • 初学者向けの言葉
    サーバーが「どんなお願いか」を調べます。簡単なリクエストならその場で答えますが、複雑なお願いは詳しく処理する人（アプリケーション）に回します。

6-2. アプリケーション処理

  • 専門的な言葉
    アプリケーションサーバー（例: Spring Boot）がルーティングを実行し、適切なコントローラーメソッドを呼び出します。必要に応じてバリデーションや認証処理を行います。

  • 初学者向けの言葉
    サーバーのプログラムが「このリクエストにはどのデータを使うべきか」を決めて、計算や確認をします。

6-3. データベースアクセス

  • 専門的な言葉
    データベース管理システム（例: MySQL, PostgreSQL）にクエリを送信し、リクエストに対応するデータを取得します。

  • 初学者向けの言葉
    サーバーが「商品の名前や値段を教えて！」とデータベースに頼みます。データベースは必要な情報を返します。

6-4. レスポンスデータの構築

  • 専門的な言葉
    テンプレートエンジン（例: Thymeleaf, JSP）やJSON生成ライブラリを用いて、データをクライアントが理解できる形式に変換します。

  • 初学者向けの言葉
    サーバーが「ブラウザがわかる形」にデータをまとめます。たとえば、商品の名前や値段をきれいに並べたページを作ります。

7. レスポンス送信（毎回実行）

  • 専門的な言葉
    サーバーがHTTPレスポンスを作成し、ヘッダー情報とボディをクライアントに送信します。

  • 初学者向けの言葉
    サーバーが「これがあなたの欲しいデータです！」と返事を送ります。

8. クライアント側描画処理（毎回実行）

  • 専門的な言葉
    クライアントがHTMLパースを行い、DOMを構築します。CSSの適用やJavaScriptの実行により、ページが動的に表示されます。

  • 初学者向けの言葉
    ブラウザが「届いたデータ」を画面に表示します。色やデザインを整えたり、ボタンを動かせるようにします。

専門的なキーワードの詳細説明

1. 3ウェイハンドシェイク (Three-Way Handshake)

  • 定義
    TCP（Transmission Control Protocol）で接続を確立するための手順です。信頼性のある通信を行うために、クライアントとサーバー間で3回のメッセージ交換を行います。

  • 流れ

    1. クライアントがサーバーに「SYN」パケットを送信（接続開始の要求）。
    2. サーバーが「SYN-ACK」パケットを返送（接続要求を受け入れる応答）。
    3. クライアントが「ACK」パケットを送信（応答を確認）。

  • 具体例
    クライアント（あなたのPC）とサーバー（Googleなど）が「データの送受信準備OK」を確認し合うプロセスです。

    • クライアント：「こんにちは、接続したいです！（SYN）」
    • サーバー：「わかりました、どうぞ！（SYN-ACK）」
    • クライアント：「了解です！接続します！（ACK）」

2. TLSハンドシェイク

  • 定義
    HTTPS通信で暗号化を行う際のプロセスです。クライアントとサーバーが暗号化通信の鍵を交換し、安全なセッションを確立します。

  • 流れ

    1. クライアントが接続要求を送信
      サーバーにサポートしている暗号化アルゴリズムを伝えます。
    2. サーバーが応答
      暗号化アルゴリズムを決定し、証明書（例: SSL証明書）を送信します。
    3. 鍵交換
      クライアントが暗号化用の鍵を生成し、サーバーに送信します（または公開鍵で鍵を生成）。
    4. セッション確立
      双方が同じ鍵を使ってデータを暗号化・復号化する準備が整います。

  • 具体例
    オンラインショッピングのサイトに接続するとき、あなたとサーバーが「秘密の鍵」を交換して、第三者に見られないようデータをやり取りします。

3. DNSルックアップ

4. HTTPリクエストとHTTPレスポンス

  • 定義
    HTTPリクエストはクライアントからサーバーへのデータ要求、HTTPレスポンスはサーバーからクライアントへの応答を指します。

  • リクエストの構成

    • メソッド: GET（データ取得）、POST（データ送信）など。
    • URL: 取得したいリソースの場所（例: /products/123）。
    • ヘッダー: 追加情報（例: ユーザーエージェント、言語設定）。
    • ボディ（任意）: データ送信時に含める内容（例: フォーム入力内容）。

  • レスポンスの構成

    • ステータスコード: 処理結果（例: 200 OK, 404 Not Found）。
    • ヘッダー: サーバーからの追加情報（例: コンテンツタイプ）。
    • ボディ: 実際のデータ（例: HTML, JSON, 画像ファイル）。

  • 具体例

    • リクエスト:
      「この商品の情報をください！」（GETリクエスト）。
    • レスポンス:
      「こちらが商品情報です！」（HTMLやJSONデータ）。

5. キャッシュ

  • 定義
    以前アクセスしたデータや計算結果を一時的に保存し、再利用する仕組みです。

  • キャッシュの種類

    • ブラウザキャッシュ: ユーザーのPCに保存されるデータ。
    • サーバーキャッシュ: サーバー側で保存されるデータ。
    • CDNキャッシュ: 配信ネットワークが保存するデータ。

  • 具体例
    一度見た画像やCSSファイルがキャッシュに保存されると、次回アクセス時には再ダウンロードせずに表示が高速化されます。

6. ロードバランサー

  • 定義
    複数のサーバーにリクエストを分散させる役割を持つ仕組みです。

  • 用途

    • サーバーの負荷を軽減する。
    • サーバー障害時に他のサーバーに切り替える（高可用性）。

  • 具体例
    人気のWebサービス（例: YouTube）は、1つのサーバーでは処理しきれないため、リクエストが世界中の複数サーバーに振り分けられます。