HTTPの仕組み（クライアント/サーバー）｜Chopesu Blog - 文系・未経験でエンジニアに転身した元営業マンのエンジニアライフ

Webエンジニアとして、HTTPへの理解を深めることはとても大切です。有名なアーキテクチャスタイルであるRESTの中でも特に有名な「クライアント/サーバー」という制約について、色々な教材をもとにまとめてみました。

これからもTwitterで転職やキャリア・プログラミング学習について発信していこうと思っているので、
お気軽にフォローもらえたら嬉しいです！ @chopesu_se

※クックパッドの研修資料を参考に内容を拡充しました！
文中の図は資料の図を一部引用させて頂いています。
https://speakerdeck.com/osa/introduction-to-the-internet

Contents

Webサイト閲覧の流れ

Webサイト閲覧の流れ

【図1：クライアント/サーバーのデータのやりとり】

①Webブラウザのアドレス欄に閲覧したいWebサイトのURLを入力

⇒URL = URI(データの所在・住所) + URN(データの名前)を入力し、Webサーバーから取得したいWebページの情報を指定する。

代表的なクライアント（Webブラウザ）はInternet Explorer、Safari、Chrome、Firefox

URLはサーバーに対して「何を送り返してほしいのか」を指定しているが、「誰からのリクエストなのか」といった情報は含まれていない。これはHTTPプロトコルの仕組みがステートレスであるため（こちらのRESTを参照）。よって、マイページなどを表示する場合にはユーザー認証「識別⇒認証⇒認可」の仕組みを利用する。

ここでセッション管理の仕組みも登場する。1回目のログイン時にサーバー側で発行したセッションID（ランダムな文字列）をブラウザに返し、Cookieにセットする。Cookieとはブラウザに小さなデータを保存しておける機能。CookieはサイトのURLごとに紐づけて管理される。そして、2回目に別のページにアクセスする時にCookieに保存されたセッションIDも一緒にリクエストとして送る。サーバーはクライアントから送られてきたセッションIDを認証することで、クライアントが既にログインしたユーザーであることを認識する。この仕組みがあるため、ログインした登録ユーザーが利用できるマイページ等のWebページを作成することができる。

※Udemy/フルスタックエンジニアが教える即戦力Railsエンジニア養成講座より、図を参照

②WebブラウザからWebサーバーに対してデータを要求

①で入力されたURLの情報をもとに、Webサーバーに対してデータを要求する。

このときに「HTTP（HyperText Transfer Protocol）」というWebコンテンツを送受信するためのプロトコル（機器同士の通信ルール）を使用して通信を行う。送受信以降で用いられるプロトコルが「TCP/IP」プロトコルである。

プロトコル一覧

TCPプロトコルにおけるコネクションとデータのやりとり

また、図1中の「ネットワーク」とは、複数のコンピュータを中継機（ハブ・ルーター（LANケーブル）・アクセスポイント（Wi-Fi）・基地局/アンテナ）でつないでデータを送受信できるようにするもの。このときに信号を伝えるものがケーブル（LANケーブル・光ファイバー）や電波（Wi-Fi・4G）。コンピュータ間での通信はネットワーク越しに行われる。
こちらのクックパッドの研修資料の図を複数めくって頂ければとてもイメージしやすいので、ご一読ください。

よく耳にするインターネットは、このネットワーク同士が相互接続した巨大なネットワークを指している。インターネット（ネットワーク）を使ってデータを送受信するためにはIPプロトコルを使う。

IPプロトコルでは、送受信するデータをパケットという単位のデータに分割して少しずつデータを送信する。そうすることで、1本のケーブルを複数のクライアントで共有することができる。このパケットに宛先と送信元の2つのIPアドレスを指定することで、指定のサーバーにデータを送信することができる。IPアドレスはグローバルIPアドレス（世界中で重複がおきないよう管理されている一意のアドレス）とプライベートIPアドレス（社内や家庭内等のネットワークで各自が管理。別のネットワークと重複しても問題ない）がある。

このIPアドレスは0から255の数字をドットでつなげたもの（例：198.51.100.7）で人間にとっては見にくい。なので、別で名前をつけている。これをドメイン名と呼ぶ（例：chopesu.com）。
逆にコンピュータからすると、ドメイン名は処理しにくく、実際はIPアドレスを利用してコンピュータ同士を接続する。このようにドメイン名からIPアドレスに変換することを名前解決と呼ぶ。名前解決はDNS（キャッシュ）サーバーによって行われ、この仕組みをDNS（Domain Name System）と言う。

参照元：http://manual.iij.jp/dns/help/1480649.html

このDNSサーバーとは別にクライアントからのリクエストに対して、レスポンスを返すデータの作成処理を行うサーバーがある。このサーバーにはサーバーマシン（ハードウェアで24時間365日動き続ける）とサーバーアプリケーション（プログラム）の2つがあるので、サーバーという言葉を使う際はどちらのサーバーを指してるのかを把握しておいた方が良い。

また、サーバーアプリケーションは下記のような4種類のサーバーが存在する。

①Webサーバー
・クライアントからリクエストを受けてWebページや画像等を返す。
・予め作成しておいたページ（静的ページ）や画像を送る。内容が頻繁に変化しないサイトであれば、Webサーバーにページや画像ファイルを置いて送り返せるように設計する。
⇒ソフトウェア例：NGINX（エンジンエックス）、Apache HTTP Server（アパッチ）

②アプリケーションサーバー
・Webアプリケーションを動かすためのサーバー。Railsアプリケーションはここで動いている。ここでは、リクエストに応じて内容が変化する動的ページを生成してレスポンスを返す。
⇒ソフトウェア例：Unicorn（ユニコーン）

③データベースサーバー
・データを保存したり、取り出したりする。
ソフトウェア例：MySQL、PostgreSQL、Redshift

④検索サーバー
⇒大量のデータの中から欲しいデータを探す。ここでいう検索は「全文検索」を指す。データベースは、行と列を持ったテーブルごとにデータを保存していることもあり、全文検索をしようと思ったらテーブル間をまたいだ検索をしなければならないため全文検索には不向き。このサーバーはDBに格納されているデータを引っ張ってきて専用のインデックスを立てている。そして、検索結果をデータベースに問い合わせて取り出している。Googleの検索エンジンもこの仕組みを利用して、キーボードから入力した値に合致した検索結果を検索サーバーから抽出することで、Webページの検索結果を表示している。
ソフトウェア例：Elasticsearch（エラスティックサーチ）・Solr（ソーラー）

クックパッドの資料にとても分かりやすい図があったので、以下引用します。

③Webブラウザからの要求内容を解析し、レスポンス用のデータを用意

WebサーバーはWebブラウザからの要求に応じて、データを用意するが、そのデータに2種類ある。

①静的ページ　⇒　何回アクセスしても毎回同じものが表示されるWebページ（企業サイトなど）
②動的ページ　⇒　TwitterやFacebookのようにアクセス毎に毎回異なるコンテンツが表示されるWebページ

CGI

WebサーバーがWebブラウザからの要求に応じてプログラムを起動させるための仕組みを「CGI」という。
動的ページを利用する時は、WebブラウザはCGIが用意された場所を指すURLにアクセスする。すると、サーバー内にあるプログラム（アプリケーションサーバー）が起動し、Webブラウザから送られてきたデータやサーバー自信が持っているデータをもとに、Webブラウザにレスポンスするための情報（HTMLファイル）を作り出し、ブラウザに送信する。
このサーバー内にあるプログラムをサーバーサイド・スクリプトと呼び、馴染みがある「Ruby」「Perl」「PHP」「Python」「Javascript」といった言語を使ってプログラムをコーディングする。