Nginxカスタムエラーページの設定方法 | ユーザー体験を向上させる | DevOpsツールとベストプラクティスの習得

はじめに

デフォルトのNginxエラーページは機能的ですが、Webサイトのブランドイメージとはかけ離れていることがよくあります。カスタムエラーページを設定することで、ユーザーがエラーに遭遇した際にもサイトのトーンを維持し、役立つナビゲーションを提供することができます。

ステップ1：カスタムエラーページの作成

まず、エラーページ用のHTMLファイルを作成します。例えば、/var/www/html/errors/404.html に保存します。

<!DOCTYPE html>
<html>
<head>
    <title>ページが見つかりません</title>
</head>
<body>
    <h1>おっと！ページが見つかりません。</h1>
    <p>お探しのページは移動したか、削除された可能性があります。</p>
    <a href="/">ホームに戻る</a>
</body>
</html>

ステップ2：Nginxの設定

次に、Nginxの設定ファイル（通常は /etc/nginx/nginx.conf または各サイトの構成ファイル）を編集し、error_page ディレクティブを追加します。

server {
    listen 80;
    server_name example.com;

    # エラーページの場所を指定
    error_page 404 /errors/404.html;
    error_page 500 502 503 504 /errors/50x.html;

    location /errors/ {
        root /var/www/html;
        internal;
    }
}

ステップ3：設定のテストと再読み込み

設定に誤りがないか確認し、Nginxを再読み込みします。

sudo nginx -t
sudo systemctl reload nginx

まとめ

カスタムエラーページを導入することで、サイトのプロフェッショナルな外観を保ち、エラー発生時のユーザーの離脱を防ぐことができます。ぜひ、あなたのサイトに合わせてカスタマイズしてみてください。