ウェブサイト検索

NGINXでカスタム404エラーページを作成する方法

NGINXがクライアントのリクエストを処理しようとする際にエラーが発生するたびに、エラーが返されます。各エラーにはHTTPレスポンスコードと短い説明が含まれています。エラーは通常、シンプルなデフォルトのHTMLページを通じてユーザーに表示されます。

幸運なことに、NGINXを設定して、サイトやウェブアプリケーションのユーザーにカスタムエラーページを表示することができます。これは、指定されたエラーのために表示されるURIを定義するために使用されるNGINXのerror_page ディレクティブを使って実現できます。また、クライアントに送信される応答ヘッダーのHTTPステータスコードを変更するために、オプションでこれを使用することもできます。

このガイドでは、NGINXを設定してカスタムエラーページを使用する方法を示します。

すべてのNGINXエラー用の単一カスタムページを作成する

NGINXを構成して、クライアントに返すすべてのエラーに対して単一のカスタムエラーページを使用できます。まず、エラーページを作成します。こちらは例として、メッセージを表示するシンプルなHTMLページです。

“Sorry, the page can't be loaded! Contact the site's administrator or support for assistance.” to a client.

サンプル HTML Nginx カスタムページコード。

<!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/

次に、error_page ディレクティブを使用してカスタムエラーページを使用するように NGINX を設定します。示されているように、/etc/nginx/snippets/ の下に custom-error-page.conf という設定ファイルを作成します。

$ 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;
}

この設定は、NGINX が指定された HTTP エラー 404、403、500、および 503 のいずれかに遭遇するたびに、内部リダイレクトを URI/error-page.html に引き起こします。location コンテキストは、NGINX にエラーページの場所を知らせます。

ファイルを保存して閉じてください。

今、全てのサーバーブロックがエラーページを使用するように、/etc/nginx/nginx.confファイル内のhttpコンテキストにファイルを含めてください:

$ sudo vim /etc/nginx/nginx.conf

includeディレクトリはNGINXに指定された.confファイルの設定を含めるよう指示します。

include snippets/custom-error-page.conf;

また、特定のサーバーブロック（一般に vhost として知られている）に対してファイルを含めることもできます。例えば、/etc/nginx/conf.d/mywebsite.confのようにです。サーバーの{}コンテキストに上記のincludeディレクティブを追加してください。

次のようにしてNGINXの設定ファイルを保存し、サービスを再読み込みします:

$ sudo systemctl reload nginx.service

ブラウザからテストして、設定が問題ないか確認してください。

各NGINXエラーに対して異なるカスタムページを作成する

各HTTPエラーに対して異なるカスタムエラーページをNGINXに設定することもできます。GithubでDenys Vitaliによって作成された良いカスタムnginxエラーページのコレクションを見つけました。

サーバーにリポジトリを設定するには、次のコマンドを実行してください。

$ 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 コンテキストまたは各サーバーブロック/ vhost に次の設定を追加してください:

include snippets/error_pages.conf;

NGINXの設定ファイルを保存し、以下のようにサービスを再読み込みします:

$ sudo systemctl reload nginx.service

また、構成が意図した通りに機能しているかをブラウザからテストしてください。この例では、404エラーページをテストしました。

このガイドでお伝えすることは以上です。NGINXのerror_pageディレクティブを使用すると、エラーが発生した際に、ユーザーを定義されたページやリソース、URLにリダイレクトできます。また、クライアントへのレスポンスのHTTPステータスコードを変更することもオプションとして可能です。詳細については、nginxエラーページのドキュメントをご覧ください。

関連記事: