(oneechanblog) – 毎回 NGINX クライアント要求を処理しようとしたときにエラーが発生し、エラーが返されました。 各エラーには1つ含まれています HTTP 応答コードと簡単な説明。 エラーは通常、単純なデフォルトを介してユーザーに表示されます HTML ページ。
幸いなことに、あなたは設定することができます NGINX WebサイトまたはWebアプリケーションのユーザーにカスタムエラーページを表示します。 これは、NGINXのerror_pageを使用して実現できます。 指令 決定するために使用 URI 指定したエラーに対して表示されます。 オプションでこれを使用して、クライアントに送信される応答ヘッダーのHTTPステータスコードを変更することもできます。
このチュートリアルでは、構成方法を示します NGINX カスタムエラーページを使用します。
すべてのNGINXエラーに対して単一のカスタムページを作成します
設定できます NGINX クライアントに返されるすべてのエラーに対して単一のカスタムエラーページを使用します。 エラーページを作成することから始めます。 次に、メッセージを表示する単純なHTMLページの例を示します。
“Sorry, the page can’t be loaded! Contact the site’s administrator or support for assistance.” to a client.
NginxカスタムHTMLページコードサンプル。
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
* -webkit-box-sizing: border-box; box-sizing: border-box;
body padding: 0; margin: 0;
#notfound position: relative; height: 100vh;
#notfound .notfound position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
.notfound max-width: 520px; width: 100%; line-height: 1.4; text-align: center;
.notfound .notfound-error position: relative; height: 200px; margin: 0px auto 20px; z-index: -1;
.notfound .notfound-error h1 font-family: ‘Montserrat’, sans-serif; font-size: 200px; font-weight: 300; margin: 0px; color: #211b19; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@media only screen and (max-width: 767px) .notfound .notfound-error h1 font-size: 148px;
@media only screen and (max-width: 480px) .notfound .notfound-error height: 148px; margin: 0px auto 10px;
.notfound .notfound-error h1 font-size: 120px; font-weight: 200px;
.notfound .notfound-error h2 font-size：30px;
.notfound a padding: 7px 15px; font-size: 24px;
.h2 font-size：148px;
</style>
</head>
<body>
<div id=”notfound”>
<div class=”notfound”>
<h1>Sorry the page can’t be loaded!</a></h1>
<div class=”notfound-error”>
<p>Contact the site’s administrator or support for assistance.</p>
</div>
</div>
</div>
</body>
</html>
たとえば、適切な名前でファイルを保存します error-page.html そしてそれを閉じます。
次に、ファイルをドキュメントのルートディレクトリに移動します（/ var / www / html /）。 ディレクトリが存在しない場合は、次のようにmkdirコマンドを使用して作成できます。
$ sudo mkdir -p /var/www/html/
$ sudo cp error-page.html /var/www/html/
次に、構成します NGINX を使用してカスタムエラーページを使用するには error_page 指令。 名前の付いた構成ファイルを作成します custom-error-page.conf 下 / etc / nginx / snippets / 同じ写真。
$ sudo mkdir /etc/nginx/snippets/
$ sudo vim /etc/nginx/snippets/custom-error-page.conf
次の行を追加します。
error_page 404 403 500 503 /error-page.html;
location = /error-page.html
root /var/www/html;
internal;
この構成により、内部リダイレクトが発生します URI/error-page.html 毎回 NGINX 指定されたHTTPエラー404、403、500、および503のいずれかが発生しました。 位置 コンテキストは言った NGINX エラーページの場所。
ファイルを保存して閉じます。
次に、ファイルをに含めます http すべてのサーバーブロックがエラーページを使用するようにコンテキスト /etc/nginx/nginx.conf ファイル：
$ sudo vim /etc/nginx/nginx.conf
ザ で構成されています ディレクトリは言う NGINX 構成を含めるには .conf ファイル：
include snippets/custom-error-page.conf;
さらに、あなたはすることができます で構成されています 特定のサーバーブロックのファイル（一般に vhost）、 例えば、 /etc/nginx/conf.d/mywebsite.conf。 上記を追加 で構成されています サーバーのディレクティブ 環境。
あなたのものを保存する NGINX 設定ファイルを作成し、次のようにサービスをリロードします。
$ sudo systemctl reload nginx.service
そして、セットアップが正常に機能するかどうかブラウザからテストします。
Nginxカスタム404ページ
NGINXごとに異なるカスタムページを作成します。エラー
でHTTPエラーごとに異なるカスタムエラーページを設定することもできます NGINX。 によって作成されたカスタムnginxエラーページの優れたコレクションを発見しました デニスビタリ その上 Github。
サーバーにリポジトリを設定するには、次のコマンドを実行します。
$ sudo git clone https://github.com/denysvitali/nginx-error-pages /srv/http/default
$ sudo mkdir /etc/nginx/snippets/
$ sudo ln -s /srv/http/default/snippets/error_pages.conf /etc/nginx/snippets/error_pages.conf
$ sudo ln -s /srv/http/default/snippets/error_pages_content.conf /etc/nginx/snippets/error_pages_content.conf
次に、次の構成を追加します http コンテキストまたは各サーバー/仮想ホストブロック：
include snippets/error_pages.conf;
NGINX構成ファイルを保存し、次のようにサービスをリロードします。
$ sudo systemctl reload nginx.service
また、ブラウザから設定が期待どおりに機能していることを確認してください。 この例では、404エラーページを確認しました。
Nginxカスタム404エラーページ
このガイドでは、これですべてです。 NGINXの error_page ディレクティブを使用すると、エラーが発生したときに、指定したページ、リソース、またはURLにユーザーをリダイレクトできます。 また、オプションで、クライアントへの応答でHTTPステータスコードを変更することもできます。 詳細については、nginxエラーページのドキュメントをご覧ください。