Zenn
🐍

【CloudFront】Terraformでカスタムエラーレスポンスを設定する

2025/01/03に公開
S3
Terraform
CloudFront
tech

CloudFront ＋ S3 の構成でエラーになったときに特定のページを表示させたーいーー！

ということで、エラーページを設定していきます

Terraformを使って設定していきます

・バージョン

$ terraform providers -version
Terraform v1.4.2
on linux_amd64
+ provider registry.terraform.io/hashicorp/aws v4.67.0

ゴール

404 エラーになったときに、エラーページを表示させる

ことをゴールとします。

現状は

となっています。

設定後は

を表示させます

方針

CloudFront にカスタムエラーレスポンスを設定すれば実装できます

特定のエラーコードに対して、

指定したエラーページやステータスコードを返すよう設定できます

公式ドキュメントはこちらです

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/GeneratingCustomErrorResponses.html

実装

エラーページ

・404.html (404 に対して表示させるページ)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Error</title>
  </head>
  <body>
    <h1>404.html</h1>
  </body>
</html>

S3 へアップロード

先ほど作成したエラーページを CloudFront のオリジンである S3 にアップロードします。

AWS CLI でアップロードしましたが、コンソールからアップロードしても大丈夫です！

// htmlのあるディレクトリに移動
error$ ll
total 0
drwxrwxrwx 1 ****** ****** 4096 Aug  2 22:52 ./
drwxrwxrwx 1 ****** ****** 4096 Aug  2 22:52 ../
-rwxrwxrwx 1 ****** ******  268 Aug  2 22:53 404.html*

// アップロード前のS3
error$ aws s3 ls s3://<アップロード先のS3バケット>/error/
// 何もないので表示されない

// htmlアップロード
error$ aws s3 cp 404.html s3://<アップロード先のS3バケット>/error/
upload: ./404.html to s3://<アップロード先のS3バケット>/error/404.html

// アップロード後の確認
error$ aws s3 ls s3://<アップロード先のS3バケット>/error/
2023-08-02 23:59:26        268 404.html

Terraform

resource "aws_cloudfront_distribution" "main" {
  ...

  # カスタムエラーレスポンス
  # 404エラー
  custom_error_response {
    error_caching_min_ttl = 3600
    error_code            = 404
    response_code         = 404
    response_page_path    = "/error/404.html"
  }
}

aws_cloudfront_distribution 内の custom_error_response ブロックで定義します

プロパティ 説明
error_caching_min_ttl エラーページのキャッシュを保持する時間
error_code 設定したいエラーコード
response_code ブラウザへ返すレスポンスコード
response_page_path エラーページのパス

※ は必須項目

plan , apply

$ terraform plan
$ terraform apply -auto-approve

ダウンタイムはなかったと思います。。。

動作確認

https://<CloudFront のドメイン>/<S3 にないフォルダ名>/

にアクセスして、↓ が表示されれば OK です！

もし表示されない場合は、403 が返ってきている可能性があります。

下記を参考に404 が返ってくるように設定してみてください

https://zenn.dev/kuuki/articles/aws-cloudfront-s3-response-404-error/

参考記事

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/GeneratingCustomErrorResponses.html

https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/cloudfront_distribution

https://github.com/cloudposse/terraform-aws-cloudfront-s3-cdn/issues/40

Discussion