Open Campus (Web Server)
オープンキャンパス「ウェブサーバ制作」

ようこそ,通信ネットワーク工学科へ

通信ネットワーク工学科の授業に興味をもっていただき,ありがとうございます. 通信ネットワーク工学科は実習を中心とする 実践的なカリキュラムを特色としています. 今回はそのなかから 各種ネッワークサービスの設置,稼働,管理に関する実習 のを体験していただきます.

ウェブページ関連の技術として,ブログなどの普及で誰でも簡単に ウェブサイトが開設できるようになりました.この中でも ご自身でウェブページを作成された方も少なくないのではないでしょうか.

しかし,ウェブサーバを利用する側ではなく, ウェブサービスを行うための機材,ソフトウェア,ネットワーク環境を用意し, ウェブサーバを設営した経験のある方はそう多くないと思います.

今回はウェブサーバを設置,稼働させる体験授業を行います.

ウェブブラウザの起動

机の上にある PC では Ubuntu Linux と呼ばれるオペレーティングシステムが動作しています. まずウェブブラウザでこのページを表示させます.Firefox ウェブブラウザを 画面上部にある図 1 のアイコンをシングルクリックして起動します.

firefox

図 1 ウェブブラウザのアイコンのアドレス部分(図 2 の赤枠)

addressbar

図 2 アドレス入力欄

に 以下を入力してください.

http://www.yamamotolab.jt.u-tokai.ac.jp/~hiroshi/

「広報活動」→「Web サーバ制作」の順にたどるとこのページが表示されます.

ウェブサーバのインストール

「システム」メニューから「システム管理」→「Synapticパッケージマネージャ」 を選択し,起動してください.「簡単な紹介」ウィンドウが表示された場合は 「閉じる」ボタンで閉じてください.

「クイック検索」で apache を検索し,表示された apache2 の上で右クリックし,「インストール指定」 を選択します.最後に適用ボタンを押して下さい.

「概要」ウィンドウが表示されるので「適用」ボタンを押して下さい.

これだけでウェブサーバのインストールと稼働は完了です. 「変更が適用されました」ウィンドウが表示されるので「閉じる」ボタンを押し, Synaptic の「ファイル」メニューから「終了」を選び,Synaptic を終了 させてください.

自分の IP アドレスの確認

画面上部の「システム」メニューから「システム管理」→「ネットワークツール」 を選択し,起動してください.「ネットワークデバイス」の項目から 「イーサネットインターフェース(eth0)」を選択してください.

「IP 情報」欄内の IPv4 の行の IP-アドレス項目を確認してください. 192.168.89. で始まる数値があなたの PC の IP アドレスです.

コンテンツの作成

上で調べた IP アドレスが 192.168.89.XXX であればウェブブラウザのアドレス欄に

http://192.168.89.XXX

と入力してくださいウェブサーバのテスト用ページが表示されるはずです.

上記はウェブサーバのトップページのアドレスです.次に各ユーザの ページを作成します.このためにはキャラクタ端末からコマンドを入力する 必要があります.

「アプリケーション」→「アクセサリ」→「端末」と選択 してターミナルを起動します. 起動したターミナルに以下のコマンドを入力してください.

ubuntu@ubuntu:~$ sudo a2enmod userdir

次にウェブサーバを再起動するために,ターミナルに以下のコマンド を入力してください.

ubuntu@ubuntu:~$ sudo service apache2 restart

これで個人のディレクトリでウェブページを作成,公開することができるように なりました.個人(この環境では ubuntu というユーザ名)の ウェブ用のディレクトリを作成するために以下のコマンドを入力して下さい.

ubuntu@ubuntu:~$ mkdir public_html

完成したら そのディレクトリに移動し,gedit コマンドを起動します.

ubuntu@ubuntu:~$ cd public_html
ubuntu@ubuntu:~$ gedit index.html&

以下の個人用ページ雛形をコピーアンドペースとで gedit に張りつけ,gedit の 保存ボタンを押せ.

ひな型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>
      文書の表題をここに書いてください.
    </title>
  </head>
  <body>
    <h1>
      文書の主見出しをここに書いてください.
    </h1>
    <p>
      自己紹介など,本文を自由に書いてください.
    </p>
    <hr>
    <address>
      XXXX年XX月XX日, XXXX作成
    </address>
  </body>
</html>

以下のアドレスをアクセス欄に入力し,上記個人要文書にアクセスしてみてください.

http://192.168.89.XXX/~ubuntu/

個人用ファイルを自由に書き換えて下さい.今回の環境では 実験室内でしか見る事がでませんので安心して書いて下さい.

「自己紹介など…」のが書かれている部分に(<p> から</p> の間に) 以下の内容を貼付けると google 検索窓をつけることもできます.

<form method=get action="http://www.google.co.jp/search">
<div class="google">
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_40wht.gif" 
alt="Google" class="google"></a>
<input type=text name=q size=31 maxlength=255 value="">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google 検索">
</div>
</form>

上の例は以下のように表示され,自分のページに google 検索窓をつけることがでます.

Google

アドレスの

http://192.168.89.XXX~ubuntu/

アドレスのXXXの部分を周囲の PC の IP アドレス に変化させると周囲の PC で作成しているページを見る事ができます.


Updated in June 18, 2010, Yamamoto Hirosh