目的

今回はWEB通信の仕組みについて解説します。
インフラエンジニアが担当する基盤分野だけでなく、アプリケーション分野についても踏み込んでいきます。

インフラエンジニアはサーバ構築は行いますが、意外とどのような仕組みでWEBページが表示されるか細かく仕組みを理解している人は少ないです。アプリケーションエンジニアが理解するべき領域ではありますが、システムの全体最適を考える上ではインフラエンジニアにとっても必須の領域です。
アプリケーションの仕組みを理解することで、その下に存在する基盤部分の最適解を導き出すことができます。
システム全体を理解する上では、アプリケーション知識も不可欠なのです。

しばらくは「アプリケーションがどのような仕組みで成り立っているのか」、実際のハンズオンではなく「仕組み」に焦点を当てて解説していきます。一通りの解説が終わったら実際にハンズオンを行う予定です。
仕組みを理解した上で、手を動かした方が吸収量も桁違いです。

Web通信の仕組み・全体像

Web通信とは、URLでパス（場所）を指定して、HTTP（HTTPS）というプロトコルでページを取得するサービス。利用者は「ブラウザ」、提供者は「WEBサーバ」です。

以下はブラウザから「Lovelab Engineer」のサイトにアクセスした時の概要図です。

1. ブラウザにURLを入力し、DNSで名前解決を行う（①②）

DNSサーバは「lovelab.com」ドメインとそのWebサーバのIPアドレスの紐付け情報を持っています。
この技術ブログのように外部に公開したい場合は、ドメインを取得して外部アクセス用のDNSサーバに登録する必要があります（簡単に行えます）。

また、毎回ブラウザがDNSサーバの奥深くまで問い合わせなくても良いように、DNSサーバのうち「キャッシュサーバ」がキャッシュを持っています。ブラウザが再度名前解決を行った場合、そのキャッシュを返答します。
＊DNSサーバについて知りたい方はこちら
「https://lovelabengineer.com/2026/05/17/「almalinux上でdnsサーバを構築してみた」_概念説明編/」

2. TCP通信の確立（③）

DNSサーバから返ってきたIPアドレスを宛先として、「TCP接続」を確立します。
WEBサーバと通信するには、まず通信経路を確立する必要があります。HTTPS通信では通常TCPプロトコルの443番ポートを使用します。

ブラウザは取得したドメインに紐づいたIPアドレスを宛先として、WEBサーバの443番ポートへTCP接続を開始します。TCPでは「3ウェイハンドシェイク」という手順を用いて通信経路を確立します。

この段階で「ブラウザとWEBサーバ間でTCP通信を行える状態」を作ります。

3. TLSによって暗号化を行う（③）

TCP接続を確立後、HTTPS通信を行う場合には暗号化方式として「TLS」を使用します。
TLSではWEBサーバから送られてくる「サーバ証明書」をブラウザが検証します。
例えば、
・証明書は本物かどうか（ドメインと紐づいているか）
・有効期限が切れていないか
・証明書を発行した認証局（CA）は信頼できるか
などを検証します。

問題がなければ、ブラウザとWEBサーバ間で暗号化通信を確立します。

4. HTTPS通信でWEBページをリクエスト（④）

TLSによる暗号化経路を確立すると、その上でHTTP通信を行います。ブラウザはWEBサーバにページをリクエストします。そしてWEBサーバが該当するWEBページを返してブラウザに表示します。

5. ブラウザにWEBページを表示（⑤）

WEBページのHTMLを解析します。その際、そこで指定されたCSSやJavascriptを追加取得します。
CSSでレイアウトを整え、必要であればJavascriptがAPIを実行して他サーバやデータベース（DB）などとやりとりします。
APIとは「ソフトウェア同士が機能やデータをやりとりするためのインターフェース」です。
例えば、「google API」というgoogleが提供しているAPIを呼び出すことで、「google マップ」をWEBページに表示することができます（APIによっては有料です）。

HTMLで「WEBページの構造」、CSSで「装飾などのレイアウト」、Javascriptで「動作と追加通信」を担当することでWEBページをブラウザに表示できます。

6. APIでデータを取得して画面を更新（⑤）

HTMLを使用して初期画面を表示します。その後JavascriptがAPIを実行してデータを取得し、WEBページに反映することができます。

例えば、AmazonのECサイトでは商品情報を一覧で取得する際には、JavascriptがAPIを呼び出して商品データを取得してその結果を画面に反映します。最初のHTMLだけでは商品情報の取得はできません。

まとめ

いかがだったでしょうか。WEB通信の仕組みがクリアになったのではないでしょうか。
普段何気なく、WEBページにアクセスしますがその裏ではこうした複雑なロジックが組まれています。