Hugo + CloudFront + S3 + GitHub Actions でCI/CD付きブログサイトを構築してみる Part2-2 作成するリソースの確認 CloudFront

作成経緯

この続き。
参考サイトからcloudformationで作成している部分の要素をterraformに落とし込むため、確認を行う。
今回はCloudFrontを確認します。

この記事はそのメモやまとめです。
すでに設定済みの項目がいくつかある。
試行錯誤しながらやったので、手順として不要かもしれない。あくまでメモ用。

CloudFront

参考サイトのCFでは以下のような記載になっている。
今回もひと要素づつ分解して見ていく。

CloudFront

  CloudFrontDistribution:
    Type: "AWS::CloudFront::Distribution"
    Properties:
      DistributionConfig:
        PriceClass: PriceClass_All
        Origins:
          - DomainName: !Sub ${ProjectName}-${Environment}-${S3BucketName}-${AWS::AccountId}.s3.${AWS::Region}.amazonaws.com
            Id: !Sub "S3origin-${ProjectName}-${Environment}-${S3BucketName}-${AWS::AccountId}"
            S3OriginConfig:
              OriginAccessIdentity: !Sub "origin-access-identity/cloudfront/${CloudFrontOriginAccessIdentity}"
        DefaultRootObject: index.html
        DefaultCacheBehavior:
          TargetOriginId: !Sub "S3origin-${ProjectName}-${Environment}-${S3BucketName}-${AWS::AccountId}"
          Compress: true
          ViewerProtocolPolicy: redirect-to-https
          # CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6 # CachingOptimized
          CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad # CachingDisabled
          AllowedMethods:
            - GET
            - HEAD
          CachedMethods:
            - GET
            - HEAD
          ForwardedValues:
            Cookies:
              Forward: none
            QueryString: false

        Logging:
          Bucket: !GetAtt S3BucketLogs.DomainName
          IncludeCookies: false
        Aliases:
          - !Ref AliasName
        ViewerCertificate:
          SslSupportMethod: sni-only
          MinimumProtocolVersion: TLSv1.2_2021
          AcmCertificateArn: !Sub "arn:aws:acm:us-east-1:${AWS::AccountId}:certificate/${CertificateId}"
        HttpVersion: http2
        IPV6Enabled: true
        Enabled: true
  # OAI
  CloudFrontOriginAccessIdentity:
    Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
    Properties:
      CloudFrontOriginAccessIdentityConfig:
        Comment: Unique Domain Hosting Environment

そもそもCloudFrontってなんだ？

AWS認定の試験対策として何度か学習はしているが仕事でも自分が触れる機会がなく、実際に触っていなかったのでCDNなんだな～とある程度の機能しか把握していなかったので、今一度AWS公式ドキュメントを読んで理解する。

しっかりと読んでわかったこと。

• CloudFrontを作成するのではなく、CloudFront ディストリビューションを作成して、コンテンツを配信する場所と、コンテンツ配信の追跡と管理の方法の詳細を CloudFront に指示する

つまり今回作成するのはCloudFront ディストリビューションということになる。
概要欄にCloudFront ディストリビューションを構成する要素が書いてあったのでこれを記載すればいいと思う。

大まかな要素の把握。

  CloudFrontDistribution:
    Type: "AWS::CloudFront::Distribution"
    Properties:　★
      DistributionConfig:~~~~　★
    CloudFrontOriginAccessIdentity:~~~~　◆

★と◆の2つから構成されているようです
まずはPropertiesについて確認してきます。

PriceClass

価格クラスを定義している。
このエッジロケーションの範囲が広ければ広いほど高く、狭いと安くなる。
今回は日本だけに配信できればいいので料金クラス 200がよさそう。

PriceClass: PriceClass_All

Origins

オリジンの指定を定義している。

DomainName

オリジンとするリソースを定義します。
参考サイトではs3を指している。s3の場合はbucket-name.s3.amazonaws.comのように記載を行う。
その他をオリジンにする場合は以下を参照するとわかりやすい。

Id

オリジンの名前を定義しています。

S3OriginConfig

OriginAccessIdentity(OAI)の設定を行います

しかし前回も記載しましたがOriginAccessControl(OAC)を利用するのでこの記載は不要です。
OriginAccessControlIdへ移行してあげます。
後に記述されているCloudFrontOriginAccessIdentityもCloudFrontOriginAccessControlへ移行して上げる必要があります。

DefaultRootObject

CloudFrontの機能でデフォルトルートオブジェクトというものがあります。 エンドユーザがディストリビューションのルートURLを指定した場合に特定のオブジェクトを返すようにする機能です。

DefaultCacheBehavior

キャッシュの設定のようです。
CacheBehaviorがわからなかったので、調べてみましたがよくわかりませんでした……。

こちらのサイトに記載がある項目の設定項目なのでしょうか……。

• キャッシュの動作（キャッシュの有効期限、キャッシュしないオブジェクトの指定、等）
• セキュリティ設定（署名付きURLの使用、許可されたHTTPメソッドの指定、等）
• エラー処理（エラー時の挙動の指定、等）
• リクエストのルーティング（オリジンサーバーの選択、パスのリライト、等）

要素が多いのでまた細かく分解していきます。AWSの公式ドキュメント上の記載と翻訳も記載します。

TargetOriginId

ターゲットのオリジンのIDです。

The value of ID for the origin that you want CloudFront to route requests to when they use the default cache behavior.
CloudFrontがデフォルトのキャッシュ動作を使用する際に、リクエストをルーティングさせたいオリジンのIDの値です。

Compress

Whether you want CloudFront to automatically compress certain files for this cache behavior. If so, specify true; if not, specify false.
このキャッシュの動作のために、CloudFrontが特定のファイルを自動的に圧縮するかどうか。必要な場合はtrueを、必要でない場合はfalseを指定します。

ViewerProtocolPolicy

The protocol that viewers can use to access the files in the origin specified by TargetOriginId when a request matches the path pattern in PathPattern.
PathPatternのパスパターンに合致するリクエストがあった場合に、TargetOriginIdで指定されたオリジンのファイルにアクセスするためにビューアが使用できるプロトコルを指定します。

httpsへリダイレクトさせたいのでredirect-to-httpsにしたいと思います。

CachePolicyId

キャッシュポリシーを選択します。
参考サイトでは

          # CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6 # CachingOptimized
          CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad # CachingDisabled

のように記載されていました。
コンソールで確認するとこれはデフォルトで用意されているもので、「ポリシーを表示」からIDも確認できました。
めちゃくちゃざっくりいうとこの2つでキャッシュのON/OFFを切り替えているようです。

AllowedMethods/CachedMethods

AllowedMethods

A complex type that controls which HTTP methods CloudFront processes and forwards to your Amazon S3 bucket or your custom origin. There are three choices:
CloudFrontがどのHTTPメソッドを処理し、Amazon S3バケットまたはカスタムオリジンに転送するかを制御する複合型です。選択肢は3つあります：

CachedMethods

A complex type that controls whether CloudFront caches the response to requests using the specified HTTP methods. There are two choices:
CloudFrontが指定されたHTTPメソッドを使用したリクエストに対するレスポンスをキャッシュするかどうかを制御する複合型です。選択肢は2つあります：

読んでのとおりだと思います。
静的サイトなのでGETとHEADの組み合わせで十分ですね。

ForwardedValues

A DefaultCacheBehavior must include either a CachePolicyId or ForwardedValues. We recommend that you use a CachePolicyId.
CloudFrontがクエリ文字列、クッキー、HTTPヘッダをどのように扱うかを指定する複合型です。

とありますが、公式でこのパラメーターは現在非推奨のようです。
設定したい場合は「キャッシュポリシーまたはオリジンリクエストポリシーを利用してね」とのこと。

Logging

Cloudfrontのログの格納先の指定です。
クッキーも含めるかの設定もあります。

          Bucket: !GetAtt S3BucketLogs.DomainName
          IncludeCookies: false

Aliases

独自ドメインの設定項目です。
すでにドメインは取得していますので、ここにドメインを記載します。

ViewerCertificate

証明書の設定です。

証明書のARN以外このまま利用がよさそうです。

          SslSupportMethod: sni-only
          MinimumProtocolVersion: TLSv1.2_2021
          AcmCertificateArn: !Sub "arn:aws:acm:us-east-1:${AWS::AccountId}:certificate/${CertificateId}"

コンソールでは証明書を選択するとversionなどの設定を選べるようになります。

HttpVersion

httpのversionを指定します。
2が主流で3も選択できますが、3を選択することでどのようなメリット/デメリットがあるのか理解していません。
ちょっと調べてみましたが、それでも理解できませんでした。
2で進めます……。

IPV6Enabled

IPv6を利用するかの設定です。

Enabled

DistributionConfig:内のディスティネーションを有効化する項目です。
必須項目。

CloudFrontOriginAccessIdentity

OAIの設定です。
前述で記載しましたが、今はOACが推奨なのでそれに移行します。

  # OAI
  CloudFrontOriginAccessIdentity:
    Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
    Properties:
      CloudFrontOriginAccessIdentityConfig:
        Comment: Unique Domain Hosting Environment

このあたりの記事が役に立ちそうでした。

別途追加したいと思っている項目

特に全世界に公開する必要はないので、日本からのアクセスのみ許可するよう地域制限を設定する予定です。
できるだけコストをかけないようにしたいだけです……。

ちょっと思ったこと

まだ理解していないことが多いので、リソース作成はterraformではなくCFnで作成したほうが学習になるのかな……？と思っている。この前受験理点数に届かなかったAWSの認定試験でもCFn部分があまり満足にできていなかった。
ただ、個人的にCFnファイルのめちゃくちゃ長い記載方法があまり好きではなく、リソースとファイルを1対1で利用した思いもある。
とりあえず現段階ではそのまま当時の考え通りterraformでのリソース作成を考えている。

ハマったところとか

知らないことだらけなので、調べるだけでもかなり時間がかかった。

次にやること

• cloudforntログ保存用s3バケットのcfファイルの分解
• 必要なAWSのリソースをterraformで作成
• HUGOでHPをいい感じに編集する
• GitHub Actionsの設定