【アーキテクチャ】【Web】Webページの表示

# Webページが表示されるしくみ

<img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141308/f987447f-5ec8-3d44-4bf0-f4b23137c7d6.png">

1. DNSサーバにWebサーバと通信するためのIPアドレスを問い合わせる
2. IPアドレスを返す
3. Webサーバへリクエストの送信
4. サーバ側はクライアントからの要求に対してページデータを転送

# URLの書式
例）http :// www.hostname.com / index.html

|書式名|部位|意味|
|:---|:---:|:---|
|スキーム（scheme）|http|しくみ、体系<br>Webを閲覧するためにクライアントのWebブラウザとWebサーバ間でコンテンツをやりとりする方法（プロトコル）|
|ドメイン（ホスト）|www.hostname.com|Webサイトの場所<br>ホストのWebサイトにアクセスする|
|パス|index.html|Webサイトの場所<br>ホストのこのパス（ファイル）のコンテンツを送ってくださいという要求|

# プロトコル
ネットワークは端末と端末が通信することで成り立つ。コンピュータネットワーク機器が互いに通信するためには、互いに同じ方法で通信する必要がある。このルールがプロトコル。

## TCP/IP
インターネットに関する様々なプロトコル群の総称

- IEEE 802.3
- FDDI
- ICMP
- TCP
- HTTP
- IP
- FTP
- DNS
- PPPoE
- SNMP
- UDP

### 階層
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141308/472cd01d-4c59-469d-9094-454b1f020454.png">

- アプリケーション層
    - あらゆるアープリケーションの細かい動きを決める。TCP/IPんみはさまざまな共通のアプリケーションが用意されている
        - FTP
        - DNS
        - HTTP
- トランスポート層
    - アプリケーション層に対して、ネットワークで接続されている2台のコンピュータ間のデータの流れを提供する
        - TCP（Transmission Control Protocol）
        - UDP（User Data Protocol）
- ネットワーク層 or インターネット層
    - ネットワーク上のパケットの移動を扱う。パケットは通信するデータの最小単位。
    - どのような経路で相手のコンピュータまでパケットを送るかということを決める。
- リンク層 or データリンク層 or ネットワークインタフェイス層
    - ネットワークに繋がるハードウェア的な面を扱う。OSがハードウェアを制御するためのデバイスドライバや、ネットワークインターフェイスカード（NIC）を含む。ケーブルなどの物理的な部分（コネクタなども含むあらゆる伝送媒体）も含む。

それぞれの階層を渡っていくときには、必ずその階層ごとに必要なヘッダ情報を使う

## IP（Internet Protocol）
どんな通信技術が使われていても、どんな端末がつながっていても、そのネットワークは他のネットワークとゲートウェイを通じて相互に接続できる。障害が発生しても、迂回するための仕組みを組み込める。この柔軟さが、ネットワークをここまで大きくスケールさせ、インターネットを世界で相互接続させる巨大なネットワークへと変えた。

- メリット
    - あらゆる通信のしくみ／端末を柔軟に取り込めるようにしたこと
- デメリット
    - 利用者がSNSのような第三者によって運営されるサービスへ接続するとき、問題のあるネットワークを経由すると、それがサービス自体の品質へダイレクトに影響を与える。
    - サービス提供者側が優れた通信技術をネットワークに取り込んでも、パブリッククラウドを使うと帯域の不足に悩まされる。
    - カフェなどで無料Wi-Fiスポットやモバイルルータを使ってアクセすると、セキュリティに悩まされる

## TCP（Transfer Control Protocol）
TCPはインターネットを使用して通信を行う場合、コンピュータとコンピュータが1:1で通信するときの基本プロトコル。特徴は通信パケットに対してシーケンス番号を付与することで、伝送中の欠損パケットを再送することができ、信頼性の高い通信を行う。
「http://」が指定されるとTCPで平文通信する

### スリーウェイハンドシェイク
<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141308/892990da-f6b6-bf2c-1f5d-6369ac7d4910.png">

1. 送信側の最初のSYNで相手に接続するとともにパケットを送る
2. 自身側のSYN/ACKで送信側に接続接続するとともにパケットを受け取ったことを伝える
3. 送信側がACKでやりとりが完了したことを伝える

途中で途切れた場合は、同じパケットを再送して同じ手順を実施する

## DNS（Domain Name System）
ドメイン名とIPアドレスの名前解決を提供する。

## HTTP/1.1とHTTP/2
クライアントとサーバ間で通信する。文書や画像などのリソースを欲しいと要求する側がクライアントとなり、そのリソースを提供する側がサーバとなる。

クライアントからリクエストが送信され、その結果がサーバからレスポンスとして返される。サーバ側から通信が開始されることはない。

ステートレス（リクエストとレスポンスのやりとりが1回で完結することで、次の通信では前回の状態を引き継がないことを指す）プロトコル。HTTPプロトコル自身は、以前送ったリクエストや、送られてきたレスポンスを記憶する仕組みがないこと。

<img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141308/3b683738-f3cf-34f0-1592-8ca4b104f02f.png">

HTTP/2は、HTTP/1.1のセマンティクスを維持したままパフォーマンスとセキュリティを向上させている。
HTTP/1.1のメッセージを効率よく転送するため、新たに「ストリーム」という概念と、「フレーム」というメッセージを導入している。HTTPリクエスト／HTTPレスポンスを伝えるしくみに変わりなく、伝え方がHTTP/2はバイナリのプロトコル。

### ストリーム
通信を管理する単位、HTTP/1.1のHTTPリクエストとHTTPレスポンスのやりとりが1つのストリームになる。

<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141308/2613b1b2-5c00-18c1-e72b-4a8bdceffba9.png">

1つのTCPコネクションの上で、HTTPリクエストとそれに対するHTTPレスポンスが1つのストリームという単位で送信されるイメージ。各HTTPリクエストとそれに対するHTTPレスポンスはストリーム単位で並列的に送受信され、準備できたものから送信できるHTTPリクエストの数に制限があったり、他のレスポンスの処理が終わるのを待ったりすることはない。
ストリームはHTTPリクエストを送信する都度、新しく生成される。各ストリームはストリームIDという識別子で、重複しないよう管理される。ストリームID：0は特殊で、特定のストリームではなく、コネクションそのものを指す。
ストリームは再利用できない。1回のリクエスト／レスポンスが終了したら、そのストリームは使用できなくなる。

### フレーム
HTTP/2におけるバイナリ形式のメッセージ。

<img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141308/5743aa90-b56a-68bb-76ae-cef3a538d73e.png">

|Frame type名|Type番号|説明|
|:---|:---|:---|
|DATA|0x0|HTTPリクエストのPOSTデータ／アップロードファイル、HTTPレスポンスのボディを転送する|
|HEADERS|0x1|HTTPリクエスト／HTTPレスポンスのヘッダを転送する|
|PRIORITY|0x2|特定のストリームの優先度を変更する|
|RST_STREAM|0x3|エラーの際などにストリームの終了を通知する|
|SETTINGS|0x4|通信に関するパラメータを通知する|
|PUSH_PROMISE|0x5|サーバプッシュのためにストリームを予約する|
|PING|0x6|コネクションの生存を確認する。PINGフレームを受け取った場合は、ACKフラグのついたPINGフレームを返さなければならない|
|GOAWAY|0x7|コネクション自体を切断するために、新しいストリームの生成を停止するよう通知する。どのストリームまで処理を行ったかの情報も含まれる|
|WINDOW_UPDATE|0x8|フロー制御のために使用する|
|CONTINUATION|0x9|たくさんのHTTPヘッダを送信する際などに、HEADERフレームに継続して送信される|

## SSL/TLS
IPが想定していないような機密性、真正性、完全性などの要求をカバーしてセキュリティを高める。
IPのセキュリティ面の問題点を解決する。
「https://」が指定されるとセキュアなTLSを使って通信する。

## ポート番号
ポート番号ごとに、通信するサーバの種類を分けている。

|ポート番号|種類|
|:---|:---|
|25|メールサーバ（SMTP）|
|53|DNSサーバ|
|123|NTP（Network Time Protocol）|

# リクエスト
WebブラウザからWebサーバへ送信されるHTTPリクエストは、「リクエスト行」、「メッセージヘッダ」、「ボディ」の3つで構成されている。

||例|
|:---|:---|
|リクエスト行|GET /hello.html HTTP/1.1|
|メッセージヘッダ|Host: www.sample.co.kp<br>Accept-Language: ja|
|ボディ|&lt;!DOCTYPE html&gt;<br>　&lt;html&gt;<br>　　&lt;head&gt;<br>　　　&lt;title&gt;タイトル&lt;title&gt;<br>　　　　&lt;body&gt;　　...

## リクエスト行
以下、3つで構成されている

|構成要素|説明|
|:---|:---|
|メソッド|Webサーバに対する要求コマンド|
|リクエストURI（Uniform Resouce Identifier）|リクエストの対象となるデータ|
|HTTPバージョン＋改行コード|WebブラウザがサポートするHTTPのバージョン番号|

### メソッド
Webサーバに対する要求コマンド
HTTPプロトコルでは、Request-URIで指定したリソースに対してリクエストを送る際にどうして欲しいかを指示する。
プロトコルバージョンでサポートするメソッドに違いがあり、大文字と小文字を区別するので、大文字で記載する。

|主なメソッド|HTTP1.1|HTTP2.0|説明|
|:---|:---|:---|:---|
|GET|◯||リソースの取得|
|POST|◯||エンティティボディの転送|
|PUT|◯||ファイルの転送|
|HEAD|◯||メッセージヘッダの取得|
|DELETE|◯||ファイルの削除|
|OPTIONS|◯||サポートしているメソッドの問い合わせ|
|TRACE|◯||経路の調査|
|CONNECT|◯||プロキシへのトンネリング要求|
|LINK|||リソース間にリンク関係を確立する|
|UNLINK|||リンク関係の削除|

# レスポンス
HTTPリクエストを受け取ったWebサーバは、リクエストに対するレスポンスを返す。
「ステータスライン」「HTTPヘッダ」「ボディ」の3つで構成されている。

```:例
HTTP/1.2 200 OK  <<-- HTTPサーバのバージョンとリクエストの処理結果＝ステータスコードと説明
Date: Sun 13 Oct 2019 18:13:26 GMT  <<-- レスポンスが生成された日時
（改行）
<html>
<head>
（/index.htmlの HTMLファイルの内容）
```

## ステータスライン
HTTPのバージョン、ステータスコード解説文の3つで構成されている。

### ステータスコード
通信結果を数値で表す

|ステータスコード|概要|内容|
|:---|:---|:---|
|100番台|案内|リクエストは受け取られた|
|200番台|成功|リクエストは正しく受け取られた|
|300番台|リダイレクト|さらに追加処理が必要|
|400番台|クライアント処理失敗|リクエスト内容が問題ある|
|500番台|サーバ処理失敗|サーバ側でエラーが発生した|