Web ページの仕組み【3. Web ページの公開】

  1. 事前準備
  2. 最低限 HTML
  3. Web ページの公開
  4. 本日の課題

--- 以降付録 ---

  1. 特殊文字
  2. スタイルシート
  3. X転送

※2020 年度は 1 章 - 3 章 まで一通り行います. 節の冒頭, もしくはコマンドの実行を指示する箇所には赤字で「※2020 年度 : 」から始まる注釈をつけているので, よく確認し, 実行可能なコマンドは joho18 にて行ってください.
例年はこの資料に沿って情報実験機を使った実習をしています.

[3.0] Web ページの公開

ここでは,Web ページを実際に作成します. Web ページの公開に際し以下のことに注意してください.

[3.1] ファイルの置き方

※2020 年度 : [3.1] では, joho18 上で行う操作はありませんが, 一部手元の計算機で行う作業があります.
資料に目を通し, 注釈の付いた作業箇所は各自の計算機で実行してください.

前のページでは,HTML を書くための最低限の解説をしました. しかし,それだけではウェブブラウザからそのHTML ファイルを公開・閲覧することはできません. 適切な場所に置くことでWeb ページを公開・閲覧することが可能となります.

[3.1.1] public_html ディレクトリ

Web サーバ構築のためのソフトウェア「Apache 」の設定ファイルの一つである「userdir.conf」を見てみましょう.

$ less /etc/apache2/mods-available/userdir.conf
<IfModule mod_userdir.c>
        UserDir public_html
        UserDir disabled root

        <Directory /home/*/public_html>
                AllowOverride FileInfo AuthConfig Limit Indexes
                Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
                Require method GET POST OPTIONS
        </Directory>
</IfModule>

ここに,「UserDir public_html」と記述されています. この行は,public_html ディレクトリ以下に置いたHTML ファイルは 公開します,ということを意味します. つまりpublic_html が公開用ディレクトリです. この設定ファイル中のuserdir モジュールを有効にするため には以下のコマンドを実行します.

# a2enmod userdir
Enabling module userdir.
To activate the new configuration, you need to run:
  service apache2 restart

もし,このモジュールを無効にしたい場合は,

# a2dismod userdir

を実行します(これ以降の作業を行う際にはモジュールを有効にしてください). 最後に, 設定をApache に反映させるためにApache を再起動します.

# systemctl restart apache2.service

モジュールを有効にしたら次は実際にpublic_html を作成して ページを公開してみましょう. まず皆さんのホームディレクトリにpublic_html を作成します.

$ cd ~
$ mkdir public_html
$ ls -l 

drwxr-xr-x  7 hogehoge hogehoge      4096  6月 25 16:40 public_html

もし,other に読み込み権限が無ければ,以下のように権限を与えましょう.

$ chmod o+r public_html

これで公開用ディレクトリの準備は完了です.このディレクトリの中に 公開したいファイルを置き,Web ブラウザのアドレスバーに適切なURL を入力することで, そのファイルにアクセスします.例えば,sample.html をpublic_html 以下に置き, それをWeb ブラウザからアクセスする場合を考えます. public_html ディレクトリ以下に「sample.html 」を作成し,中身を編集します.

$ cd ~/public_html 
$ vi sample.html

以下のように入力します.

<!DOCTYPE html>

<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <title> sample </title>
 </head>

 <body>
  <h1>
    This is sample page!!
  </h1>
 </body>
</html>

ファイルの作成が終了したら,ブラウザ上からアクセスしてみましょう. アドレスバーに「http://192.168.16.1XX/~hoge/sample.html (XX は情報実験機番号,hoge はアカウント名) 」を入力します. ここでパスの指定の際に「public_html 」は書かない(省略されている)ことに注意しましょう. 無事に「This is sample page!! 」と表示されれば成功です. 時間があれば他の情報実験機のディレクトリにもアクセスしてみてください (上記のXX の番号を変えてみる).


※2020 年度 : 各自の計算機のブラウザから以下の URL にアクセスしてください. (閲覧には elms で公開されているレクチャー動画視聴用のユーザー名とパスワードが必要です)
http://joho18.ep.sci.hokudai.ac.jp/~inex2020/sample.html
samplepage

[3.2] index.html

※2020 年度 : [3.2] では, joho18 上で行う操作はありませんが, 一部手元の計算機で行う作業があります.
資料に目を通し, 注釈の付いた作業箇所は各自の計算機で実行してください.

先ほどは公開用ディレクトリの作成とページの閲覧を行いました. 次はpublic_html ディレクトリ以下に「index.html 」というファイルを作成します.

$ cd ~/public_html 
$ vi index.html

以下のように入力します.

<!DOCTYPE html>

<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <title> index </title>
 </head>

 <body>
  <h1>
    This is index page!!
  </h1>
 </body>
</html>

ここで,ブラウザのアドレスバーに「http://192.168.16.1XX/~hoge/ (XX は情報実験機番号,hoge はアカウント名) 」を入力するとどうなるでしょうか? index.html の中身が表示されたはずです. このように,public_html 以下のファイルにアクセスする際に,ファイルの指定をしないと, 表示されるファイルは「index.html 」となります. この設定は「dir.conf 」に記述されています. このモジュールはデフォルトで有効になっています.


※2020 年度 : 各自の計算機のブラウザから以下の URL にアクセスしてください. (閲覧には elms で公開されているレクチャー動画視聴用のユーザー名とパスワードが必要です)
http://joho18.ep.sci.hokudai.ac.jp/~inex2020/
$ less /etc/apache2/mods-available/dir.conf

<IfModule mod_dir.c>

    DirectoryIndex index.html index.cgi index.pl index.php index.xhtml index.htm

</IfModule>

[3.3] ページへのアクセス制限をかける

※2020 年度 : [3.3] では joho18 上で行う操作はありませんが, 資料には目を通してください.

これまでは誰にでも見られてよいページの公開方法の解説をしてきましたが, 特定の人にだけ公開したいページもあるはずです. ここではそんなときどうしたいかを解説します.

[3.3.1] .htaccess

アクセス制限をかけたいディレクトリにこのファイルを置きます. この名前は「apache2.conf 」というファイルの中で設定されています.

$ less /etc/apache2/apache2.conf

# This is the main Apache server configuration file.  It contains the
# configuration directives that give the server its instructions.
# See http://httpd.apache.org/docs/2.4/ for detailed information about
# the directives and /usr/share/doc/apache2/README.Debian about Debian specific
# hints.
#
#
# Summary of how the Apache 2 configuration works in Debian:
# The Apache 2 web server configuration in Debian is quite different to
# upstream's suggested way to configure the web server. This is because Debian's
# default Apache2 installation attempts to make adding and removing modules,
# virtual hosts, and extra configuration directives as flexible as possible, in
# order to make automating the changes and administering the server as easy as
# possible.

# It is split into several files forming the configuration hierarchy outlined
# below, all located in the /etc/apache2/ directory:

…
(略)
…

#
# AccessFileName: The name of the file to look for in each directory
# for additional configuration directives.  See also the AllowOverride
# directive.
#

AccessFileName .htaccess

#
# The following lines prevent .htaccess and .htpasswd files from being
# viewed by Web clients.
#

<FilesMatch "^\.ht">
    Require all denied
</FilesMatch>
…
(略)
…


最後に, 設定をApache に反映させるためにApache を再起動します.

# systemctl restart apache2.service

[3.3.2] アクセス制限のかけ方

アクセス制限をするディレクトリ「secret 」 を作成し,その中に閲覧されたくないファイル「secret.html 」 を格納します.

$ mkdir ~/public_html/secret
$ vi ~/public_html/secret/secret.html

<!DOCTYPE html>

<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <title> sercret </title>
 </head>

 <body>
  <h1>
    私の趣味は XX です.
  </h1>
 </body>
</html>


まずはアクセス可能とするユーザ名とパスワードを管理するファイル(passwdfile)を作成します. 以下は,登録ユーザ名がhero の場合です.hero は自分のアカウント名でなくてもかまいません.

$ htpasswd -c /home/hoge/passwdfile hero

Adding password for hero.

New password:[パスワードを入力]

Re-type new password:[もう一度パスワードを入力]

こうしてpasswdfile が作成されます. 次に,制限をかけたいディレクトリに,「.htaccess 」というファイルを作成します.

$ vi ~/public_html/secret/.htaccess


AuthType Basic
AuthName The-T-Directory 
AuthUserFile /home/hoge/passwdfile
<Limit GET POST>
require user hero # ← アクセスを許可するユーザ名。
</Limit>

これでsecret.html にアクセスすると,以下の図の例のようにユーザ名とパスワードが聞かれます. ここで,先ほど設定したユーザ名(hero)とパスワードを入力するとsecret.html を閲覧することができます.

secretkey_input

[3.4] ソフトウェアレベルでのアクセス制限

※2020 年度 : [3.4] では joho18 上で行う操作はありませんが, 資料には目を通してください.

先ほどは,.htaccess というファイルを置くことで 特定のページへのアクセスを制限しましたが, 例えば, Dos 攻撃 (下記参照) を仕掛けてくる特定の計算機があった場合, その計算機だけをアクセス禁止にしたい!と, 思うことがあるかもしれません . そういう場合の対策として, 特定のIP アドレスに対してアクセス制限 を行うことができます. 設定ファイルは /etc/apache2/conf-available/security.conf です.

#  vi /etc/apache2/conf-available/security.conf 

#
# Disable access to the entire file system except for the directories that
# are explicitly allowed later.
#
# This currently breaks the configurations that come with some web application
# Debian packages.
#
#<Directory />
#   AllowOverride None
#   Order Deny,Allow
#   Deny from ALL
#</Directory>
…
(略)
…

↓↓↓

#
# Disable access to the entire file system except for the directories that
# are explicitly allowed later.
#
# This currently breaks the configurations that come with some web application
# Debian packages.
#
<Directory />
   AllowOverride None
   Order Deny,Allow
   Deny from 192.168.16.1XX # "XX"は, 拒否したい情報実験機の番号   
</Directory>
…
(略)
…

と書き換えます.

隣の情報実験機を拒否した場合は, 隣の情報実験機からブラウザのURLに以下のように入力します.

http://192.168.16.1XX/

XX は拒否の設定を行った情報実験機の番号です.

forbidden

アクセスが制限されたことを確認した後はアクセス制限を解除すること.

解説:Dos 攻撃

Dos (Denial of Services attack) 攻撃とは,ネットワークを通してサーバなどに攻撃する手段の一つで, 大量のデータや不正なデータを送り,受信先のサービスに高負荷をかけて正常に稼働できない状態にすること.
参考元:DDos 攻撃とは, NTT コミュニケーションズ
訪問日:2020/06/24


>> 次ページへ
情報実験第 8 回のページへ戻る

最終更新日: 2020/07/10 関口 太郎 改訂
copyright © 2000-2020 inex