【AWS×Webアプリ】CloudFront＋S3静的Webサイトホスティング（Terraform）

目的

・AWS上の静的Webサイトホスティングを有効にしたS3をCloudFrontで公開。
・OAC（OriginAccessControl）を使用したアクセス制限。

前提条件

・Terraformを使用してAWS上にリソースを作成する。
・作成する内容は以下と同様

TFファイル

aws_s3.tf（前回からの修正箇所のみ抜粋）

data "aws_iam_policy_document" "allow_access_to_WebBucket" {
  statement {
    principals {
      type        = "Service"
      identifiers = ["cloudfront.amazonaws.com"]
    }

    effect = "Allow"
    actions = ["s3:GetObject"]
    resources = ["${aws_s3_bucket.WebBucket.arn}/*"]

    condition {
      test     = "StringEquals"
      variable = "aws:SourceArn"
      values   = [aws_cloudfront_distribution.WebBucketDistribution.arn]
    }
  }
}

aws_cloudfront.tf

resource "aws_cloudfront_distribution" "WebBucketDistribution" {
  enabled = true
  default_root_object = "index.html"
  price_class = "PriceClass_200"

  origin {
    origin_id                = "WebBucketOrigin"
    domain_name              = aws_s3_bucket.WebBucket.bucket_regional_domain_name
    origin_access_control_id = aws_cloudfront_origin_access_control.WebBucketOriginAccessControl.id
  }

  viewer_certificate {
    cloudfront_default_certificate = true
  }

  default_cache_behavior {
    target_origin_id       = "WebBucketOrigin"
    viewer_protocol_policy = "redirect-to-https"
    compress = true
    cached_methods         = ["GET", "HEAD"]
    allowed_methods        = ["GET", "HEAD"]

    cache_policy_id = aws_cloudfront_cache_policy.WebBucketCachePolicy.id
    origin_request_policy_id = aws_cloudfront_origin_request_policy.WebBucketOriginRequestPolicy.id
  }

  restrictions {
    geo_restriction {
      restriction_type = "none"
    }
  }
}

resource "aws_cloudfront_origin_access_control" "WebBucketOriginAccessControl" {
  name                              = "terraform-OAC-${data.aws_caller_identity.self.account_id}"
  origin_access_control_origin_type = "s3"
  signing_behavior                  = "always"
  signing_protocol                  = "sigv4"
}

resource "aws_cloudfront_cache_policy" "WebBucketCachePolicy" {
  name = "WebBucketCachePolicy"
  default_ttl = 86400
  max_ttl     = 31536000
  min_ttl     = 3600

  parameters_in_cache_key_and_forwarded_to_origin {
    enable_accept_encoding_gzip = true
    enable_accept_encoding_brotli = true

    cookies_config {
      cookie_behavior = "none"
    }

    headers_config {
      header_behavior = "none"
    }

    query_strings_config {
      query_string_behavior = "none"
    }
  }
}

resource "aws_cloudfront_origin_request_policy" "WebBucketOriginRequestPolicy" {
  name = "WebBucketOriginRequestPolicy"

  cookies_config {
    cookie_behavior = "none"
  }

  headers_config {
    header_behavior = "none"
  }

  query_strings_config {
    query_string_behavior = "none"
  }
}

◆aws_s3.tf
・allow_access_to_WebBucket：CloudFront経由のアクセスのみ許可

◆aws_cloudfront.tf
・WebBucketDistribution：CloudFrontディストリビューション
　a. restrictions：配信地域の制御（設定なし：geo_restriction {restriction_type = "none"}）
　b. viewer_certificate：SSL設定
（CloudFrontのドメインを使用：cloudfront_default_certificate = true）
・WebBucketOriginAccessControl：OAC
・WebBucketCachePolicy：キャッシュポリシー
・WebBucketOriginRequestPolicy：オリジンリクエストポリシー

動作確認

①Webサイトへアクセス（S3）
・アクセスできないことを確認

②Webサイトへアクセス（CloudFront）
・正常にアクセスできることを確認

参考（前回記事）