Zenn
🔥

WEB開発の基礎: URI、URL、ドメイン名、DNSについて

2023/06/25に公開
インフラ
frontend
network
バックエンド
tech

はじめに

https://zenn.dev/bellstone/articles/e5030014949425
前回の記事ではIPアドレス、プロトコル、インターネットプロトコルスイート、TCP、UDPについて勉強しました。
3-way-handshakeを使って論理的な連携をした後通信することも分かりました。
しかし、私たちはブラウザ上でWEBサイトを利用する時にはIPアドレスを使わず、URLというテキストを利用してます。
今回はURLは何かとURLとIPアドレスをマッピングしてくれるDNSまで勉強したことを共有したいと思います。

URI(Uniform Resource Identifier)

ドメイン名を勉強する前にURLが何か理解しないといけないです。
URLの話したのに、URIは何でしょうか？
URIの定義があるRFC3986を見てみましょう。
https://datatracker.ietf.org/doc/html/rfc3986#section-1.1.3

A URI can be further classified as a locator, a name, or both. The term "Uniform Resource Locator" (URL) refers to the subset of URIs that, in addition to identifying a resource, provide a means of locating the resource by describing its primary access mechanism (e.g., its network "location"). The term "Uniform Resource Name" (URN) has been used historically to refer to both URIs under the "urn" scheme [RFC2141], which are required to remain globally unique and persistent even when the resource ceases to exist or becomes unavailable, and to any other URI with the properties of a name.

URIの英語を説明するとUniformはリソースを識別する方式、ResourceはURIで識別する資源、Identifierは他の項目と区分するための情報で資源を識別するための識別子だと思います。それと上記の内容を加えるとURIはLocatorとName又は両方で分類で切るので、URIはURLとURNを含めてると思います。

具体的には下記のURLとURNをみてみましょう。

  foo://example.com:8042/over/there?name=ferret#nose
  \_/   \______________/\_________/ \_________/ \__/
   |           |            |            |        |
scheme     authority       path        query   fragment
   |   _____________________|__
  / \ /                        \
  urn:example:animal:ferret:nose

URLはブラウザでよく見れる形式とURNは名を付与した形式です。
URLはリソースがある位置を指定します。（例：https://zenn.dev/bellstone）
URNはリソースに名前を付与します。（例：urn:isbn:9781492053699）
位置は変更できるが、名前は中々変更できないです。URNは上記みたいに本のISBNを表する時に使えますが、リソースを探す方法があまりないため、URNはあまり使用しません。
なので、普通にURIをURLと同じ意味で使うので、これからURLだと話します。

URL

URLの文法は下記を参考してください。
Wikipedia - URL
Googleで何を勉強するか迷うあなたにを検索したURLを例でもうちょっとみてみましょう。

https://www.google.com/search?q=何を勉強するか迷うあなたに
scheme://[userinfo@]host[:port][/path][?query][#fragment]

URLの文法と同じように見えますか？一つずつ見てみようと思います。

scheme

schemeでは主にプロトコルを使用します。HTTPやHTTPSみたいです。
ちなみに、HTTPは80ポート、HTTPは433ポートを使います。この80と443は省略できます。
上記のURLで該当する部分はhttpsです。

userinfo

userinfoは使用者の情報(username:passwordなど)を含めて認証用に使います。
あまり使わないと思います。
上記のURLで該当する部分はありません。

host

ホスト名を意味でドメイン名またはIPアドレスを直接使えます。
上記のURLで該当する部分はwww.google.comです。

ドメイン名？

ドメイン名ということは何でしょうか？
例えば、Googleに接続する時に毎回142.250.198.14というIPを覚えないといけないと想像してみてください。それとIPは変更可能性があったため明日は142.250.198.15になるかもしれません。
暗記力が悪い私をため、もっと覚えやすくて読みやすい方法があると思います。

ドメイン名はこのような問題を解決するために使用されます。クライアントがサーバに接続するため使うIPアドレス(142.250.198.14)に該当する人間に優しいテキストです。数字よりドメイン名は人間が読みやすいし覚えやすいです。いかがですか？142.250.198.14よりgoogle.comが覚えやすいよね？

でも、ドメイン名では制約事項があります。
まずは、誰かが142.250.198.14というIPアドレスを割り当てくれないとサーバに接続できません。
それと、ドメイン名は完全に買うことができなくて、一定期間を借りることのみ可能です。

ドメイン名はドメイン登録サービスを提供する会社でドメイン名を借りないといけないです。
DNS(Domain Name Service)サーバはドメイン名を管理して割り当てる重要な役割をします。ドメイン名をIPアドレスに変換して通信ができるようにします。

port

接続ポートを意味で一般的には諸略します。HTTPは80ポート、HTTPSは443ートが指定されます。
上記のURLで該当する部分はHTTPSなので、443が省略されてます。

path

リソースがある経路の意味です。階層の構造になってます。
上記のURLで該当する部分は/searchです。
階層構造の例は下記になります。

zenn.dev
zenn.dev/article
zenn.dev/articles/explore
zenn.dev/username
zenn.dev/following

query

key=valueの形で?から初めて必要な場合&を使用して足すことができます。
上記のURLで該当する部分は?q=何を勉強するか迷うあなたにです。

fragment

fragmentはHTML内部のバックマーク、目次で使われるものです。サーバに転送する情報ではありません。
例えば右下の目次をクリックすると画面が移動されてURLに#XXXが表示されます。

ブラウザの流れ

今までクライアントとサーバ、IPアドレス、URL、ドメイン名、DNSなどを勉強しました。これからブラウザからの流れについて勉強したことを共有したいと思います。

例えば、下記のURLにリクエストしてみます。

https://zenn.dev/bellstone/articles/96ff6386f17616

  1. WEBブラウザがDNSサーバを照会してIPとポート情報を取得してHTTPリクエストメッセージを生成します。リクエストメッセージではHTTPメソッド、PATH情報、クエリ情報、HTTPバージョンが入ってます。実際にChromeではF12を教えてNetworkタブで送ったリクエストヘッダ、本文の情報を見ることができます。
  2. ブラウザが生成したHTTPメッセージをTCP3-way-handshakeをしてサーバと連結してデータを転送します。
  3. パケット情報を生成して送ります。このTCP/IPパケットではIPとPORT情報が入ってます。この時に WEBブラウザから生成したメッセージを含めて送ります。
  4. zennサーバにメッセージが到着したら、パケットを分解してHTTPメッセージを分析します。その後リスポンスデータを生成して応答します。
    リクエストと同じようにリスポンス情報もChrome上でみれます。Content-Type、Content-lengthなどを確認できます。

    もちろん、リスポンスの本文もみれます。
  5. 以降、zennサーバから送られたリスポンスデータが到着してブラウザがHTMLを解析してレンダリングを使用してページを生成します。

まとめ

今回はURIとURI中ではURLとURNの区分をしてみました。
URLはリソースがある位置を指定して（https://zenn.dev/bellstone）, URNはリソースに固有の名前を付与しました。（urn:isbn:9781492053699）。
その後URLの構造についても分析してみました。

scheme://[userinfo@]host[:port][/path][?query][#fragment]

それと、IPアドレスを覚えるより、人に優しくサーバに接続できるドメイン名とドメイン名を管理してくれるDNSまで勉強しました。
最後にブラウザの流れも調査しました。クライアントからリクエストを送ってサーバからレスポンスデータが来たら、レスポンスをブラウザに見せることでした。
次回は、テキストに作成されてるレスポンスデータを提供する、リソースを提供することで重要なホスティングについて勉強したいと思います。

今までの説明が皆さんにも分かりやすく説明できていればと嬉しいです。

Discussion