サイトを訪れた読者が、リンク切れなどで「ページが見つかりません」という画面に遭遇したとき。 味気ないデフォルトの「404 Not Found」が表示されるのと、サイトのデザインに合わせた「お探しのページは見つかりませんでした」という案内が出るのとでは、ユーザー体験（UX）に大きな差が生まれます。
今回は、Nginxを使って自作のカスタム404ページ（例：custom_404.html）を正しく表示させるための手順を、ハマりやすいポイントも含めて解説します。
1. カスタム404ページ（HTML）を準備する
まずは、表示させたいエラーページを作成します。 ファイル名は何でも構いませんが、今回は custom_404.html とします。
作成したファイルは、サイトのドキュメントルート（例：/var/www/html/）の直下にアップロードしておきます。
2. Nginxの設定ファイルを編集する
Nginxの設定ファイル（nginx.conf や /etc/nginx/conf.d/default.conf など）を編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
server { listen 443 ssl; server_name www.example.com; root /var/www/htdocs; # 404エラー時に表示するファイルを指定 error_page 404 /custom_404.html; # エラーページ自体の設定 location = /custom_404.html { root /var/www/html; internal; # 一般公開ページの扱いにならないように直接このURLにアクセスされるのを防ぐ } } |
設定の中にある internal; という記述。これには「このファイルはNginxの内部処理専用です」という意味があります。これがないと、以下のようなことが起こる可能性があります。
- 直接アクセスできてしまう
https://example.com/custom_404.htmlとURLを直接叩いたとき、ステータスコード「200 OK」（正常なページ）として表示されてしまいます。 - 検索エンジンに載ってしまう
Googleなどのロボットがこのページを「普通のコンテンツ」として認識し、検索結果にインデックスしてしまうことがあります。
internal; を書くことで、「エラーの時だけ呼び出される、特別な裏方ページ」として正しく扱うことができます。
PHPやCGIを利用している場合の設定
WordPressなどのPHPプログラムやCGIを利用している場合、プログラム側で発生したエラーをNginxがキャッチできるように設定する必要があります。これをしないとカスタムページが表示されずデフォルト画面に戻ってしまいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
# CGIの設定 location ~ \.cgi$ { proxy_pass http://127.0.0.1:5000; proxy_intercept_errors on; # これが重要！ } # PHPの設定 location ~ \.php$ { fastcgi_pass unix:/run/php-fpm/www.sock; # ...その他の設定... fastcgi_intercept_errors on; # これが重要！ } |
3. 設定の反映と動作確認
設定を書き換えたら、反映させる前に必ず構文チェックを行います。
- 構文チェック
|
1 |
sudo nginx -t |
syntax is ok と表示されればNginxの設定ファイルにエラーがないことになります。
- Nginxの再起動
|
1 |
sudo systemctl restart nginx |
- ブラウザで確認
存在しないURL（例：https://yourdomain.com/test999）にアクセスして、自作のページが表示されるか確認します。 ※キャッシュが残っている場合があるため、表示が確認できない場合はシークレットウィンドウを試してみてください。
4. 表示されない場合のチェックポイント
もし設定した通りに表示されない場合は、以下の3点を確認してみてください。
- ファイル名の不一致：設定ファイル内の記述と、実際のファイル名（大文字小文字含む）が1文字でも違っていないか。
- ドメイン名のスペルミス：
server_nameに指定したドメイン名にタイポがないか。 - パーミッション（権限）：Nginxがそのファイルを読み取れる権限があるか（通常は
644など）。
