ウェブサーバーとは

  1. ウェブの仕組み
    1. URL とは何か
    2. インターネットの仕組み
    3. ウェブサーバーとは
    4. ドメイン名とは
    5. ハイパーリンクとは
  2. ツールとセットアップ
    1. GitHub Pages の使い方
    2. Google App Engine を使ってウェブサイトを公開する方法
    3. ウェブサーバーにファイルをアップロードするには
    4. ウェブサイトが正しく動作することを確認するには
    5. ウェブサイトを作るのにどんなソフトウェアが必要か
    6. ウェブで何かするのにかかるコスト
    7. どんなテキストエディターが利用できるか
    8. ブラウザーの開発者ツールとは
    9. ローカルテストサーバーを用意するには
  3. デザインとアクセシビリティ
    1. アクセシビリティとは
    2. アクセシビリティを推進する HTML の機能
    3. ウェブサイトのデザインは何から始めればよいか
    4. すべての種類のユーザーのためにデザインするには
    5. 一般的なウェブレイアウトには何が含まれているのか
  4. よくある CSS の問題の解決
    1. CSS の一般的な質問
    2. CSS 生成コンテンツの使用
    3. アイテムを中央揃えするには
    4. テキストに影を追加するには
    5. ポインターを当てるとボタンの色を変えるには
    6. ボックスを半透明にするには
    7. 最初の段落を強調表示するには
    8. 段落の最初の行を強調するには
    9. 画像を歪ませずにボックスを埋めるには
    10. 装飾的なボックスの作成
    11. 要素に影を追加するには
    12. 見出しの直後に来た段落を強調表示するには
  5. よくある HTML の問題の解決
  6. よくある JavaScript の問題の解決

この記事では、ウェブサーバーとは何か、ウェブサーバーの仕組み、なぜウェブサーバーが重要なのかを説明します。

前提知識: すでにインターネットはどのように動くのかウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いについて知っておく必要があります。
目標: ウェブサーバーとは何かを学び、その仕組みに関して全般的な理解すること。

概要

「ウェブサーバー」はハードウェアまたはソフトウェア、あるいは両方が動作しているものを指します。

  1. ハードウェアの観点では、ウェブサーバーとは、ウェブサーバーソフトウェアとウェブサイトのコンポーネントファイル (例えば、 HTML 文書、画像、 CSS スタイルシート、 JavaScript ファイル) を格納しているコンピューターのことです。インターネットに接続され、ウェブに接続された他の端末と物理的なデータ交換に対応しています。
  2. ソフトウェアの観点では、ウェブサーバーとは、ホストにあるファイルに対する、ウェブユーザーのアクセスを制御する、いくつかの部品の集まりです。最小限の部品は HTTP サーバーです。HTTP サーバーは URL (ウェブアドレス)および HTTP (ブラウザーがウェブページを閲覧するためのプロトコル)を理解するソフトウェアのことです。格納しているウェブサイトのドメイン名(mozilla.org など)を通してアクセスすることができ、コンテンツをエンドユーザーの端末に配信します。

最も基本的な水準では、ブラウザーはウェブサーバーが保持しているファイルが必要になったらいつでも、 HTTP でファイルをリクエストします。リクエストが正しいウェブサーバー(ハードウェア)に届くと、HTTP サーバー(ソフトウェア)がリクエストを受け付け、リクエストされた文書を探し(ない場合は 404 レスポンスが返される)、ブラウザーに HTTP を通して送り返します。

HTTP を通したクライアント/サーバー接続の基本的な説明

ウェブサイトを公開するには、静的または動的ウェブサーバーが必要です。

静的ウェブサーバーは、スタックとも呼ばれ、コンピューター(ハードウェア)と HTTP サーバー(ソフトウェア)から構成されます。サーバーが保持しているファイルをブラウザーへ「そのまま」送るので、「静的」と呼ばれます。

動的ウェブサーバーは、静的ウェブサーバーと追加のソフトウェアからなります。追加ソフトウエアは、一般的にはアプリケーションサーバーデータベースからなります。アプリケーションサーバーが、 保持しているファイルを変更してから、HTTP サーバーを通してブラウザーに送信するので「動的」と呼ばれます。

例えば、ブラウザーで見ることができる最終的なウェブページを生成するために、アプリケーションサーバーはデータベースからのコンテンツで HTML のテンプレートを埋めることがあります。 MDN やウィキペディアのようなサイトは非常に多くのウェブページを持っていますが、実際の HTML 文書が存在するわけではなく、巨大なデータベースとわずかな HTML テンプレートのみが存在しているのです。この構成をとることで、より速く、より簡単にコンテンツを保守したり配信したりすることができます。

より深く掘り下げる

すでに述べたとおり、ウェブページを呼び出すために、ブラウザーはウェブサーバーにリクエストを送信し、ウェブサーバーは自身のストレージスペースからリクエストされたファイルを探し始めます。ファイルを見つけると、サーバーはファイルを読み込み、必要に応じて処理を行い、ブラウザーに送信します。それらのプロセスを詳細に見てみましょう。

ファイルのホスティング

ウェブサーバーは最初に、ウェブサイトの HTML 文書およびその関連資産である画像、 CSS スタイルシート、 JavaScript ファイル、フォント、動画などのファイルを格納する必要があります。

技術的には、これらのすべてのファイルを自分のコンピューターでホスティングすることができますが、以下のような理由で専用のウェブサーバーにすべてを格納したほうがはるかに便利です。

  • 専用ウェブサーバーは、一般的に可用性(起動および実行していること)が高いです。
  • ダウンタイムやシステムトラブルを除けば、専用ウェブサーバーは常にインターネットに接続されています。
  • 専用ウェブサーバーは、いつでも IP アドレスが同じです。これは専用 IP アドレスと呼ばれています。(すべてのプロバイダーが家庭用の回線に固定 IP アドレスを提供しているとは限りません。)
  • 専用ウェブサーバーは、通常、サードパーティによって管理されています。

これらすべての理由から、良いホスティングのプロバイダーを探すことは、ウェブサイトを構築する上で重要な部分です。様々なサービス会社が提供するものを探し、ニーズや予算に合う一つを選択しましょう(無料のものから月当たり数千ドルまでのサービスがあります)。詳しくはこの記事にあります。

ウェブのホスティングサービスを契約したら、後はウェブサーバーにファイルをアップロードするだけです。

HTTP による通信

次に、ウェブサーバーは HTTP (Hypertext Transfer Protocol) への対応を提供しています。名前にある通り、 HTTP はコンピューター間でハイパーテキスト(リンクされたウェブ文書)を転送する方法を定義しています。

プロトコルは 2 台のコンピューター間で通信する規則を設定します。 HTTP はテキストによる、ステートレス(下記参照)のプロトコルです。

テキストによる

すべてのコマンドがプレーンテキストで、人間が読める形です。

ステートレス

サーバーもクライアントも以前の通信を覚えていません。例えば、 HTTP 単独では、サーバーは入力したパスワードや、処理中のどのステップにいるかを覚えていることはできません。このような仕事をするには、アプリケーションサーバーが必要になります。 (以降の記事で様々な技術を説明します。)

HTTP はクライアントとサーバーがどのように通信するかについての明確なルールを提供しています。 HTTP 自体については、後で技術記事で説明します。これからは、以下のようなことに気を付けてください。

  • 通常、クライアントだけが HTTP リクエストを、サーバーに対してのみ行います。サーバーはクライアントの HTTP リクエストに応答します。サーバーは、サーバープッシュと呼ばれるメカニズムによって、リクエストされる前にデータをクライアントのキャッシュに入れることもできます。
  • HTTP でファイルをリクエストするとき、クライアントはファイルの URL を示さなければなりません。
  • ウェブサーバーはすべての HTTP リクエストに応える必要があります。処理できない場合でも、エラーメッセージを返す必要があります。

ウェブサーバーでは、 HTTP サーバーが受信したリクエストを処理し、応答する役割を担っています。

  1. リクエストを受信すると、 HTTP サーバーは最初にリクエストされた URL が既存のファイルに一致するかどうかをチェックします。
  2. もしあれば、ウェブサーバーはブラウザーにファイルを送り返します。なければ、アプリケーションサーバーが必要なファイルを作成します。
  3. どちらの処理もできない場合、ウェブサーバーは 404 Not Found としてよく知られているエラーメッセージをブラウザーに返します。 404 エラーはよく起こるので、多くのウェブデザイナーが 404 エラーページのデザインに時間を割いています。 MDN 404ページはこのようなエラーページの例です

動的コンテンツと静的コンテンツ

大まかに言って、サーバーは静的コンテンツと動的コンテンツのどちらかを提供することができます。「静的」は「そのまま提供する」という意味です。静的なウェブサイトは構築するのが最も簡単なので、最初に静的サイトを作成することをお勧めします。

「動的」はサーバーがコンテンツを処理したり、データベースからその場で作成したりすることを意味します。この方法は、柔軟なページを提供できる反面、技術的難易度が高く、ウェブサイトの構築が複雑になります。

すべての想定される用途に適切な解決策となる、単一の既製アプリケーションサーバーを提案することは不可能です。アプリケーションサーバーの中には、ブログ、Wiki、e コマースソリューションをホストし管理するように設計されているものもあれば、より汎用的なものもあります。動的なウェブサイトを構築するのであれば、時間をかけて要件を調査し、ニーズに最も適した技術を見つけましょう。

ほとんどのウェブサイト開発者は、ゼロからアプリケーションサーバーを作成する必要はないでしょう。既製のソリューションがたくさんあり、その多くは高度に設定可能だからです。 しかし、独自のサーバーを作成する必要がある場合、おそらくサーバーフレームワークを使用し、既存のコードとライブラリーを活用し、用途に合うように必要な部分だけを拡張することを望むでしょう。 完全にゼロからサーバーを開発する必要があるのは、比較的少数の開発者だけです。例えば、組み込みシステムでリソースの厳しい制約を満たすためなどです。 サーバーの構築を試してみたい場合は、サーバーサイドウェブサイトプログラミングの学習パスのリソースに目を通してください。

次のステップ

ウェブサーバーのことがよく分かったら、次のステップに進みましょう。