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

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

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

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

・バージョン

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

$ terraform providers -version

Terraform v1.4.2

on linux_amd64

+ provider registry.terraform.io/hashicorp/aws v4.67.0

ゴール
方針
実装
動作確認
参考記事

ゴール

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

ことをゴールとします。

現状は

となっています。

設定後は

を表示させます

方針

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

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

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

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

カスタムエラーレスポンスの生成 - Amazon CloudFront

リクエストされたコンテンツを CloudFront が配信ができない場合の、カスタムエラーレスポンスを生成します。

実装

エラーページ

・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>

<!DOCTYPE html>

<head>

<title>Error</title>

</head>

<body>

</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

// 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"
  }
}

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

1 2	$ terraform plan $ terraform apply -auto-approve

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

動作確認

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

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

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

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

【CloudFront】オリジンのS3にないオブジェクトにアクセスしたら404を返したい

CloudFrontのオリジンであるS3にないオブジェクトへのリクエストに403が返ってきます。 // S3に noobject というフォルダはない $ curl -I のドメイン>/noobject HTTP/2 4...

参考記事

カスタムエラーレスポンスの生成 - Amazon CloudFront

リクエストされたコンテンツを CloudFront が配信ができない場合の、カスタムエラーレスポンスを生成します。

Terraform Registry

Help with defining custom_error_responses · Issue #40 · cloudposse/terraform-aws-cloudfront-s3-cdn

Hello Gents, I am struggling with defining custom_error_responses using your module. Can you please guide how to create custom error response with values kept i...