Nginx にて 503 などのエラーページをカスタマイズする

最終更新日:

Nginx

/etc/nginx/conf.d/xxxx.conf

必要なところだけ抜粋。
下記コードがエラーページのデフォルト設定。
これを任意のページに切り替える。

server {
	error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

サンプルコード

必要なところだけ抜粋。
50x系エラーを任意のページを表示させる。
404も追加。

/etc/nginx/conf.d/xxxx.conf

internal は外部から直接アクセスすることはできないようにする指定らしい。

server {
	
	listen       80;
	server_name  localhost;

	root /path/to/your/project/public;

    index index.php index.html;

	error_page  404  /404.html;
    location = /404.html {
        root /path/to/your/project/errors;
        internal;
    }

	error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root /path/to/your/project/errors;
        internal;
    }

}

/path/to/your/project/errors/404.html

/img について、 /path/to/your/project/public/errors ではなく、
xxxx.conf の root /path/to/your/project/public が適用される。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		header {
			text-align: center;
			padding: 24px;
		}
		header img {
			width: 100%;
			max-width: 100px;
			height: auto;
			vertical-align: top;
			line-height: 0;
			border: 0;
		}
		div {
			padding: 24px;
		}
	</style>
	<title>404 Not Found</title>
</head>
<body>
	<header>
		<a href="/"><img src="/img/logo/1x.png" srcset="/img/logo/1x.png 1x, /img/logo/2x.png 2x" alt=""></a>
	</header>
	<div>
		404 Not Found
	</div>
</body>
</html>

/path/to/your/project/errors/50x.html

50x系は css ファイルを読み込めなかったので、
html ファイルに直接 css を書く。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		header {
			text-align: center;
			padding: 24px;
		}
		header img {
			width: 100%;
			max-width: 100px;
			height: auto;
			vertical-align: top;
			line-height: 0;
			border: 0;
		}
		div {
			padding: 24px;
		}
	</style>
	<title>50x Error</title>
</head>
<body>
	<header>
		<a href="/"><img src="/img/logo/1x.png" srcset="/img/logo/1x.png 1x, /img/logo/2x.png 2x" alt=""></a>
	</header>
	<div>
		50x Error
	</div>
</body>
</html>