はじめに

AWS CloudFront を利用する際、403 や 404 エラーが発生したときにカスタムエラーページを表示したい場合があります。

本記事では、Terraform を使って CloudFront のカスタムエラーレスポンスを設定する方法を解説します。

実際に使っているコード
現在、コードの記述量が想定より多くなっているため、今後はファイルの分割などを検討する予定です。

なぜ Terraform を使うのか？

以前は、AWS マネジメントコンソールを使って手動でエラーページを設定していました。しかし、手動の設定には以下のような問題がありました。

設定を変更するたびに AWS マネジメントコンソールにログインする必要がある。
同じ設定を複数の環境（開発・ステージング・本番）に適用するのが面倒。
設定ミスや変更履歴の管理が難しい。

Terraform を使えば、コードとしてインフラの設定を管理できるため、

一度定義すれば、同じ設定を簡単に適用可能。
設定の変更をバージョン管理し、履歴を追える。
ミスを減らし、管理を効率化できる。

といったメリットが得られます。

CloudFront のカスタムエラーレスポンスとは？

CloudFront では、S3 バケットや他のオリジンが 403 Forbidden や 404 Not Found を返した際に、別のページ（例えば index.html）を表示するように設定できます。これにより、静的サイトでエラーページを一貫したデザインで提供できます。

Terraform の設定方法

Terraform の aws_cloudfront_distribution リソース内で custom_error_response ブロックを追加することで、CloudFront にカスタムエラーページを設定できます。

カスタムエラーレスポンスの追加

以下のコードを CloudFront の Terraform 設定に追加してください。

  # カスタムエラーレスポンスの設定
  custom_error_response {
    error_code            = 403
    response_page_path    = "/index.html"
    response_code         = 200
    error_caching_min_ttl = 10
  }

  custom_error_response {
    error_code            = 404
    response_page_path    = "/index.html"
    response_code         = 200
    error_caching_min_ttl = 10
  }

各パラメータの説明

パラメータ	説明
`error_code`	CloudFront で処理するエラーコード（403, 404 など）
`response_page_path`	エラー時に表示するページのパス（例：`/index.html`）
`response_code`	CloudFront がクライアントに返す HTTP ステータスコード（200 に設定すると通常のページとして扱われる）
`error_caching_min_ttl`	エラーのキャッシュ時間（秒単位、10 秒に設定）

適用方法

Terraform のコードを修正し、CloudFront に custom_error_response を追加。
terraform apply を実行して変更を適用。
CloudFront のキャッシュをクリア（invalidate）して変更を反映。

terraform apply

キャッシュクリアを行う場合は、AWS CLI で以下のコマンドを実行してください。

aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

まとめ

Terraform を使用して AWS CloudFront のカスタムエラーレスポンスを設定する方法を紹介しました。403 や 404 エラーが発生した際に index.html を表示することで、よりユーザーフレンドリーなエクスペリエンスを提供できます。

Terraform を活用すれば、インフラのコード管理が容易になり、再現性の高い環境を構築できます。

CloudFront のエラーページ設定を適用する際は、キャッシュのクリアも忘れずに行いましょう！