ホームページ 運用・保守 Nginx Nginx エラー ページの構成、Web サイトのエラー プロンプトを美しくする

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

Jul 04, 2023 pm 01:33 PM
エラーページ nginxの設定 美化のヒント

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Nginx エラー ページの構成、Web サイトのエラー プロンプトを美しくする Nginx エラー ページの構成、Web サイトのエラー プロンプトを美しくする Jul 04, 2023 pm 01:33 PM

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

Nginx クロスオリジン リソース共有 (CORS) 構成を実装する方法 Nginx クロスオリジン リソース共有 (CORS) 構成を実装する方法 Nov 08, 2023 pm 12:22 PM

Nginx のクロスドメイン リソース共有 (CORS) 構成を実装する方法には、特定のコード サンプルが必要です。フロントエンドとバックエンドの分離開発の人気に伴い、クロスドメイン リソース共有 (CORS) の問題は共通の課題となっています。 Web 開発では、ブラウザーの同一オリジン ポリシー制限により、クライアント側の JavaScript コードは、そのコードが配置されているページと同じドメイン名、プロトコル、およびポートを持つリソースのみを要求できます。ただし、実際の開発では、異なるドメイン名または異なるサブドメインからリソースをリクエストする必要があることがよくあります。このとき、COを使用する必要があります

指定したユーザーへのアクセスを制限する Nginx アクセス制御構成 指定したユーザーへのアクセスを制限する Nginx アクセス制御構成 Jul 04, 2023 am 10:37 AM

指定したユーザーへのアクセスを制限する Nginx アクセス制御構成 Web サーバーにおいて、アクセス制御は、特定のユーザーまたは IP アドレスへのアクセス権を制限するために使用される重要なセキュリティ対策です。 Nginx は高性能 Web サーバーとして、強力なアクセス制御機能も提供します。この記事では、Nginx の設定を使用して特定のユーザーのアクセス権限を制限する方法と、参考となるコード例を紹介します。まず、基本的な Nginx 構成ファイルを準備する必要があります。構成ファイルのパスが次の Web サイトにすでにあると仮定します。

0x80070002の解決方法 0x80070002の解決方法 Oct 27, 2023 pm 03:22 PM

エラー コード 0x80070002 は通常、操作の実行中にファイルまたはディレクトリが存在しないエラーが発生したことを示します。解決策: 1. ファイルまたはディレクトリが存在するかどうかを確認し、関連するファイルまたはディレクトリがコンピュータ上に存在することを確認します; 2. システム ファイル チェックを実行します: システム ファイル チェック ツールを実行して、破損している可能性のあるシステム ファイルをスキャンして修復します; 3.一時ファイルのクリア: コンピューター上の一時ファイルとキャッシュを削除します; 4. Windows 更新の問題を修正します; 5. システムの復元を実行します。

Yii フレームワークでのエラーページと例外処理 Yii フレームワークでのエラーページと例外処理 Jun 21, 2023 pm 03:27 PM

Yii フレームワークは、Web アプリケーション開発で広く使用されている高性能 PHP フレームワークです。 Yii アプリケーションでは、エラーページと例外処理モジュールは非常に重要な機能の 1 つです。この記事では、Yii フレームワークのエラーページと例外処理モジュールを簡単に紹介し、これらの関数をよりよく理解して使用するのに役立つ実用的なサンプルコードをいくつか紹介します。 1. エラーページ ユーザーが存在しないページにアクセスしたり、不正な接続が発生したり、その他のエラーが発生したりすると、Yii フレームワークはデフォルトでエラーページを表示します。通常このページは

Nginx 構成ファイルに似た PHP 配列を構成管理に使用するにはどうすればよいですか? Nginx 構成ファイルに似た PHP 配列を構成管理に使用するにはどうすればよいですか? Jun 01, 2023 pm 10:10 PM

PHP は非常に人気のあるプログラミング言語であり、特に Web 開発に適しています。 PHP 開発者は、一部の構成ファイルを扱うとき、多くの場合、管理のために配列を使用する必要があります。この記事では、構成管理のために Nginx 構成ファイルのような PHP 配列を使用する方法を説明します。 Nginx の設定ファイルはテキストを使用して編集でき、非常に読みやすい、非常に一般的な設定方法です。 Nginx 構成ファイルは、PHP 配列と同様の方法を使用して構成情報を表します。

nginxの設定とは何ですか nginxの設定とは何ですか Aug 04, 2023 am 11:19 AM

nginx 設定は、メインの設定ファイル、仮想ホスト設定、HTTP リクエスト処理、リバース プロキシ、ロード バランシング、静的ファイル処理、HTTP 圧縮、SSL/TLS サポート、仮想ホスト設定およびログ ファイルです。

NGINX と PM2 を使用して VPS サーバーを構成する方法 NGINX と PM2 を使用して VPS サーバーを構成する方法 Sep 27, 2023 pm 12:54 PM

NGINX と PM2 を使用して VPS サーバーを構成する方法 Web サーバーを構築するプロセスでは、NGINX と PM2 を使用するのが一般的な構成方法です。 NGINX は、リバース プロキシと負荷分散に一般的に使用される高性能 Web サーバーです。 PM2 は、サーバー上で Node.js アプリケーションを実行および管理できるプロセス管理ツールです。この記事では、NGINX と PM2 を使用して VPS サーバーを構成する方法と、具体的なコード例を紹介します。ステップ 1: NGINX と PM2 をインストールする

See all articles