Nginx エラー ページの構成、Web サイトのエラー プロンプトを美しくする

PHPz
リリース: 2023-07-04 13:33:11
オリジナル
2916 人が閲覧しました

Nginx エラー ページの設定、Web サイトの障害プロンプトを美しくする

Web サイトの運用中にサーバー エラーやその他の障害が発生することは避けられず、これらの問題によりユーザーは Web サイトに正常にアクセスできなくなります。ユーザー エクスペリエンスと Web サイトのイメージを向上させるために、Nginx エラー ページを構成して Web サイトのエラー プロンプトを美しくすることができます。この記事では、Nginx のエラー ページ設定機能を使用してエラー ページをカスタマイズする方法を紹介し、参考としてコード例を示します。

1. Nginx 設定ファイルを変更する

まず、Nginx 設定ファイルを開く必要があります。通常、このファイルは /etc/nginx/nginx.conf または /etc/nginx/conf にあります。 .d/default.conf。サーバー ブロックを見つけて、次の構成を追加します。

server {
    ...
    error_page 403 /error/403.html;
    error_page 404 /error/404.html;
    error_page 500 502 503 504 /error/50x.html;
    ...
}
ログイン後にコピー

上記の構成では、error_page ディレクティブを使用してエラー ページのパスを設定します。これはローカル ファイル パスまたは URI です。 403 はアクセス拒否エラーを示し、404 はページにエラーがないことを示し、500、502、503、および 504 はサーバー エラーを示します。

2. エラー ページの作成

対応するエラー ページ ファイルを作成し、指定されたパスに保存する必要があります。次に、403 エラー ページを例として、403.html という名前のファイルを作成し、nginx 構成ディレクトリの下のエラー ディレクトリに保存します。

$ sudo mkdir /usr/share/nginx/error
$ sudo touch /usr/share/nginx/error/403.html
$ sudo nano /usr/share/nginx/error/403.html
ログイン後にコピー

403.html では、エラー メッセージをカスタマイズし、テキスト、アイコン、リンクなどを追加して、403 エラーが発生したことをユーザーに通知できます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>403 Forbidden</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f6f6f6;
            margin: 0;
            padding: 50px;
            text-align: center;
        }
        h1 {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }
        p {
            font-size: 18px;
            color: #666;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>403 Forbidden</h1>
    <p>抱歉,您没有权限访问该页面。</p>
</body>
</html>
ログイン後にコピー

3. Nginx の再起動

上記の設定が完了したら、設定を有効にするために Nginx を再起動する必要があります。

$ sudo systemctl restart nginx
ログイン後にコピー

4. 設定の確認

ブラウザに存在しない URL (http://example.com/123456 など) を入力すると、カスタマイズされた 404 エラー ページが表示されます。同じ原理で、ユーザーが URL にアクセスする権限を持っていない場合、カスタマイズされた 403 エラー ページも表示されます。

Nginx エラー ページの設定を通じて、Web サイトの障害プロンプトを美しくし、ユーザー エクスペリエンスと Web サイトのイメージを向上させることができます。 403 および 404 エラー ページに加えて、500、502、503 などの他のタイプのエラー ページもカスタマイズできます。上記の手順に従い、対応する error_page ディレクティブを Nginx 構成ファイルに追加し、対応するエラー ページ ファイルを作成するだけです。

概要:

Nginx は柔軟なエラー ページ構成機能を提供しており、Web サイトのエラー プロンプト ページをカスタマイズできます。エレガントなエラー ページのデザインとプロンプト情報により、ユーザー エクスペリエンスを向上させると同時に、フレンドリーでプロフェッショナルなイメージをユーザーに提示できます。上記はNginxのエラーページ設定の紹介とサンプルコードで、Webサイトのエラープロンプトを美しくするのに役立つことを願っています。

以上がNginx エラー ページの構成、Web サイトのエラー プロンプトを美しくするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート