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

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

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

https://qiita.com/Haruki-N/items/c80e91d89ce9724d0fd8

## TFファイル
```terraform: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]
    }
  }
}
```

```terraform: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）
・アクセスできないことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637963/81a8959f-4789-75ec-ee7f-59ba06e3382e.png)

②Webサイトへアクセス（CloudFront）
・正常にアクセスできることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637963/ce755234-4e40-ca95-df61-721c06d8fcc8.png)

## 参考（前回記事）
https://qiita.com/Haruki-N/items/5bec472707b242f32cd5