Webサーバーとは｜ブラウザへWebページの材料を返す係

マコト

クラウドの中に、Webページ受付って書かれたカウンターがあるね

イト

Webサーバーって、サーバーの中でも何をする係なの？

ピコ

ブラウザからのお願いに対して、Webページの材料を返す係として見るとわかりやすいよ

Webサーバーとは、ブラウザからのリクエストに対して、HTML、画像、CSS、JavaScriptなどWebページの材料を返すサーバーです。

利用者がURLを開くと、ブラウザは「このページをください」とリクエストを送ります。Webサーバーはそれを受け取り、必要なHTMLやファイルをレスポンスとして返します。その材料をブラウザが読み、画面を組み立てます。

第62話「Webサーバーは雲の中で何を返す？」では、クラウド倉庫の奥にあるWebページ受付を見ます。第13話で見たWebサーバーの基本を、クラウドやデータセンターの流れにつなげて捉え直します。

Webサーバーを先にいうと

Webサーバーは、Webページを見るための材料をブラウザへ返す係です。

ラボのたとえでは、Webサーバーは受付と棚を持つ部屋です。ブラウザから封筒が届くと、HTMLの棚、画像の棚、CSSの棚、JavaScriptの棚を探し、必要な材料を返します。

実際には、HTTPリクエストを受け取り、HTTPレスポンスを返すサーバー用ソフトウェアや仕組みが関わります。Webサーバーという言葉は、物理的な機械を指す場合も、NginxやApacheのようなソフトウェアを指す場合も、役割全体を指す場合もあります。

Webサーバーが使われる場面とブラウザからのリクエスト

Webページを開くとき、最初に動くのはブラウザです。

ブラウザはURLをもとに宛先を探し、「このページをください」というリクエストを送ります。Webサーバーはそのお願いを受け取り、返せる内容を探します。返事には、本文だけでなく、状態や種類を示す情報が含まれることがあります。

流れを短くすると、次のようになります。

1. 利用者がURLを開く
2. ブラウザが宛先へリクエストを送る
3. WebサーバーがHTMLなどを返す
4. ブラウザがHTMLを読み、必要な材料を追加で取りに行く
5. ブラウザが画面を組み立てる

画面のむこう側では、DNS、HTTP、Webサーバー、ブラウザの描画がつながっています。Webサーバーは、その中で「返す係」として見ると位置がつかみやすくなります。

Webサーバーが返す材料

Webサーバーが返すものは、HTMLだけではありません。

最初にHTMLが返ると、ブラウザはその中に書かれたCSS、画像、JavaScript、フォントなどの場所を見つけます。そして、それらの材料を追加でリクエストします。

第7話のブラウザ工房が画面を組み立てるためには、どこかから材料が返ってくる必要があります。その材料を返す係の一つがWebサーバーです。ブラウザ側で材料がどう画面になるかは、Webページ表示の仕組み へ進むとつながります。

ユイ

ブラウザは一度だけではなく、必要な材料を何度も取りに行くんですね

イト

だから画像だけ出ないとか、CSSだけ効かないこともあるんだ

静的ファイルと動的な返事

Webサーバーは、置いてあるファイルをそのまま返すことがあります。

たとえば、画像ファイル、CSSファイル、JavaScriptファイルのように、あらかじめ用意されたファイルを返す場合です。こうしたものは静的ファイルと呼ばれることがあります。

一方で、返事が毎回同じとは限らない場面もあります。ログイン中の利用者に合わせて内容を変える、検索条件に合わせて一覧を作る、管理画面で保存された内容を取り出してHTMLを作る。こうした場合は、Webサーバーだけで完結せず、アプリケーションサーバー、API、データベースなど別の仕組みと連携することがあります。

Webサーバーは「ファイルを置く箱」だけではなく、リクエストを受け取り、必要な返事へつなぐ入口として見ると理解しやすくなります。

HTTPステータスとエラー

Webサーバーの返事には、状態を示す番号が含まれることがあります。

うまくいったときは成功を示す状態、頼まれたファイルが見つからないときは404、サーバー側で失敗したときは500番台のエラーを見かけることがあります。

状態の例を簡単に分けると、次のようになります。

• 200番台: ページやファイルを返せた
• 300番台: 別のURLへ案内する
• 400番台: URL違い、権限不足、見つからないなど利用者側に近い手がかり
• 500番台: 返事を作る途中でサーバー側に問題が起きた手がかり

404を見たとき、「インターネット全体が壊れた」と考える必要はありません。URLが間違っている、ファイルが移動した、削除された、公開設定が違うなど、Webサーバーが探した結果として返している手がかりかもしれません。

他のサーバーとの違い

「サーバー」は広い言葉です。Webサーバーは、その中でもWebページやWeb用のファイルを返す役割に注目した言葉です。

実際のサービスでは、これらの役割が一台にまとまっている場合もあれば、複数の仕組みに分かれている場合もあります。大切なのは、どの名前が出てきたときも「何を受け取り、何を返す役割か」を見ることです。

表示が遅い・404のときの確認場所

Webページが遅いときや404が出たとき、確認場所を分けると落ち着きます。

1. URLが正しいか確認する
2. DNSで宛先を見つけられているか考える
3. Webサーバーから返事が来ているか見る
4. 返事の状態が成功、移動、404、500番台のどれに近いか見る
5. HTMLは返っているが、画像やCSSだけ失敗していないか見る
6. CDNやキャッシュが古い内容を返していないか考える

サイト運用者なら、公開したはずの画像が出ない、CSSが反映されない、ページだけ404になる、といった場面でWebサーバーの返事を見ることがあります。ブラウザの開発者ツールのNetworkを見ると、どのファイルが成功し、どのファイルが失敗しているかを確認できます。

図で見て自分の言葉で説明する

Webサーバーの役割は、ブラウザからのお願いを受け、Webページの材料や状態を返すことです。流れで見ると次のようになります。

1. 利用者がURLを開く
2. ブラウザがHTTPリクエストを送る
3. Webサーバーがお願いを受け取る
4. HTMLや画像などの材料を探す
5. 必要ならアプリやAPIとも連携する
6. HTTPレスポンスとして返す
7. ブラウザが材料を読んで画面を組み立てる

この流れを見ると、Webサーバーは「ページそのものの完成画面」を返すだけではなく、ブラウザが画面を作るための材料や状態を返す係だとわかります。

続けて、普段のページで「返ってきた材料」を探してみます。

1. ブラウザでページを開く
2. 最初にHTMLが返ってくると考える
3. ページ内の画像、CSS、JavaScriptも別の材料として見る
4. 画像だけ表示されない場合、画像ファイルのリクエストを疑う
5. 404が出た場合、URL、ファイルの場所、公開状態を分ける

Webサーバーとは、ブラウザからの＿＿＿＿＿＿＿＿＿＿＿＿に対して、HTMLや画像などの＿＿＿＿＿＿＿＿＿＿＿＿を返す係です。
404は、頼まれたページやファイルが＿＿＿＿＿＿＿＿＿＿＿＿ときの手がかりです。
WebサーバーとAPIサーバーは、＿＿＿＿＿＿＿＿＿＿＿＿を見ると分けやすくなります。

答えの例:

• Webサーバーとは、ブラウザからのリクエストに対して、HTMLや画像などのWebページの材料を返す係です。
• 404は、頼まれたページやファイルが見つからないときの手がかりです。
• WebサーバーとAPIサーバーは、何を受け取り、何を返す役割かを見ると分けやすくなります。

ミニクイズと次のサーバールート

Q1. Webサーバーを一文でいうと？

Webサーバーは、ブラウザからのリクエストに対してHTMLや画像などWebページの材料を返すサーバーです。

Q2. WebサーバーはHTMLだけを返しますか？

いいえ。CSS、JavaScript、画像、フォントなど、Webページに必要なファイルを返すことがあります。

Q3. 404は何の手がかりですか？

頼まれたページやファイルが見つからない、移動した、公開されていないなどを確認する手がかりです。

ブラウザとサーバーの関係に戻るなら、クライアントとサーバー がつながります。通信の約束を見たい場合は、HTTPとは でリクエストとレスポンスを整理できます。

次に進むなら、Webページではなくデータを返す入口として APIとは を読むと、Webサーバーとの違いが見えます。画像やCSSを近くから届ける流れへ進むなら、CDNとは も役に立ちます。