カスタムエラーページの作成

最終更新日 2022-04-07

Fastly が配信するデフォルトのエラーレスポンスは、特に消費者向けのアプリのユーザーに不快感を与えてしまう場合があります。これを回避するには、Fastly がオリジンからエラーコードを受けた場合、カスタムページまたはシンセティックレスポンスを表示するように設定することができます。

Fastly には、コントロールパネルで直接404および503のエラーページを簡単に作成できる2つの設定オプションがありますが、他のステータスコードのカスタムエラーページを作成することもできます。エラーページを作成する際に多数のコンテンツブロックを使用する代わりに、VCL スニペットを使ってカスタムレスポンスを作成することをご検討ください。

ヒント

オリジンサーバーに問題が発生した場合、Fastly はエラーメッセージの代わりにオプションで失効済みコンテンツを配信することができます。詳細については、失効済みコンテンツの配信に関するガイドを確認してください。

404および503エラー向けのエラーページを作成する

404および503エラーのカスタムエラーページを作成するには、以下の手順に従ってください。

Fastly コントロールパネルにログインします。
Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
Edit configuration をクリックし、アクティブなバージョンをクローンするオプションを選択します。
Content をクリックします。
404および503エラーのカスタムエラーページを作成するには、404 page および 503 page のスイッチをクリックします。
HTML response フィールドで、404および503エラーページのレスポンスをカスタマイズします。
Save をクリックしてレスポンスを保存します。
Activate をクリックして設定への変更をデプロイします。

その他のステータスコード向けのエラーページを作成する

他の HTTP ステータスコードのエラーページを作成することもできます。HTML の例を提供しますが、目的に適合する HTML を利用することができます。レスポンスオブジェクトでは、カスタムエラーページを表示するために条件を使用する必要があります。使用しない場合は、一般的なエラーページを表示します。

404または503以外の HTTP ステータスコードのエラーページを作成・設定するには、以下の手順に従い、Fastly のコントロールパネルを使用してカスタムレスポンスと、それが適用される条件を作成してください。

Fastly コントロールパネルにログインします。
Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
Edit configuration をクリックし、アクティブなバージョンをクローンするオプションを選択します。
Content をクリックします。
Set up advanced response をクリックします。
以下の要領で Create a synthetic response ページの各フィールドに入力します。
- Name フィールドに、作成するレスポンスの名前 (Custom 404 など) を入力します。
- Status メニューから適切なステータス (例:404 Not Found ) を選択します。
- MIME Type フィールドでは、レスポンスの Content-Type (text/html など) を指定します。
- Response フィールドに、レスポンスを配信する際のコンテンツを入力します。
Create をクリックします。
新しいレスポンス名の右側にある Attach a condition リンクをクリックします。
以下の要領で Create a new condition 設定画面の各フィールドに入力します。
- Type メニューから、作成する条件のタイプ (例:Cache ) を選択します。
- Name フィールドに、作成している条件の名前を入力します (例: 404 Not Found)。
- Apply if フィールドに、新しいレスポンスが発生する条件を以下の形式で入力します。
```
beresp.status == ###
```
  ここで、### は、応答を作成するステータス条件と同じです。例えば、Apply if フィールドに beresp.status == 404 の値を使用すると、オリジンサーバーが404ステータスを返すたびにこのレスポンスオブジェクトを使用するように Fastly に指示します。(条件の詳細については、条件ガイドをご参照ください。)
Save and apply to をクリックします。
Activate をクリックして設定への変更をデプロイします。 Fastly は、必要に応じてカスタム HTML エラーページを表示するようになりました。

VCL スニペットを使用したカスタム応答の作成

VCL スニペットを使用してカスタムレスポンスを作成するには、スニペットを2つ作成します。1つ目は、内部 Fastly エラーの条件をトリガーし、2つ目は、エラーへのレスポンスを作成します。

条件用の VCL スニペットを作成する

Fastly コントロールパネルにログインします。
Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
Edit configuration をクリックし、アクティブなバージョンをクローンするオプションを選択します。
VCL Snippets をクリックします。
Create Snippet をクリックします。
Name フィールドに、適切な名前 (例: Catch Error for Custom Response) を入力します。
Type のセクションで within subroutine を選択します。
Select subroutine メニューから、fetch (vcl_fetch) を選択します。
VCL フィールドに、以下の条件を追加します。
```
1
2
3
```
```
if (beresp.status == ###) {
  error 600 "### Custom Response"
}
```
ここで ### には、レスポンスを作成しているステータスの条件を入力します。ここで使用されるエラーコード 600 は、標準の HTTP エラーコードと一致しない乱数です。混乱を避けるために、600または700台のカスタムエラーコード番号を使用することをお勧めします。
Create をクリックしてスニペットを作成します。

シンセティックレスポンスの VCL スニペットを作成する

VCL Snippets をクリックします。
Create Snippet をクリックします。
Name フィールドに、適切な名前 (例: Create Custom Response Synthetic) を入力します。
Type のセクションで within subroutine を選択します。
Select subroutine メニューから、error (vcl_error) を選択します。
VCL フィールドに、以下の条件を追加します。
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
```
```
if (obj.status == 600) {
  set obj.status = 404;
  set obj.response = "Not Found";
  synthetic {"
    <html>
      <head>
      </head>
      <body>
        <h1>Custom Response</h1>
      </body>
    </html>
  "};
  return(deliver);
}
```
Custom Response をカスタムなシンセティックレスポンスに置き換えて下さい。この VCL は、オブジェクトのリクエストが vcl_fetch で作成された条件に該当した場合、カスタムレスポンスでレスポンスとして返答するように指示します。
注意
シンセティックレスポンスには文字数の制限はありませんが、シンセティックレスポンスをカスタム VCL ファイルに含む場合、ファイルのサイズ制限を超えてしまう可能性があります。
Create をクリックしてスニペットを作成します。
Activate をクリックして設定への変更をデプロイします。

翻訳についての注意事項

このフォームを使用して機密性の高い情報を送信しないでください。サポートが必要な場合は、サポートチームまでご連絡ください。このフォームは reCAPTCHA によって保護されており、Google のプライバシーポリシーと利用規約が適用されます。

Network services

Security

Compute

Quick start

Building blocks

Integrations

Tutorials

Demos

Use Cases

Code Examples

Starter Kits