Webサーバーソフト(Apache2、Nginx)のエラー画面のカスタマイズ

# はじめに
Apache2、Nginxのエラー画面(403、404など)をカスタマイズします。
<a href="https://qiita.com/rockhopper-penguin/items/66a8104bb1e4559ec144" target="_blank">Raspberry PiでWebページ公開</a>も併せて読んでいただくと幸いです。

- 環境
    - 接続側：Windows10のコマンドプロンプトでのOpenSSH<br>Visual Studio Code InsidersのRemote Development
    - サーバー側：Raspberry Pi 3B Raspbian10

# 代表的なエラーコード
- 400 不正なリクエスト(Bad Request)
    - パケットの破損、送信内容のエラーなど。
- 401 認証 Unauthorized
    - ID、パスワードなどで、認証する必要または認証に失敗。
- 403 アクセス拒否 Forbidden
    - 表示することが許されていないページにアクセスしたときに表示
- 404 ファイルが存在しない Not Found
    - 目にすることの多いエラー画面。表示するファイルが存在しないとき、URLが間違っているとき。
- 408 タイムアウト Request Timeout
    - 一定の時間内に処理が完了しなかった場合。
- 500 サーバーエラー Internal Server Error
    - CGIプログラムのエラーなど。
- 503 サービス利用不可 Service Unavailable
    - アクセス集中、メンテナンスなどで、ページが表示できない。

# エラーページの作成
例として、403、404、500、503のエラー画面を作成します。
`/var/www/html/NginxError`に保存します。
※Apacheの場合、ApacheErrorフォルダなどにします。


``` html:403.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>403</title>
	<style>
		body {
			width: 90%;
			margin: auto;
			background-color: rgb(228, 247, 255);
			font-family: 'Yu Gothic', 'Hiragino kaku Gothic Pro', sans-serif;
		}

		#main {
			text-align: center;
			font-size: 3em;
		}
	</style>
</head>
<body>
	<div id="main">
		<h1> - 403 Forbidden - </h1>
		<p>アクセスが許可されていません。</p>
	</div>
</body>
</html>
```

``` html:404.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>404</title>
	<style>
		body {
			width: 90%;
			margin: auto;
			background-color: rgb(228, 247, 255);
			font-family: 'Yu Gothic', 'Hiragino kaku Gothic Pro', sans-serif;
		}

		#main {
			text-align: center;
			font-size: 3em;
		}
	</style>
</head>
<body>
	<div id="main">
		<h1> - 404 Not Found - </h1>
		<p>ページが存在しません。</p>
	</div>
</body>
</html>
```

``` html:500.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>500</title>
	<style>
		body {
			width: 90%;
			margin: auto;
			background-color: rgb(228, 247, 255);
			font-family: 'Yu Gothic', 'Hiragino kaku Gothic Pro', sans-serif;
		}

		#main {
			text-align: center;
			font-size: 3em;
		}
	</style>
</head>
<body>
	<div id="main">
		<h1> - 500 Internal Server Error - </h1>
		<p>サーバー内部でエラーが発生しています。</p>
	</div>
</body>
</html>
```


``` html:503.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>503</title>
	<style>
		body {
			width: 90%;
			margin: auto;
			background-color: rgb(228, 247, 255);
			font-family: 'Yu Gothic', 'Hiragino kaku Gothic Pro', sans-serif;
		}

		#main {
			text-align: center;
			font-size: 3em;
		}
	</style>
</head>
<body>
	<div id="main">
		<h1> - 503 Service Unavailable - </h1>
		<p>サービスを提供することができません。</p>
	</div>
</body>
</html>
```

# エラーページの設定
※Raspbian以外にも、Debian/Ubuntuでも使用できます。
### Nginxでの設定
`/etc/nginx/sites-available/default`を編集して設定を行います。

```
sudo vim /etc/nginx/sites-available/default
```
21行目以下のserver内に設定を書き込みます。

``` bash:default
        error_page 403 /403.html;
        error_page 404 /404.html;
        error_page 500 /500.html;
        error_page 503 /503.html;

        location = /403.html {
                root /var/www/html/NginxError;
        }

        location = /404.html {
                root /var/www/html/NginxError;
        }

        location = /500.html {
                root /var/www/html/NginxError;
        }

        location = /503.html {
                root /var/www/html/NginxError;
        }
```
設定を書き込み後、Nginxを再起動します。

```
sudo systemctl restart nginx
```

### Apache2での設定
`/etc/apache2/apache2.conf`を編集して設定を行います。
※Apache2ですが、上記で作成したNginxErrorを使いまわすため、NginxErrorディレクトリを指定します。

```
sudo vim /etc/apache2/apache2.conf
```

``` bash:apache2.conf
ErrorDocument 403 /NginxError/403.html
ErrorDocument 404 /NginxError/404.html

ErrorDocument 500 /NginxError/500.html
ErrorDocument 503 /NginxError/503.html
```
設定を書き込み後、Apache2を再起動します。

```
sudo systemctl restart apache2
```

# さいごに
エラー画面を見にすることはあまりよくないですが、エラー画面がデフォルトのままよりも、オリジナルのエラー画面を設定すると、見栄え的にもよいのではと思います。