<div id="readability-page-1" class="page"><div><p data-ke-size="size16">CloudFront에서 Distribution을 생성할 때 Origin domain으로 S3 버킷을 지정하는 경우 아래와 같은 화면이 나옵니다. bucket endpoint를 쓰지 말고 website endpoint를 사용하라는 건데요. Origin domain 목록에 website endpoint는 노출되지 않기 때문에 "Use website endpoint" 버튼을 클릭해 줘야 s3 가 s3-website로 변경됩니다. 버튼을 클릭하는 경우 상세 설정의 종류가 변경되기 때문에 무시할 수 없습니다. 더욱이 S3 website endpoint를 추천한다는데 써야겠죠 (...)</p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="908" data-origin-height="534"><span data-url="https://blog.kakaocdn.net/dn/3QlhK/btsFoC5vwxa/ZlR2b1Je0hkEyyvuPTauXk/img.png" data-lightbox="lightbox" data-alt="CloudFront Distributions 메뉴"><img src="https://blog.kakaocdn.net/dn/3QlhK/btsFoC5vwxa/ZlR2b1Je0hkEyyvuPTauXk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="908" data-origin-height="534"></span><figcaption>CloudFront Distributions 메뉴</figcaption>
</figure>


<p data-ke-size="size16">테라폼으로 배포할 때 위에 버튼을 클릭하지 못하니 어떻게 처리해야 하나 한참을 끙끙댔습니다. 일단 S3 website endpoint는 아래와 같이 얻을 수 있습니다.</p>
<pre id="code_1709044744041" data-ke-language="bash" data-ke-type="codeblock"><code>output "website_endpoint" {
  value = aws_s3_bucket_website_configuration.this.website_endpoint
}</code></pre>

<p data-ke-size="size16">이렇게 얻은 값을 origin에 있는 domain_name에 무작정 넣어주면 아래와 같은 오류가 발생하거든요. 유효한 주소가 아니라는 겁니다. 위에서 본 것처럼 콘솔에도 s3-website는 보이지 않거든요.</p>
<blockquote data-ke-style="style2">│ Error: updating CloudFront Distribution (E3P8MQ1IAI4FZ6): InvalidArgument: The parameter Origin DomainName does not refer to a valid S3 bucket. <br>│ status code: 400, request id: d834c900-a0d0-4c94-9001-517fc340c97d</blockquote>

<p data-ke-size="size16">몇 시간을 뒤적거린 끝에 답을 알았는데 황당하게도 <b>custom_origin_config 설정</b>을 넣어줘야 했습니다. 공식문서의 코드 예제를 보면 아래와 같습니다. ( aws_cloudfront_distribution 리소스 내용 전체를 가져와서 좀 깁니다 )</p>
<pre id="code_1709043948714" data-ke-language="bash" data-ke-type="codeblock"><code>resource "aws_cloudfront_distribution" "s3_distribution" {
  origin {
    domain_name              = aws_s3_bucket.b.bucket_regional_domain_name
    origin_access_control_id = aws_cloudfront_origin_access_control.default.id
    origin_id                = local.s3_origin_id
  }

  enabled             = true
  is_ipv6_enabled     = true
  comment             = "Some comment"
  default_root_object = "index.html"

  logging_config {
    include_cookies = false
    bucket          = "mylogs.s3.amazonaws.com"
    prefix          = "myprefix"
  }

  aliases = ["mysite.example.com", "yoursite.example.com"]

  default_cache_behavior {
    allowed_methods  = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = local.s3_origin_id

    forwarded_values {
      query_string = false

      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "allow-all"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }

  # Cache behavior with precedence 0
  ordered_cache_behavior {
    path_pattern     = "/content/immutable/*"
    allowed_methods  = ["GET", "HEAD", "OPTIONS"]
    cached_methods   = ["GET", "HEAD", "OPTIONS"]
    target_origin_id = local.s3_origin_id

    forwarded_values {
      query_string = false
      headers      = ["Origin"]

      cookies {
        forward = "none"
      }
    }

    min_ttl                = 0
    default_ttl            = 86400
    max_ttl                = 31536000
    compress               = true
    viewer_protocol_policy = "redirect-to-https"
  }

  # Cache behavior with precedence 1
  ordered_cache_behavior {
    path_pattern     = "/content/*"
    allowed_methods  = ["GET", "HEAD", "OPTIONS"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = local.s3_origin_id

    forwarded_values {
      query_string = false

      cookies {
        forward = "none"
      }
    }

    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
    compress               = true
    viewer_protocol_policy = "redirect-to-https"
  }

  price_class = "PriceClass_200"

  restrictions {
    geo_restriction {
      restriction_type = "whitelist"
      locations        = ["US", "CA", "GB", "DE"]
    }
  }

  tags = {
    Environment = "production"
  }

  viewer_certificate {
    cloudfront_default_certificate = true
  }
}</code></pre>

<p data-ke-size="size16"><b>custom_origin_config</b>는 aws_cloudfront_distribution 시작 부분에 있는 origin에 들어가는 설정 값입니다. custom_origin_config를 넣어주면 아래와 같이 됩니다. 관련 없는 코드는 제외시켰습니다.</p>
<pre id="code_1709044074336" data-ke-language="bash" data-ke-type="codeblock"><code>resource "aws_cloudfront_distribution" "s3_distribution" {
  origin {
    domain_name              = aws_s3_bucket.b.bucket_regional_domain_name
    origin_access_control_id = aws_cloudfront_origin_access_control.default.id
    origin_id                = local.s3_origin_id
    custom_origin_config {
      http_port              = 80
      https_port             = 443
      origin_protocol_policy = "http-only"
      origin_ssl_protocols   = ["TLSv1", "TLSv1.1", "TLSv1.2"]
    }
  }

  enabled             = true
  is_ipv6_enabled     = true
  comment             = "Some comment"
  default_root_object = "index.html"
  ...
}</code></pre>

<p data-ke-size="size16">이 상태로 terraform apply를 통해 코드를 배포하면 정상적으로 s3-website로 도메인이 설정되는 것을 확인할 수 있습니다. 저와 같은 문제를 겪으시는 분들께 도움이 되시길 바랍니다 :-)&nbsp;</p></div></div>

컴맹 : 진화의 시작

CloudFront에서 Distribution을 생성할 때 Origin domain으로 S3 버킷을 지정하는 경우 아래와 같은 화면이 나옵니다. bucket endpoint를 쓰지 말고 website endpoint를 사용하라는 건데요. Origin domain 목록에 website endpoint는 노출되지 않기 때문에 "Use website endpoint" 버튼을 클릭해 줘야 s3 가 s3-website로 변경됩니다. 버튼을 클릭하는 경우 상세 설정의 종류가 변경되기 때문에 무시할 수 없습니다. 더욱이 S3 website endpoint를 추천한다는데 써야겠죠 (...)
 
테라폼으로 배포할 때 위에 버튼을 클릭하지 못하니 어떻게 처리해야 하나 한참을 끙끙댔습니다. 일단 S3 website endpoint는 아래와 같이 얻을 수 있습니다.
output "website_endpoint" {
  value = aws_s3_bucket_website_configuration.this.website_endpoint
}
 
이렇게 얻은 값을 origin에 있는 domain_name에 무작정 넣어주면 아래와 같은 오류가 발생하거든요. 유효한 주소가 아니라는 겁니다. 위에서 본 것처럼 콘솔에도 s3-website는 보이지 않거든요.
│ Error: updating CloudFront Distribution (E3P8MQ1IAI4FZ6): InvalidArgument: The parameter Origin DomainName does not refer to a valid S3 bucket. 
│ status code: 400, request id: d834c900-a0d0-4c94-9001-517fc340c97d
 
몇 시간을 뒤적거린 끝에 답을 알았는데 황당하게도 custom_origin_config 설정을 넣어줘야 했습니다. 공식문서의 코드 예제를 보면 아래와 같습니다. ( aws_cloudfront_distribution 리소스 내용 전체를 가져와서 좀 깁니다 )
resource "aws_cloudfront_distribution" "s3_distribution" {
  origin {
    domain_name              = aws_s3_bucket.b.bucket_regional_domain_name
    origin_access_control_id = aws_cloudfront_origin_access_control.default.id
    origin_id                = local.s3_origin_id
  }
  enabled             = true
  is_ipv6_enabled     = true
  comment             = "Some comment"
  default_root_object = "index.html"
  logging_config {
    include_cookies = false
    bucket          = "mylogs.s3.amazonaws.com"
    prefix          = "myprefix"
  }
  aliases = ["mysite.example.com", "yoursite.example.com"]
  default_cache_behavior {
    allowed_methods  = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = local.s3_origin_id
    forwarded_values {
      query_string = false
      cookies {
        forward = "none"
      }
    }
    viewer_protocol_policy = "allow-all"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }
  # Cache behavior with precedence 0
  ordered_cache_behavior {
    path_pattern     = "/content/immutable/*"
    allowed_methods  = ["GET", "HEAD", "OPTIONS"]
    cached_methods   = ["GET", "HEAD", "OPTIONS"]
    target_origin_id = local.s3_origin_id
    forwarded_values {
      query_string = false
      headers      = ["Origin"]
      cookies {
        forward = "none"
      }
    }
    min_ttl                = 0
    default_ttl            = 86400
    max_ttl                = 31536000
    compress               = true
    viewer_protocol_policy = "redirect-to-https"
  }
  # Cache behavior with precedence 1
  ordered_cache_behavior {
    path_pattern     = "/content/*"
    allowed_methods  = ["GET", "HEAD", "OPTIONS"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = local.s3_origin_id
    forwarded_values {
      query_string = false
      cookies {
        forward = "none"
      }
    }
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
    compress               = true
    viewer_protocol_policy = "redirect-to-https"
  }
  price_class = "PriceClass_200"
  restrictions {
    geo_restriction {
      restriction_type = "whitelist"
      locations        = ["US", "CA", "GB", "DE"]
    }
  }
  tags = {
    Environment = "production"
  }
  viewer_certificate {
    cloudfront_default_certificate = true
  }
}
 
custom_origin_config는 aws_cloudfront_distribution 시작 부분에 있는 origin에 들어가는 설정 값입니다. custom_origin_config를 넣어주면 아래와 같이 됩니다. 관련 없는 코드는 제외시켰습니다.
resource "aws_cloudfront_distribution" "s3_distribution" {
  origin {
    domain_name              = aws_s3_bucket.b.bucket_regional_domain_name
    origin_access_control_id = aws_cloudfront_origin_access_control.default.id
    origin_id                = local.s3_origin_id
    custom_origin_config {
      http_port              = 80
      https_port             = 443
      origin_protocol_policy = "http-only"
      origin_ssl_protocols   = ["TLSv1", "TLSv1.1", "TLSv1.2"]
    }
  }
  enabled             = true
  is_ipv6_enabled     = true
  comment             = "Some comment"
  default_root_object = "index.html"
  ...
}
 
이 상태로 terraform apply를 통해 코드를 배포하면 정상적으로 s3-website로 도메인이 설정되는 것을 확인할 수 있습니다. 저와 같은 문제를 겪으시는 분들께 도움이 되시길 바랍니다 :-)

[Terraform] CloudFront에서 website endpoint 사용

댓글