こんにちは、カヨです。
SEとしてお仕事しています。
最近はWEBサイト作成をメインに行っています。
今回のお題は、
エラーページを作成してみた
✔︎WEBサイトの404エラーページを自分で作成したい人
✔︎HPのリニューアルなどでURLが変更することが多いサイトを作成する人
✔︎外部リンクとして、沢山サイトのURLを別サイトに掲載してもらっている人
技術の備忘録です。お手柔らかにどうぞ。
ページ自体は作成して、本番にUPした状態を前提に話を進めています。
not found 404 カスタムエラーページを実装してみた
ウェブサイトにカスタムnot found 404ページを実装するという挑戦を行いました。この取り組みは、訪問者がウェブサイト内で迷走した際に、細やかな配慮を示す目的があります。ここでは、そのプロセスを詳述します。
実装方法
具体的な実装は、次のXMLコードをweb.configファイルに追加することで達成されました。
<configuration>
<system.webServer>
//ここに元々あった設定の記述
<httpErrors errorMode="Custom" existingResponse="Replace">
<remove statusCode="404" />
<error statusCode="404" path="/404.html" responseMode="ExecuteURL" />
</httpErrors>
</system.webServer>
</configuration>
このコード片により、404エラーが発生した際に、指定されたカスタムページに自動的にリダイレクトする機能を実装できます。
環境
本プロジェクトを行った環境は、WindowsのIIS(Internet Information Services)上に構築されたウェブサイトと、nginxをリバースプロキシとして使用する環境でした。この二つのを使用していることで、エラーページ設定がどちらでも行えるのではないかと考えていました。が、今回はちがいました。
実装プロセス
- IISの設定 – プロジェクト選択後のエラーページ404で「静的ファイルのコンテンツをエラー応答に挿入」にてパス設定したが入力エラー。
- nginxの確認 – まず、nginxの設定プロジェクトの.confで設定を試みたが上手くいかず。
- IISの設定 – 再度IISでの設定。エラーページでの設定は確かそうだが、カスタムエラーページへのパスを確認したのにまたもや上手くいかず。ここでプロジェクトのweb.configがIISのエラーページ設定で行われていることに注目。直書きしてみようと次のチャレンジへ。
- web.configの編集 – 最終的に、web.configファイルの編集により、目的とするカスタム404ページの実装に成功しました。
実装の経緯
WEBサイトを頻繁に変更しリニューアルすることが多かったため404エラーページの実装を行いました。nginxの設定の見直し、IISでの試行錯誤、そして最終的なweb.configの編集まで、簡単な道のりではありませんでしたが、その分、学びも大きかったです。
以上が、カスタム404ページの実装に関する記録です。今後も、技術的な挑戦について共有していきたいと思います。どうぞよろしくお願いいたします。
その他
実装までで気になったあれこれをリストにしておく。
nginxとIISを組み合わせて使用する場合実装できない場合がある
nginxとIISを組み合わせて使用する場合、カスタム404の設定に関する問題が発生する可能性があります。いくつかの原因が考えられますが、主なものを以下に挙げてみます。
-
リバースプロキシの設定: nginxがリバースプロキシとして動作している場合、IISでの設定がうまく機能しないことがあります。nginxがエラーページを処理し、そのままクライアントに返すため、IISのカスタム404ページが表示されないことがあります。
-
設定の競合: nginxとIISの両方で404の設定を試みた場合、両方の設定が競合して正常に機能しないことがあります。一貫した設定を確保するために、どちらか一方でのみ設定する必要があります。
-
パーミッションの問題: カスタム404ページが正しく表示されない場合、ファイルのパーミッションが適切に設定されているかどうかを確認する必要があります。IISがファイルにアクセスできるように、適切なパーミッションが与えられていることを確認してください。
-
設定の再読み込み: 設定変更を行った後、nginxやIISなどのサーバーを再起動するか、設定を再読み込みする必要があります。変更を反映させるために、サーバーを再起動または再読み込みしてみてください。
本番のプロジェクトの位置を知る
IISのプロジェクト選択後、右のバーにある「基本情報」からパスがわかる。
web.configで404設定をしたあとのIIS
エラーページの404の設定がweb.configの追記によって変わっていた。「このサイトでURLを実行」に「/404.html」と記載されていた。実装用に参考にしたサイトがあまりなくてここがわからなかった。
参考URL
https://mtgiis.blogspot.com/2013/02/blog-post_25.html
https://www.wannko.net/windows10/iis/iis_13.html
割と「静的ファイルコンテンツ~」で設定って書いてあるサイトが多い。あと、エラーファイルの設定を有効にするとかもあるが結局よくわかってない。
web.configの場所
本番サーバー(WinSCP)>www直下
編集する時はバックアップを忘れずに!!
nginxをのコマンド
NSSMを使用してNginxサービスを再起動するには、次のようにします:
-
Nginxサービスの停止:
nssm stop Nginx_1.18.0
-
設定ファイルの編集: 必要に応じて Nginx の設定ファイルを編集します。
-
Nginxサービスの開始:
nssm start Nginx_1.18.0
この手順で、Nginxの設定変更を反映させることができます。NSSMを使ってサービスを再起動することにより、Nginxが新しい設定を読み込んで適用します。
構文チェック
nginx -t
リスタート
停止しなくともこれでストップスタートが一括でできる
nssm restart Nginx_1.18.0
nginxのコマンドはMacなのかWindowsなのかでも違い、なにで動かしているかによっても変わります。今回のコマンドはNSSMというツールのものです。
404.htmlの設置パス
www/404.html
絶対ではないが今回はここにした。パス設置で間違わなければwww/error/404.htmlとかもある。