この記事では、Web アプリでカスタム エラー ページを構成する方法について説明します。 App Service では、既定のエラー ページの代わりにユーザーに表示される、特定のエラーのエラー ページを構成できます。
前提条件
このチュートリアルでは、App Service でホストされている Web アプリにカスタム 403 エラー ページを追加し、IP 制限を使用してテストします。 そのためには、次のものが必要です。
- Premium SKU を使用して App Service でホストされる Web アプリ
- サイズが 10 KB 未満の HTML ファイル
エラー ページをアップロードする
この例では、ユーザーに表示する 403 エラー ページをアップロードしてテストしています。 エラー コードに一致するように html ファイルに名前を付けます (例: 403.html)。 HTML ファイルを準備したら、Web アプリにアップロードできます。 構成ブレードに、[Error pages (preview)]\(エラー ページ (プレビュー)\) タブが表示されます。このタブをクリックすると、エラー ページのオプションが表示されます。 オプションがグレー表示されている場合、この機能を使用するには、少なくとも Premium SKU にアップグレードする必要があります。
エラー ページをアップロードするエラー コードを選択し、[編集] をクリックします。 次の画面で、フォルダー アイコンをクリックして HTML ファイルを選択します。 ファイルは html 形式で、10 KB のサイズ制限内である必要があります。 .html ファイルを見つけて、画面の下部にある [アップロード] ボタンをクリックします。 テーブルの [状態] が [未構成] から [構成済み] に更新されていることに注目してください。 次に、[保存] をクリックしてアップロードを完了します。
エラー ページを確認する
カスタム エラー ページがアップロードされて保存されたら、ページをトリガーして表示できます。 この例では、IP 制限を使用して 403 エラーをトリガーできますが、サイトを停止して 403 エラー ページをトリガーすることもできます。
IP 制限を設定するには、[ネットワーク] ブレードに移動し、[Inbound traffic configuration]\(受信トラフィックの構成\) の下にある [Enabled with access restrictions]\(アクセス制限で有効\) リンクをクリックします。
[サイトのアクセスとルール] セクションで、[+追加] ボタンを選択して IP 制限を作成します。
次のフォームでは、[アクション] を [拒否] に変更し、[優先度] と [IP アドレス ブロック] に値を入力する必要があります。 この例では、[ネットワーク] ブレードにある [受信アドレス] を使用し、それを /0 (たとえば 12.123.12.123/0) に設定します。 これにより、サイトにアクセスするときにすべてのパブリック アクセスが無効になります。
[ルールの追加] フォームへの入力が完了したら、[ルールの追加] ボタンを選択します。 [保存] をクリックします。
保存したら、サイトを再起動して変更を有効にする必要があります。 概要ページに移動し、[参照] を選択します。 カスタム エラー ページが読み込まれます。
エラー コード
App Service では現在、カスタマイズに使用できる 3 種類のエラー コードがサポートされています。
| エラー コード | 説明 |
|---|---|
| 403 | アクセスの制限 |
| 502 | ゲートウェイのエラー |
| 503 | Service unavailable (サービス利用不可) |
よく寄せられる質問
- エラー ページをアップロードしましたが、エラーがトリガーされたときに表示されないのはなぜですか?
カスタム エラー ページは、フロントエンドエラーからトリガーされます。 エラーがアプリ レベルから発生した場合、構成済みのエラー ページはトリガーまたは表示されません。 すべての要求のエラー ページを表示する場合は、構成されたエラー コードの下にある [すべての要求に適用 ] チェック ボックスをオンにします。 失敗した場所に関係なく、状態コードと一致するすべての要求のエラー ページが表示されます。 このボックスをオンにすると、アプリ用に構成されている既存のエラー ページがオーバーライドされることに注意してください。
- エラー ページ機能がグレー表示されるのはなぜですか?
エラー ページは現時点では Premium 機能です。 この機能を有効にするには、少なくとも Premium SKU を使用する必要があります。
- 複数のアプリで 1 つのエラー ページを参照するにはどうすればよいですか?
複数のアプリで同じエラー ページを使用する必要がある場合は、アップロードした html ファイルのストレージ アカウントでホストされているエラー ページにリンクできます。 エラー ページを ストレージ アカウント にアップロードし、アプリにアップロードされた html ファイルにある <iframe> タグにページの指定されたストレージ URL を追加します。