OthloBlog - オスロブログ -

名古屋のIT系学生コミュニティOthloTechのブログです。

ウェブサーバーとHTTP

f:id:haseaki0503:20180726105029j:plain

この記事では、普段ネットブラウジングしているときにあまり意識することのない、ウェブサーバーとウェブブラウザとの通信についてお話しようと思います。
「ウェブについて学ぼうと思っている方」や、「ウェブサイトを作ってみようと思っている方」に読んでいただきたいと思います。

ウェブサーバーとは

ウェブサーバーとは、Wikipediaによると以下のようなものです。

Webサーバー(ウェブサーバー、英:Web server)は、HTTPに則り、クライアントソフトウェアのウェブブラウザに対して、HTMLやオブジェクト(画像など)の表示を提供するサービスプログラム及び、そのサービスが動作するサーバーコンピュータを指す。 広義には、クライアントソフトウェアとHTTPによる通信を行うプログラム及びコンピュータ。
出典: Wikipedia

これを簡単にまとめると、 ウェブサーバーとは、ウェブブラウザの要求に応じて何かしらのデータを返すもの です。 (この記事では、クライアントソフトウェアは「ウェブブラウザ」として説明します)

HTTP

先ほど、ウェブサーバーとは「ウェブブラウザの要求に応じて何かしらのデータを返すもの」とお話しました。
では、どのようにウェブブラウザ(以下、ブラウザ)がウェブサーバー(以下、サーバー)に要求を送り、サーバーがブラウザにデータを返すのでしょうか。

ブラウザとサーバーとが正しく通信できるようにするために、どのように通信するのかという「決まりごと」あります。この決まりごとを「 プロコトル 」と呼びます。このプロコトルにはいろいろなものがありますが、ブラウザとサーバーが通信するときには、HTTPという通信プロトコルがよく使われています。また、HTTP通信を安全に行うために「HTTPSプロトコル」というものがあり、近年ではHTTPSを使うことが望ましいとされています。

この記事では、HTTP通信でのブラウザとサーバーのやり取りを見ていくことにします。

HTTP通信では、まず TCPプロトコル によってブラウザとサーバーの通信を接続します。接続ができると、ブラウザはファイルの取得要求(GET)をサーバーへ送信します。そしてサーバーはその取得要求に応じてデータ返します。

このように要求を送りそれに対して返答するという、対話形式で通信が進んでいきます。

ウェブブラウザによるサーバーへの要求

それでは、ブラウザがどのように要求をサーバーへ送っているのか見ていきたいと思います。

ウェブサイトを閲覧するとき、ブラウザは、ウェブページの取得要求をサーバーへ送信します。
すると、多くの場合は最初にHTMLファイルがサーバーから返され、そのHTMLファイルをもとにウェブページを表示(レンダリング)します。ウェブページをレンダリングするためにはHTMLだけではなくて、CSSやJavaScript、画像やフォントなどのデータが必要な場合があります。その場合には、そのデータについても同じようにサーバーへ取得要求を送信します。

下のGIF画像では、ChromeでOthloTechの公式ウェブサイトのトップページ http://othlo.tech/ にアクセスしたときのブラウザの要求を示しています。
画像中の下のあたりで文字がたくさん羅列されていきますが、これはサーバーに取得要求したファイル名です。 f:id:haseaki0503:20180721112106g:plain

メソッドとパス

ブラウザが送ることのできるサーバーへの要求(リクエスト)は、取得要求(GET)だけではありません。
GETの他に、ブラウザからサーバーへデータを送信する「POST」、データの削除を要求する「DELETE」などがあります。これを メソッド(Method) と呼びます。

パス(Path) とは、要求するデータの場所を示しています。
下記のURLの場合には、/event/95799/がパスです。下記のURLにGETメソッドで要求を送る場合には、othlotech.connpass.com というサーバーに対して、 /event/95799/ にあるデータの取得を要求しています。

https://othlotech.connpass.com/event/95799/

ウェブサーバーへの要求の例

以下に、ウェブサーバーへの要求の例を示します。 f:id:haseaki0503:20180721233130p:plain 出典: https://developer.mozilla.org/ja/docs/Web/HTTP/Overview#Requests

ウェブサーバーが返すデータ

前述しているように、サーバーはブラウザからのリクエスト(要求)を受け取ると、要求されたデータを返します。そのデータには、「 静的なもの 」と「 動的なもの 」の2種類があります。
「動的なデータ」とは、リクエストしたユーザーやシステムなどの「状況に応じて変更する必要のあるデータ」のことです。「静的なデータ」は、その逆で状況に応じて変更する必要のないデータのことです。
サーバーは、静的なデータのリクエストを受け取った場合にはサーバーに保存されている要求されたデータをそのまま返します。一方で、もし動的データのリクエストを受け取り、処理が必要な場合にはモジュールを通してプログラムを実行したりして、そのプログラムなどから得られたデータを返します。

HTTPステータスコード

サーバーにデータが存在しない場合には何を返すのでしょうか。
ブラウザへ応答を返すときにサーバーは、 HTTPステータスコード というコードを送信します。
もしサーバーが応答に成功するときには、「200 OK」というステータスコードを返します。そして、もし返答するデータ(リソース)がないときには「404 Not Found」というステータスコードを返します。「404 Not Found」は、よく表示されることがあるので何度も見たことがあるのではないでしょうか。他にも、サーバーが要求を処理する準備ができていないことを示す「503 Service Unavailable」などがあります。

このように、HTTPステータスコードは3ケタで表されていて 、上1ケタを見ることで何のエラーなのかを把握することができます。先ほど例に挙げた、「4から始まるコード」はクライアントエラー、つまり要求する側のエラーです。そのリソースにアクセスする権限がなかったり、送信したリクエストが正しい形式でなかった場合など ブラウザ側に原因がある場合 に表示されます。
また、「5から始まるコード」はサーバー側のエラーです。サーバー上のプログラムや設定のミスなど、 サーバー側に原因がある場合 に表示されます。
ブラウザからは見ることは無いと思いますが、「1からはじまるコード」はサーバーからブラウザに対する情報、「3から始まるコード」はリダイレクト(転送)を意味しています。

ウェブサーバーの応答の例

以下に、ウェブサーバーの応答の例を示します。
プロトコルのバージョン、ステータスコード、ステータスメッセージのあとに、様々な情報が書かれているヘッダーが続きます。画像中にはありませんが、ヘッダーの後ろにサーバーが返すデータが続きます。 f:id:haseaki0503:20180721233250p:plain 出典: https://developer.mozilla.org/ja/docs/Web/HTTP/Overview#Requests

おわりに

以上、この記事ではウェブサーバーとウェブブラウザとの通信の概要についてお話しました。
HTTPは、通信の内容を人間が見てもわかるような設計になっています。サーバーとブラウザ(クライアント)が対話するように通信をしていて、とても面白いです。Chromeの開発者ツールのネットワークのタブでヘッダを見ることができるので、見てみてはいかがでしょうか。