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

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

Fastly では、コントロールパネルにて直接 404・503のエラーページ を簡単に作成できる2つの設定オプションを提供していますが、その他のステータスコードのエラーページ を作成することも可能です。エラーページを構成する際に大量のコンテンツブロックを処理する代わりに、VCL スニペット を使用してカスタムレスポンスを作成することもできます。

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

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

  1. Fastly コントロールパネルにログインします。
  2. All services ページから、該当するサービスを選択します。検索ボックスを使用して ID、名前、またはドメインで検索することができます。
  3. Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。ドメインページが表示されます。
  4. Content をクリックします。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. All services ページから、該当するサービスを選択します。検索ボックスを使用して ID、名前、またはドメインで検索することができます。
  3. Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。ドメインページが表示されます。
  4. Content をクリックします。Content ページが表示されます。
  5. Set up advanced response ボタンをクリックします。Create a synthetic 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 リンクをクリックします。Create a new 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に指示します。(条件の詳細については、条件ガイド を参照してください)。

  10. Save and apply to ボタンをクリックします。作成された条件は、先ほど作成したカスタムレスポンスオブジェクトに適用されます。
  11. Activate ボタンをクリックして設定変更をデプロイします。 これで、必要に応じて Fastly がカスタム HTML エラーページを配信するように設定できました。

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

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

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

  1. Fastly コントロールパネルにログインします。
  2. All services ページから、該当するサービスを選択します。検索ボックスを使用して ID、名前、またはドメインで検索することができます。
  3. Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。ドメインページが表示されます。
  4. VCL Snippets リンクをクリックします。VCL Snippets ページが表示されます。
  5. Create Snippet をクリックします。Create a VCL snippet ページが表示されます。

    VCL Snippet 条件

  6. Name フィールドに、適切な名前 (例:Catch Error for Custom Response) を入力します。
  7. Type にて、within subroutine を選択します。
  8. Select subroutine メニューから、fetch (vcl_fetch) を選択して下さい。
  9. VCL フィールドに、以下の条件を追加します。

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

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

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

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

  1. VCL Snippets リンクをクリックします。VCL Snippets ページが表示されます。
  2. Create Snippet をクリックします。Create a VCL snippet ページが表示されます。

    vcl snippet エラーメッセージ

  3. Name フィールドに、適切な名前 (例:Create Custom Response Synthetic) を入力します。
  4. Type にて、within subroutine を選択します。
  5. Select subroutine メニューから、error (vcl_error) を選択して下さい。
  6. 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 で作成された条件に該当した場合、カスタムレスポンスでレスポンスとして返答するように指示します。

  7. Create をクリックしてスニペットを作成します。
  8. Activate ボタンをクリックして設定変更をデプロイします。
Back to Top