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

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

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

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

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

  1. Fastly コントロールパネルにログインします。
  2. Home ページから、適切なサービスを選択します。検索ボックスで 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. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインでの検索が行えます。
  3. Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。ドメインページが表示されます。
  4. Content をクリックします。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 リンクをクリックします。 Create a new condition ウィンドウが表示されます。

    New Condition ウィンドウ

  9. 以下の要領で Create a new condition 設定画面の各フィールドに入力します。
    • Type メニューから、作成する条件のタイプ (例:Cache) を選択します。
    • Name フィールドに、作成している条件の名前を入力します (例:404 Not Found)。
    • Apply if フィールドに、新しいレスポンスが発生する条件を以下の形式で入力します。

      beresp.status == ###

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

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

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

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

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

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

    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 スニペットのリンクをクリックします。VCL スニペットのページが表示されます。
  2. Create Snippet をクリックします。Create a VCL スニペットページが表示されます。

    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