Webサーバーソフト(Apache2、Nginx)のエラー画面のカスタマイズ

13538 ワード
Apache nginx apache2 Web nginx テキストリンク

はじめに

Apache2、Nginxのエラー画面(403、404など)をカスタマイズします。
Raspberry PiでWebページ公開も併せて読んでいただくと幸いです。

  • 環境
    • 接続側：Windows10のコマンドプロンプトでのOpenSSH
      Visual Studio Code InsidersのRemote Development
    • サーバー側：Raspberry Pi 3B Raspbian10

代表的なエラーコード

  • 400 不正なリクエスト(Bad Request)
    • パケットの破損、送信内容のエラーなど。
  • 401 認証 Unauthorized
    • ID、パスワードなどで、認証する必要または認証に失敗。
  • 403 アクセス拒否 Forbidden
    • 表示することが許されていないページにアクセスしたときに表示
  • 404 ファイルが存在しない Not Found
    • 目にすることの多いエラー画面。表示するファイルが存在しないとき、URLが間違っているとき。
  • 408 タイムアウト Request Timeout
    • 一定の時間内に処理が完了しなかった場合。
  • 500 サーバーエラー Internal Server Error
    • CGIプログラムのエラーなど。
  • 503 サービス利用不可 Service Unavailable
    • アクセス集中、メンテナンスなどで、ページが表示できない。

エラーページの作成

例として、403、404、500、503のエラー画面を作成します。
/var/www/html/NginxErrorに保存します。
※Apacheの場合、ApacheErrorフォルダなどにします。

403.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>403</title>
    <style>
        body {
            width: 90%;
            margin: auto;
            background-color: rgb(228, 247, 255);
            font-family: 'Yu Gothic', 'Hiragino kaku Gothic Pro', sans-serif;
        }

        #main {
            text-align: center;
            font-size: 3em;
        }
    </style>
</head>
<body>
    <div id="main">
        <h1> - 403 Forbidden - </h1>
        <p>アクセスが許可されていません。</p>
    </div>
</body>
</html>
404.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>404</title>
    <style>
        body {
            width: 90%;
            margin: auto;
            background-color: rgb(228, 247, 255);
            font-family: 'Yu Gothic', 'Hiragino kaku Gothic Pro', sans-serif;
        }

        #main {
            text-align: center;
            font-size: 3em;
        }
    </style>
</head>
<body>
    <div id="main">
        <h1> - 404 Not Found - </h1>
        <p>ページが存在しません。</p>
    </div>
</body>
</html>
500.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>500</title>
    <style>
        body {
            width: 90%;
            margin: auto;
            background-color: rgb(228, 247, 255);
            font-family: 'Yu Gothic', 'Hiragino kaku Gothic Pro', sans-serif;
        }

        #main {
            text-align: center;
            font-size: 3em;
        }
    </style>
</head>
<body>
    <div id="main">
        <h1> - 500 Internal Server Error - </h1>
        <p>サーバー内部でエラーが発生しています。</p>
    </div>
</body>
</html>
503.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>503</title>
    <style>
        body {
            width: 90%;
            margin: auto;
            background-color: rgb(228, 247, 255);
            font-family: 'Yu Gothic', 'Hiragino kaku Gothic Pro', sans-serif;
        }

        #main {
            text-align: center;
            font-size: 3em;
        }
    </style>
</head>
<body>
    <div id="main">
        <h1> - 503 Service Unavailable - </h1>
        <p>サービスを提供することができません。</p>
    </div>
</body>
</html>

エラーページの設定

※Raspbian以外にも、Debian/Ubuntuでも使用できます。

Nginxでの設定

/etc/nginx/sites-available/defaultを編集して設定を行います。

sudo vim /etc/nginx/sites-available/default

21行目以下のserver内に設定を書き込みます。

default
        error_page 403 /403.html;
        error_page 404 /404.html;
        error_page 500 /500.html;
        error_page 503 /503.html;

        location = /403.html {
                root /var/www/html/NginxError;
        }

        location = /404.html {
                root /var/www/html/NginxError;
        }

        location = /500.html {
                root /var/www/html/NginxError;
        }

        location = /503.html {
                root /var/www/html/NginxError;
        }

設定を書き込み後、Nginxを再起動します。

sudo systemctl restart nginx

Apache2での設定

/etc/apache2/apache2.confを編集して設定を行います。
※Apache2ですが、上記で作成したNginxErrorを使いまわすため、NginxErrorディレクトリを指定します。

sudo vim /etc/apache2/apache2.conf
apache2.conf
ErrorDocument 403 /NginxError/403.html
ErrorDocument 404 /NginxError/404.html

ErrorDocument 500 /NginxError/500.html
ErrorDocument 503 /NginxError/503.html

設定を書き込み後、Apache2を再起動します。

sudo systemctl restart apache2

さいごに

エラー画面を見にすることはあまりよくないですが、エラー画面がデフォルトのままよりも、オリジナルのエラー画面を設定すると、見栄え的にもよいのではと思います。

どのようにweb.xmlファイルに他のxmlファイルを導入する(web.xmlはどのように分割するか)
log 4 jログ位置設定