404 not found エラーページを作成方法【Windows/IIS/nginx】

こんにちは、カヨです。

【自己紹介】
SEとしてお仕事しています。
最近はWEBサイト作成をメインに行っています。

今回のお題は、

404 not found
エラーページを作成してみた

今回はデフォルトではなくカスタム（自作したページ）のエラーページです。

こんな方に読んでいただきたいと思っています！

✔︎WEBサイトの404エラーページを自分で作成したい人
✔︎HPのリニューアルなどでURLが変更することが多いサイトを作成する人
✔︎外部リンクとして、沢山サイトのURLを別サイトに掲載してもらっている人
✔︎nginxとIISを組み合わせて使用していて404のカスタムエラーページ設定に困ってる人

技術の備忘録です。お手柔らかにどうぞ。

ページ自体は作成して、本番にUPした状態を前提に話を進めています。

また、実装の際は必ずバックアップをとってから行うようにしてください。

not found 404 カスタムエラーページを実装してみた
その他

not found 404 カスタムエラーページを実装してみた

ウェブサイトにカスタムnot found 404ページを実装するという挑戦を行いました。この取り組みは、訪問者がウェブサイト内で迷走した際に、細やかな配慮を示す目的があります。ここでは、そのプロセスを詳述します。

実装方法

✔事前作業：「IIS側の設定web.configではエラー処理しない設定」※←必須設定かは未確認。設定方法は項目「その他」。
筆者はnginxとIISを組合せて使用しているので念のためIIS側で設定してから以下を追記。

✔具体的な実装は、次のコードをnginx内の<project>.com.confファイルに追加することで達成されました。

※今後でてくる「<project>」や「test.sample.com」等にはご自身にあったものを入れてください。

error_page 404 /404.html;

location = /404.html {
  internal;
  root /xxx/xxx/test.sample.com; # エラーページのディレクトリを指定
}

location /css/ {
  alias /xxx/xxx/test.sample.com/css/; # CSSファイルのディレクトリを指定
  add_header Cache-Control "public, max-age=86400"; # 1日間キャッシュする
  try_files $uri $uri/ =404;
}

location /js/ {
  alias /xxx/xxx/test.sample.com/js/; # JavaScriptファイルのディレクトリを指定
  add_header Cache-Control "public, max-age=86400"; # 1日間キャッシュする
  try_files $uri $uri/ =404;
}

location /images/ {
  alias /xxx/xxx/test.sample.com/img/; # 画像ファイルのディレクトリを指定
  add_header Cache-Control "public, max-age=86400"; # 1日間キャッシュする
  try_files $uri $uri/ =404;
}

proxy_intercept_errors on; # Nginxがエラーを処理するように設定
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;

このコードにより、404エラーが発生した際に、指定されたカスタムページに自動的にリダイレクトする機能を実装できます。

記述箇所：confファイル内のどこか

✔【〇】HTTPSのserverブロック（ポート443）
ポート443実際のコンテンツを提供するサーバー。HTTPからHTTPSへのリダイレクトだけを行うserverブロック（ポート80）には、通常404エラーページの設定は必要ありませんが、リダイレクトが失敗した場合に備えて設定することも可能。

server {
    listen        80;
    server_name  sample.com;
    return   301   https://test.sample.com:443$request_uri;
}
server {
    listen        443 ssl;
    server_name   sample.com;
    # root          html;


    access_log  logs/test.sample.com/access.log  main;

    /*-------ここに追記「error_page 404 /404.html;～」の出だしのブロック-------*/

    /*-------中間省略 -------*/
　　　　　（エラー500やら、SSL設定、リバースプロキシ設定）
    /*-------/中間省略 -------*/

    location / {
        proxy_pass http://localhost:8003;

        /*-------ここに追記「proxy_intercept_errors on;～」の出だしのブロック-------*/

    }
}

環境

WindowsのIIS（Internet Information Services）
nginx

本プロジェクトを行った環境は、WindowsのIIS（Internet Information Services）上に構築されたウェブサイトと、nginxをリバースプロキシとして使用する環境でした。この二つを使用していることで使用していることで、エラーページ設定がどちらでも行えるのではないかと考えていました。が、今回はちがいました。

実装プロセス

IISの設定 – プロジェクト選択後のエラーページ404で「静的ファイルのコンテンツをエラー応答に挿入」にてパス設定したが入力エラー。
nginxの確認 – まず、nginxの設定プロジェクトの.confで設定を試みたが上手くいかず。
IISの設定 – 再度IISでの設定。カスタムエラーページへのパスを再度確認し記述したのにまたもや上手くいかず。ここでプロジェクトのweb.configがIISのエラーページ設定で行われていることに注目。直書きしてみようと次のチャレンジへ。
web.configの編集 – 最終的に、web.configファイルの編集により、目的とするカスタム404ページの表示に成功。完了したと思ったが、ステータスコードを確認すると404になっておらず失敗に気づく。
nginxとIISを組み合わせて使用する場合、カスタム404の設定に関する問題が発生する可能性があるということを思い出す。
nginxでnginxがエラーの処理をするように設定。IIS側の設定web.configではエラー処理しない設定。
404エラーページが表示される。しかし、まだ読み込まれたのはhtmlだけでcssが効いていなくビューが崩れている。
nginxでcssが読み込まれるように設定。その他の読み込みされてないものを設定して完了。

実装の経緯

WEBサイトを頻繁に変更しリニューアルすることが多かったため404エラーページの実装を行いました。nginxの設定の見直し、IISでの試行錯誤、そして戻って最終的にnginxの編集まで、簡単な道のりではありませんでしたが、その分、学びも大きかったです。中でもサーバーの理解度がまだ足りなく進まない部分もありましたが、カスタムエラーページを自分で作成したので何を読み込ませなければいけないかcss以外に必要なものがわかっていたことは良かったです。

以上が、カスタム404ページの実装に関する記録です。今後も技術的な挑戦について共有していきたいと思います。どうぞよろしくお願いいたします。

その他

実装までで気になったあれこれをリストにしておく。

nginxとIISを組み合わせて使用する場合実装できない場合がある

nginxとIISを組み合わせて使用する場合、カスタム404の設定に関する問題が発生する可能性があります。いくつかの原因が考えられますが、主なものを以下に挙げてみます。

リバースプロキシの設定: nginxがリバースプロキシとして動作している場合、IISでの設定がうまく機能しないことがあります。nginxがエラーページを処理し、そのままクライアントに返すため、IISのカスタム404ページが表示されないことがあります。
設定の競合: nginxとIISの両方で404の設定を試みた場合、両方の設定が競合して正常に機能しないことがあります。一貫した設定を確保するために、どちらか一方でのみ設定する必要があります。
パーミッションの問題: カスタム404ページが正しく表示されない場合、ファイルのパーミッションが適切に設定されているかどうかを確認する必要があります。IISがファイルにアクセスできるように、適切なパーミッションが与えられていることを確認してください。
設定の再読み込み: 設定変更を行った後、nginxやIISなどのサーバーを再起動するか、設定を再読み込みする必要があります。変更を反映させるために、サーバーを再起動または再読み込みしてみてください。

今回はnginxにエラー処理する設定、IISにエラー処理しないように設定しました。設定しない＝動作しない、訳ではないので上手くいかない時は「しない」を設定するのもいいかも。

本番のプロジェクトの位置を知る

IISのプロジェクト選択後、右のバーにある「基本情報」からパスがわかる。
ディレクトリ指定の記述の際に迷わず書ける。基本的にサーバー内の設定のパスはサーバー上のパス。ローカルのパスは関係ないので注意。

nginxの設定で上手くいかない時は「IIS側の設定web.configではエラー処理しない設定」

<system.webServer>タグの中の一番下。

<configuration>
    <system.webServer>


       /*-------中間省略 -------*/

       <httpErrors errorMode="DetailedLocalOnly">
            <remove statusCode="404" subStatusCode="-1" />
        </httpErrors>
    </system.webServer>
</configuration>