テックブログ
テックブログ
テックブログ
  1. ホーム /
  2. サーバーコースインターンカリキュラム /
  3. Webサーバーを動かしてみよう

Webサーバーを動かしてみよう

目次

Webサーバーとは

Webサーバーって何？

Webサーバーとは、以前解説したサーバーのうち、 私たちが普段使用している情報端末(コンピュータ、スマートフォンなど)上のWebブラウザ（Webクライアント）に対して、 Webページのデータをサービスする役割を持つコンピュータ（または、その機能を持ったソフトウェア）です。

今日、広く使われているWebサイトは、（大雑把な説明ですが）下記のような仕組みで実現されています。

  1. (ユーザー) Webブラウザ上でWebページを開く
  2. (Webブラウザ) ユーザに依頼されたWebページをサービスしているWebサーバを探索
  3. (Webブラウザ) 該当するWebサーバに対して、Webページのデータを要求
  4. (Webサーバー) Webブラウザから要求されたWebページのデータをWebサーバー内で探索
  5. (Webサーバー) Webブラウザへ見つかったデータを送り返す
  6. (Webブラウザ) Webサーバーから送り返されてきたデータを組み立ててユーザーに提示する

ここで、3.と5.における、WebサーバーとWebブラウザ間のやり取りは、HTTP (HyperText Transfer Protocol)という全世界共通なお約束に従って行われます。

また、5.で送り返されるデータも同様に、HTML (HyperText Markup Language)という全世界共通な言語で記述されています。

そのため、どんなメーカーのスマートフォンでも同じようにWebページを閲覧することができるのです。

Webアプリケーションって何？

ここで、ひとつの疑問にぶつかります。 Webサーバーとは、”Webブラウザから要求されたデータを探しだして送り返す”役割を持っていると説明しました。

しかし、西暦202x年を生きる私達が普段利用しているインターネットは、そんなに単純なものでしょうか。

ちょっと考えるだけで、私達が享受している21世紀のインターネットは、 もっと便利で複雑な機能を持っているということがわかります。

  • ECサイトで商品をカートに投入して購入をすると、商品が手元に配送されます
  • GmailのようなWebメールサービスを開くと、PCやスマホのメールアプリと同様にメールの送受信を行うことができます
  • わざわざWebサーバーにログインして黒い画面を弄らなくても、いまの気持ちをTwitterに投稿できます
  • …

これら21世紀の素敵なインターネットは、（例によって大雑把な説明ですが）下図のようなアーキテクチャで実装された Webアプリケーションによって実現しています。

前項のWebサーバーに加えて、下記の要素が増えました。

  • WebAPサーバー(Webアプリケーションサーバー)
  • DBサーバー(データベースサーバー)

これら２つのサーバーは連携して動作し、下記のような処理を行います。

  • Webサーバーを介してWebブラウザからのリクエストを受けとり、リクエストに応じた処理を実行する
    • ECサイトのお客さんの注文を受け付けて、DBに受注情報を格納
    • ユーザがWebメール画面でメールを送信ボタンを押したら、サーバー側でメール送信処理を実行
    • ユーザから投稿されたツイートをDBに格納
  • 処理結果をWebサーバーを返して、Webブラウザに送ってもらう
    • ユーザに購入完了画面を表示
    • メール送信完了通知を表示
    • ツイート完了したことを画面上に表示、タイムラインに投稿したツイートをのせる

このようなアーキテクチャを3層クライアントサーバシステムなどと呼んだりします。

Webサイト・Webサービスによっては、仕組みが多少異なっていたり、 もっと複雑怪奇な構成をとっていたりしていて一概示すことはできないのですが、 基本的にこのような３層構造をとっているケースは多いです。

LAMPって何？

Webアプリケーションサーバーを構築する際によく使用されるミドルウェア（「縁の下の力持ち」的なソフトウェア）として、 LAMP (Linux+Apache+MySQL+PHP/Perl/Python)というものがあります。

LAMPとは、下記のミドルウェアの頭文字をもじった単語です。

  • Webサーバーの基本ソフトウェア: Linux
  • Webサーバーアプリケーション: Apache HTTP Server
  • DBサーバー: MySQL
  • Webアプリケーションの処理系: PHP / Perl / Python

実は、このカリキュラムで今まで学んできた内容は”LAMP”の”L”(の基礎の基礎)だったのです。

LAMPスタックの上に実装されたWebアプリケーションとして、主に下記のようなものがあります。

  • ブログサイトを自由に作りたい => WordPress
  • ECサイトで商売したい => EC-CUBE
  • （所謂）ホームページを作りたい => Drupal

ApacheでWebサーバーを構築してみよう

「Apache HTTP Server」が正式名称ですが、サーバーを弄るときには「httpd」と記述されていることが多いです。 また、口語的に「アパッチ」、「Apache」とは、大抵「Apache HTTP Server」を指します。

LAMPのAです。

Apacheをインストールしよう

パッケージ管理ツール

Linuxの世界では、Apacheに限らない各種ミドルウェアは、パッケージという簡単にインストールできる形態で頒布されています。

このカリキュラムで使用しているAmazon Linuxでは、パッケージのインストールにyumというパッケージ管理ツールを使用します。

Yumを使用してパッケージをインストールするには、

# yum install (インストールしたいパッケージ)

というコマンドを実行します。

(注) yum installコマンドでは、サーバーのいろいろな場所を書き換えるので、実行にあたっては管理者権限が必要になります。

でも、その前にインストールするパッケージ名を調べなくてはなりません。 なので、下記のyum searchコマンドにより、 インストールしたいパッケージの名前をキーワード検索して調べます。

# yum search (キーワード)

というコマンドを実行すると、キーワードに合致するパッケージの情報がリストアップされます。

YumでApacheをインストールしよう

httpdパッケージをインストールして下さい。

パッケージ検索

# yum search apache http server

いろいろヒットしますが、httpd.x86_64 : Apache HTTP Serverをインストールしましょう

# yum install httpd

httpdの起動と動作確認

まずApacheを起動します

# systemctl start httpd

ブラウザを開いて http://{サーバーのPublicIP}/ にアクセスしてみましょう。

Test Page

というページが出ていれば大丈夫です。おめでとう。

このままだと、Webサーバーが再起動した際に、 またstartしなくてはならないので、サーバー起動時にApacheも自動起動するように設定しておきましょう。

# systemctl enable httpd

テストページを見せられても誰も得しないので、 自分で作ったページを表示できるようにしてみましょう。

# vim /var/www/html/index.html
--⇣vim内に入力--
Hello, World.
--↑vim内に入力--

index.htmlを保存した後に、もう一度先ほどのURLにアクセスしてみてください。 自分で作ったページの内容が表示されたら成功です。

DirectoryIndexって何？

先ほど、/var/www/html/index.htmlというファイルを作成したところ、 http://{サーバーのPublicIP}/でアクセスした際の表示内容が変わりました。

さらに、http://{サーバーのPublicIP}/index.htmlへアクセスした際の表示内容も同様に変わっているはずです。

ここで質問です。

http://{サーバーのPublicIP}/index.html というURLは、直感的には「PublicIPのアドレスのサーバー上にあるindex.htmlというファイル」 を表していると思われます。

なぜhttp://{サーバーのPublicIP}/というURL（ファイル名が省略されているURL）にアクセスした際にindex.htmlの内容が表示されたのでしょうか。

正解はDirectoryIndexという設定があるからです。

DirectoryIndexとは、「リクエストされたURLにおいてファイル名が省略されていた場合に、どのファイルを返すのか」 を指定する設定です。

特にそんなものを設定した記憶は無いかと存じますが、 Apacheが気を利かせてDirectoryIndex のデフォルト設定として、 /var/www/htmlにindex.htmlが存在した際はそいつを返すように設定してくれていたのでした。

# vim -R /etc/httpd/conf/httpd.conf
--⇣vim内 一部略--
...
159 #
160 # DirectoryIndex: sets the file that Apache will serve if a directory
161 # is requested.
162 #
163 <IfModule dir_module>
164     DirectoryIndex index.html
165 </IfModule>
...
--↑vim内 一部略--

DocumentRootって何？

「index.htmlについては分かったが、 そもそもなんで/var/www/html/みたいなよくわからないディレクトリに保存しなくてはならないんだ？」

という質問が聞こえてきそうなので説明します。

DocumentRootという設定がそう設定されているからです。

# vim -R /etc/httpd/conf/httpd.conf
--⇣vim内 一部略--
...
114 #
115 # DocumentRoot: The directory out of which you will serve your
116 # documents. By default, all requests are taken from this directory, but
117 # symbolic links and aliases may be used to point to other locations.
118 #
119 DocumentRoot "/var/www/html"
...
--↑vim内 一部略--

DocumentRootとは、どのディレクトリ以下をインターネット上に公開するか？という設定です。 特に/var/www/htmlである必要性は無いのですが、慣習的に/var/www/htmlであることが多いです。

これらは任意に変更でき、変更した場合にはApacheを再起動するなどconfigを読み直す必要があります。

課題

  • DirectoryIndexの設定にindex.htmを追加してみよう
    • 変更した設定を記入してください
  • DocumentRootの設定を/var/wwwに変更してみよう
    • 変更した設定を記入してください
    • /var/www/index.htmのような適当なファイルを作成してみよう

最終的に、http://{サーバーのPublicIP}/というURLにアクセスした時に、 /var/www/index.htmのファイルの内容が表示されたら成功です。

確認が終わったら、最後に、DocumentRootの設定を/var/www/htmlに戻しておいてください。

​

​

つくってみた！

社長が「寒い寒い」というので社長席の温度をRaspberry Piで監視してみた。社長が「寒い寒い」というので社長席の温度をRaspberry Piで監視してみた。
社内のトイレ難民解決！トイレ空き状況確認システムを作ってみた社内のトイレ難民解決！トイレ空き状況確認システムを作ってみた
Amazon Polly と Slack を使って Alexa へ (物理的に) 話しかけるシステムを作ってみたAmazon Polly と Slack を使って Alexa へ (物理的に) 話しかけるシステムを作ってみた

関連記事