Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@junkers_rene

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

Posted at

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

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

URLの書式

例）http :// www.hostname.com / index.html

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

プロトコル

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

TCP/IP

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

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

階層

image.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で平文通信する

スリーウェイハンドシェイク

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

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

DNS（Domain Name System）

ドメイン名とIPアドレスの名前解決を提供する。

HTTP/1.1とHTTP/2

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

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

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

image.png

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

ストリーム

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

image.png

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

フレーム

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

image.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
Accept-Language: ja
ボディ <!DOCTYPE html>
　<html>
　　<head>
　　　<title>タイトル<title>
　　　　<body>　　...

リクエスト行

以下、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番台 サーバ処理失敗 サーバ側でエラーが発生した
1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?