はじめに

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サーバーソフト(Apache2、Nginx)のエラー画面のカスタマイズ