【CloudFront】エラーページを設定する方法

こんにちは。
今回は、CloudFrontで配信しているサイトにおいて、存在しないページをリクエストした場合に、用意したエラーページを表示する設定を紹介します。

エラー画面を用意しておき、システム上の不具合ではなく想定内のエラーだと知らせることも、ユーザ体験の観点からも非常に重要となります。
本ブログの手順では、ユーザーが誤ったURLを叩いた際に、あらかじめ用意したエラー画面を表示していきます。

エラーページの実装手順

ユーザが誤ったURLでリクエストした際に、下図のような用意したエラーページを表示するのをゴールとして、実装していきます。 error-page-sample

あらかじめ表示させたい404ページ（HTMLファイルなど）等を作成しておき、ホストサーバーに配置しておきます。
なお、配置したエラーページの階層・パスをメモしておいてください。
のちほどの設定で使用します。

CloudFront側の「カスタムエラーレスポンス」を設定していきます。
カスタムエラーレスポンスを設定することにより、ユーザが発したエラーコードに対応するエラーページを設定できます。

ユーザが間違ったURLを叩いた場合（404）、404のエラーページを表示するように設定を行います。

該当のディストリビューションを選択し、「エラーページ」「カスタムエラーレスポンスを作成」をクリック。 create-custom-err-response

詳細設定を行います。

edit-custom-err-response

設定項目	内容・定義	設定する値
HTTP error code	どのエラーコードに対してか	404 ※場合により403
Error caching minimum TTL	エラー画面をキャッシュしておく時間コストの観点から、大きめの時間推奨	デフォルト 10秒
Customize error response	用意したエラーレスポンスを使用するか	Yes
Response page path	用意したエラーページのパス	/404.html
HTTP Response code	ユーザーに返すエラーコード	404 ※場合により403

以上の詳細設定が終わると、「エラーページ」に一行作成されるはずです。
「404」に関するレスポンスルールが作成されればOK。
これにより、用意したエラーページの表示が可能となります。

done-custom-err-response

AWS CloudFront + S3（OAC - Origin Access Control）構成の場合、存在しないページにアクセスした際、404ではなく403 - Forbiddenが返ってきます。

403-error

これは、存在しないページにアクセスする場合、オリジンのS3側で「権限がない場所へのアクセス」と判断されるためです。

したがって、この構成でエラーページを表示させたい場合は、設定画面で HTTP error code：403 に対して、カスタムエラーレスポンスを定義する必要があります。

今回は、ユーザが誤ったURLをリクエストした場合に、用意したエラーページを表示するように設定しました。
Cloudfront上のカスタムエラーレスポンス上で、短時間で簡単に実装が可能なので、時間のあるタイミングに導入してみるのはアリです。

それでは。