HTTP・HTTPS（通信の流れ）
HTTP(Hypertext Transfer Protocol)とは
ブラウザとWebサーバーの間で行う通信規格。
ファイル（HTML、画像など）を送受信するための「約束事」。
通信は暗号化されていないため、セキュリティ面では脆弱。
HTTPでのやり取りで、クレジットカードの情報を入力すると、情報を盗まれてしまう恐れがある。
HTTPS(Hypertext Transfer Protocol Secure)
HTTPに SSL(Secure Socket Layer) を組み合わせ、通信を暗号化したもの。
現在ではSSLの代わりに、より安全な TLS(Tranport Layer Security) が主流。
SSLサーバー証明書
HTTPSで通信する場合、サーバー側にSSLサーバー証明書を発行する必要がある。
有料・無料のものがある。
HTTP通信の流れ
- URLを解析する
- キャッシュにIPアドレスがないか確認する
- DNSでIPアドレスを取得する
- IPアドレスでWebサーバーにリクエストする
- ポート番号を割り当てる
- HTTPリクエストを送信する
- ロードバランサでアクセスを調整する
- HTTPレスポンスを送信する
- レンダリングする
1. URLを解析する
ブラウザに入力したURLから、どんなページを表示させるか判断する。
例えば、Amazonで「パソコン」と検索すると、URLの中に以下のようにURLに検索したワードが入力される。
s?k=パソコン の部分は、 検索クエリ（検索キーワード）を表している。
このユーザーが入力した情報を パラメーター と呼ぶ。
HTTP通信では、クライアント（ブラウザなど）がサーバーにリクエストを送る。
その時に「どんな操作をしたいのか？」を伝えるのが HTTPメソッド。
詳しくは、こちら。
| メソッド | 内容 | パラメーターの扱い |
|---|---|---|
| GET | データを取得したい | URLの中に表示される |
| POST | データを送信・登録したい | URLには表示されず、ボディ内 |
2. キャッシュにIPアドレスがないか確認する
キャッシュとは
ブラウザに一時的に保存されるデータベースみたいなもの。
「キャッシュにごみが溜まる」などよく言うのは、余計なデータが含まれてしまってる状態。
アクセスするとき、キャッシュにIPアドレス（住所）がないか確認する。
3. DNSでIPアドレスを取得する
キャッシュにIPアドレスがなければ…
DNSでIPアドレスを取得する、電話帳みたいなものがDNS。
DNSは、アクセス先のIPアドレスを知ってるので、問い合わせる。
4. IPアドレスでWebサーバーにリクエストする
DNSで判明したIPアドレスを使ってリクエストする。
なぜIPアドレスが必要のか？ドメインではアクセスできないのか？
コンピューターは数字しか理解できないから、IPアドレスが必要となる。
5. ポート番号を割り当てる
サーバーを家だとすると、この部屋を使おうというのがポート番号。自動的に割り当てられる。
- HTTPS：443
- HTTP：80
たとえば、同じIPアドレスのサーバーでも「Webサービス」と「メールサービス」は、プロトコルが違うので、違うポート番号を使用する。
下記はZennの私の記事一覧で開発ツールを開いた場合。
リモートアドレスのラストが「443」になっている。これがポート番号。
6. HTTPリクエストを送信する
ここでようやくリクエストする！
クライアントからリクエストメッセージを、WEBサーバー宛に送る。
リクエストメッセージには、HTTPメソッドが含まれる。
HTTPメソッドとは
HTTPメソッドとは
クライアントが（主にブラウザやアプリ）がサーバーに対して「何をしたいか」を伝えるための指示。
「このURLに対して、何をしたいのか？」を伝える命令の種類。
よく使われるHTTPメソッド一覧
| メソッド | 用途 | 例え |
|---|---|---|
| GET | 情報を取得する | 「これ見せて！」 |
| POST | 新しいデータを作成する | 「これ追加して！」 |
| PUT | 既存データを更新する | 「これまるっと入れ替えて！」 |
| PATCH | 一部だけを更新する | 「この部分だけ直して！」 |
| DELETE | データを削除する | 「これ消して！」 |
例：本の情報を管理するAPI
| 操作内容 | HTTPメソッド | URI例 |
|---|---|---|
| 本の一覧を取得 | GET | /books |
| 本を新しく追加 | POST | /books |
| 本の内容を更新 | PUT | /books/123 |
| 本を削除する | DELETE | /books/123 |
リクエストは下記のような「リクエストライン、ヘッダー、空行、メッセージボディ」のフォーマットになっている。
リクエストライン（例：GET /index.html HTTP/1.1）
ヘッダー（例：Host、User-Agentなど）
空行
メッセージボディ（POSTなどでデータを送信する場合）
-
リクエストライン：
「 GETメソッド で index.html を表示してね」という意味。 HTTP/1.1 はHTTPの種類。上で説明したAmazonの場合は「GET /s?k=パソコン HTTP/1.1」となる。 -
ヘッダー：
Host の後には ドメイン名 が入る。Amazonなら「www.amazon.co.jp」
User-Agent の後は、どのデバイスを使用してるかが書かれる。iphoneからのリクエストだとわかればスマホ用の情報を表示する。ブラウザ名（chromeなど）もここに書かれる。
ここでもまとめた。
7. ロードバランサでアクセスを調整する
ロードバランサーは、「調整役」
ツイッターなど大きなシステムは、アクセスを分散させるため、サーバーが複数存在する。ユーザー全員が一気にアクセスしに来るとさばけなくなってしまう。
そこで登場するのがロードバランサー。
このリクエストはこっちに回そうなどを考えて分散させてくれる。
8. HTTPレスポンスを送信する
Webサーバーがレスポンスメッセージを返す。
レスポンスのフォーマットは下記の通り。
ステータスライン（例：HTTP/1.1 200 OK）
ヘッダー
空行
メッセージボディ（HTMLなどの中身）
リクエストとの違いは、「リクエストライン」が「ステータスライン」になっている。
ターミナルで「curl」コマンドを打つと、HTTPレスポンスを確認することができる。
レスポンスメッセージの200は、通信が成功していることを示す。
メッセージボディは、HTMLであればHTMLがそのまま入ってる。
9. レンダリングする
いよいよ画面に表示していく。
- ローディング：HTMLなどをダウンロード。この時、HTMLから行う。（何を呼び出すか情報がすべて入ってるから）
- スクリプティング：JavaScriptを読み込み・実行。ReactやVue.jsを使用してた場合、ここで呼び出される。
- レンダリング：DOMを構築して画面を生成
- ペインティング：実際に画面に描画
これで画面を見ることができる！
参考文献
以下YouTubeのリンク。
Discussion