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

  最終更新日 2022-04-07

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

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

ヒント

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

404・503エラーページを作成する

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

  1. Fastly コントロールパネルにログインします。
  2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
  3. Edit configuration をクリックし、アクティブなバージョンをクローンするオプションを選択します。
  4. Content をクリックします。

  5. 404および503エラーのカスタムエラーページを作成するには、404 page および 503 page のスイッチをクリックします。

    404および503エラー クイック設定フィールド

  6. HTML response フィールドで、404および503エラーページのレスポンスをカスタマイズします。

  7. Save をクリックしてレスポンスを保存します。

  8. Activate をクリックして設定への変更をデプロイします。

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

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

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

  1. Fastly コントロールパネルにログインします。
  2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
  3. Edit configuration をクリックし、アクティブなバージョンをクローンするオプションを選択します。
  4. Content をクリックします。

  5. Set up advanced response をクリックします。

    Create a synthetic response ページ

  6. 以下の要領で Create a synthetic response ページの各フィールドに入力します。

    • Name フィールドに、作成するレスポンスの名前 (Custom 404 など) を入力します。
    • Status メニューから適切なステータス (例：404 Not Found) を選択します。
    • MIME Type フィールドでは、レスポンスの Content-Type (text/html など) を指定します。
    • Response フィールドに、レスポンスを届ける際のコンテンツを入力します。

  7. Create をクリックします。

  8. 新しいレスポンス名の右側にある Attach a condition リンクをクリックします。

    New Condition ウィンドウ

  9. 以下の要領でCreate a new condition設定画面の各フィールドに入力します。

    • Type メニューから、作成する条件のタイプ (例：Cache) を選択します。
    • Name フィールドに、作成している条件の名前を入力します (例：404 Not Found)。
    • Apply if フィールドに、新しいレスポンスが発生する条件を以下の形式で入力します。

    beresp.status == ###

ここにある ### は、レスポンスを作成するステータス条件と同じです。例えば、Apply if フィールドに beresp.status == 404 の値を使用すると、オリジンサーバーが404ステータスを返すたびにこの応答オブジェクトを使用するように Fastly に指示します。（条件の詳細については、条件ガイドをご参照ください。）

  1. Save and apply to をクリックします。
  2. Activate をクリックして設定への変更をデプロイします。 Fastly は、必要に応じてカスタム HTML エラーページを表示するようになりました。

VCL スニペットを使用するカスタムレスポンスを作成する

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

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

  1. Fastly コントロールパネルにログインします。
  2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
  3. Edit configuration をクリックし、アクティブなバージョンをクローンするオプションを選択します。

  4. VCL Snippets をクリックします。

  5. Create Snippet をクリックします。

    VCL Snippet 条件

  6. Name フィールドに、適切な名前 (例：Catch Error for Custom Response) を入力します。

  7. Type のセクションで within subroutine を選択します。

  8. Select subroutine メニューから、fetch (vcl_fetch) を選択します。

  9. VCL フィールドに、以下の条件を追加します:

    1if (beresp.status == ###) {
    2  error 600 "### Custom Response"
    3}

### は、レスポンスを作成するステータスの条件です。ここで使用されるエラーコード 600 は、標準の HTTP エラーコードと一致しない乱数です。混乱を避けるために、600または700台のカスタムエラーコード番号を使用することをお勧めします。

  1. Create をクリックしてスニペットを作成します。

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

  1. VCL Snippets をクリックします。

  2. Create Snippet をクリックします。

    vcl snippet エラーメッセージ

  3. Name フィールドに、適切な名前 (例：Create Custom Response Synthetic) を入力します。

  4. Type のセクションで within subroutine を選択します。

  5. Select subroutine メニューから、error (vcl_error) を選択して下さい。

  6. VCL フィールドに、以下の条件を追加します:

    1if (obj.status == 600) {
    2  set obj.status = 404;
    3  set obj.response = "Not Found";
    4  synthetic {"
    5    <html>
    6      <head>
    7      </head>
    8      <body>
    9        <h1>Custom Response</h1>
    10      </body>
    11    </html>
    12  "};
    13  return(deliver);
    14}

Custom Response をカスタムなシンセティックレスポンスに置き換えて下さい。この VCL は、オブジェクトのリクエストが vcl_fetch で作成された条件に該当した場合、カスタムレスポンスでレスポンスとして返答するように指示します。

注意

シンセティックレスポンスには文字数の制限はありませんが、シンセティックレスポンスをカスタム VCL ファイルに含む場合、ファイルのサイズ制限を超えてしまう場合があります。

  1. Create をクリックしてスニペットを作成します。
  2. Activate をクリックして設定への変更をデプロイします。

翻訳についての注意事項
このガイドは役に立ちましたか？

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

Fastly
© Fastly 2023