意義

S3＋cloudfrontのサービスでS3データ(オリジン）更新時にユーザーの見え方についてどのような動作になるのかを確認するために実施

前提として

今回は手動での動きや操作を確認したいが自動化の場合は下記URLのようなS3イベント通知→Lamdba実行→キャッシュ削除が一番効率は良いと思う。今回はあえて手動で実施する。
https://zenn.dev/collabostyle/articles/3e7866de979682

使用サービス

・S3
・CloudFront

準備作業

今回は事前に準備してある"index.html"ファイルを使用して作成。
一連の設定は下記の通り。

ファイルをアップロード(index.html以外は任意)

静的ウェブサイトホスティングの有効化

ポリシーの追加(Getobjectの有効化)

{
  "Version": "2012-10-17",
  "Statement": [
      {
          "Sid": "PublicReadGetObject",
          "Effect": "Allow",
          "Principal": "*",
          "Action": [
              "s3:GetObject"
          ],
          "Resource": [
              "arn:aws:s3:::cache.test25/*"
          ]
      }
  ]
}

index.htmlファイルの中身は下記のように
※ping等は任意

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>キャッシュテスト</title>
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>
  </div class="icon">
    <img src="lambda.png">
      まず初めにこの画面を確認します
    </div>
  </div>
</body>
</html>

これで以下のようにアクセスを確認

CloudFrontの設定

オリジンが指定されていることを確認

cloudfrontのディストリビューションドメイン名からアクセスでF12→Network→サイトのリロードでファイルを確認

x-cacheがcloudfrontで確認

※Windows　cttl+F5でキャッシュ削除後にCloudFront(エッジ)からキャッシュをとれていることを確認

ここまでが事前作業！！

本題

indexファイル編集時にどういった挙動になるか確認
👇元画像

ファイルを下記のように編集

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>キャッシュテスト</title>
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>
  </div class="icon">
    <img src="lambda.png">
      次にこの画面が見えています
    </div>
  </div>
</body>
</html>

CLIでS3にあげる

aws s3 cp index.html s3://cache.test25

数秒後リロードすると

キャッシュが残っているので変わらない。。

cloudfrontの画面で全パス削除を作成

/*

サイトをリロードすると

更新されていることを確認

学習点

大型のサービスであればファイル更新→S3イベント通知→Lamdba→キャッシュ削除にすれば自動化できるが、更新頻度も少ない場合などはCloudFrontの設定でキャッシュ削除できることからケースごとで使い分けることで金額を抑えることも可能だと感じた。