CloudFrontのキャッシュを手動で削除する

はじめに

CloudFrontで手動でキャッシュをパージしたいケースがあった。
今回は、コンソール上からCloudFrontの任意のパスのキャッシュをパージしてみる。

構成について

以前、EC2+Cloudfront+WAFの構成を構築するで構築した。
今回は、上記からWAFを除いた構成で構築を行う。

環境

AWS
  - EC2
  - Cloudfront
  - ACM

準備

以下の準備が完了していること

AWSのアカウントが作成されていること
EC2が構築されていること
CloudFrontが構築されていること
ACMで任意のドメインの証明書を作成済みであること

全体の構成

EC2の構成

項目	設定値
名前	server
OS	AmazonLinux2023 AMI
アーキテクチャ	64ビット(Arm)
インスタンスタイプ	t4g.nano
キーペア	server(新規で作成)
セキュリティグループ	ssh, cloudfrontからのみ
ストレージ	8GB (gp3)

CloudFrontで動作確認をする都合上、SSH等で接続をし、Apache, PHPをインストールしておく。

dnf install -y httpd php

CloudFrontの構成

設定は以下とする。

項目	設定値
Origin domain	[作成したEC2ユーザのパブリック IPv4 DNS] (※1)
プロトコル	HTTPのみ (※2)
名前	[作成したEC2ユーザのパブリック IPv4 DNS]
Enable Origin Shield	いいえ
オブジェクトを自動的に圧縮	Yes
ビューワープロトコルポリシー	Redirect HTTP to HTTPS (※3)
許可された HTTP メソッド	GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE (※4)
ビューワーのアクセスを制限する	No
キャッシュキーとオリジンリクエスト	Cache policy and origin request policy (recommended)
Alternative domain name (CNAMEs) - optional	[設定するドメイン名]
Custom SSL certificate - optional	ACMで発行した証明書を選択

※1
Origin domainについて、オリジンとするEC2サーバのドメイン名となる。
Distribution settings referenceを見ると、EC2サーバの設定については、パブリック IPv4 DNS を指定しているようだが、独自のWebサーバ(通常の設定したドメイン名)でもよさそう。

Distribution settings reference
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html#DownloadDistValuesDomainName

※2
Cloudfront-オリジン間のプロトコルとなる。httpsで接続させたい場合は、EC2内の証明書とCloudfrontで利用する証明書を一致させないといけないので、また別の手順が必要となる。

CloudFrontのオリジンをEC2にしてHTTPS通信を強制する構成について
https://dev.classmethod.jp/articles/how-to-create-cloudfront-ec2-e2e-https-connection/

※3
ビューワー・・・接続するクライアントのこと。
http and httpsとするとどちらでも接続ができるが、httpsとしたいので、Redirect HTTP to HTTPSにしておく。
HTTPS only でもよいと思うのだが。

※4
GET,HEAD以外に、POSTやPUTなども利用できるようにしないと、オリジンへの接続時にアプリケーションの登録更新で正しく動作しないため。
静的コンテンツの場合は、GET, HEADで事足りるが、今回は分離していない構成ということでこれを選択。

テスト用のTOPページを作成

ディレクトリ構成

├── index.html
├── style.css
├── script.js
└── images/
    └── hero.jpg

静的ファイル

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Welcome to Nature</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="hero">
    <div class="overlay">
      <h1 class="title">自然とともに生きる</h1>
      <p class="subtitle">Find peace in the great outdoors</p>
      <a href="#explore" class="btn">探検する</a>
    </div>
  </header>

  <section id="explore" class="content fade-in">
    <h2>ようこそ</h2>
    <p>このページはアウトドアの魅力を紹介するデモサイトです。</p>
  </section>

  <script src="script.js"></script>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body, html {
    font-family: 'Helvetica Neue', sans-serif;
    height: 100%;
    color: #fff;
  }
  
  .hero {
    background: url('images/hero.jpg') center/cover no-repeat;
    height: 100vh;
    position: relative;
  }
  
  .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
  }
  
  .title {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  .subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .btn {
    background-color: #28a745;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }
  
  .btn:hover {
    background-color: #218838;
  }
  
  .content {
    background-color: #222;
    padding: 60px 20px;
    text-align: center;
  }
  
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
  }
  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }

script.js

// フェードイン処理
window.addEventListener('scroll', () => {
    const elements = document.querySelectorAll('.fade-in');
    elements.forEach(el => {
      const position = el.getBoundingClientRect().top;
      const windowHeight = window.innerHeight;
      if (position < windowHeight - 100) {
        el.classList.add('visible');
      }
    });
  });

画像素材について

Pexels
https://www.pexels.com/ja-jp/

以下を利用させていただいた。
https://www.pexels.com/ja-jp/photo/2325447/

CloudFrontのキャッシュのパージ

ここまでで、EC2をオリジンとしたCloudFrontの構築ができたので、実際にキャッシュをパージしてみる。

1. 「Cloudfront」サービスで「ディストリビューション」を選択する

「ディストリビューション」→ 先ほど作成したディストリビューションのID部分を選択する。

2. キャッシュ削除のタブを選択し、「キャッシュ削除を作成」を選択する

3. オブジェクトパスに削除対象のパスを入力する

プレースホルダにある通り、CloudFrontからアクセスするパスを入力する。

例えば、/* であれば、全てのキャッシュを削除することができる。
今回は、全てのキャッシュを削除するように設定をしてみる。

/* を入力した。

4. 「キャッシュ削除を作成」を選択する

5. キャッシュ削除のステータスが「完了済み」となればOK

動作確認

CloudFrontのキャッシュが本当にパージされているかを確認する。

キャッシュパージ前

既にキャッシュされている場合は、レスポンスヘッダのX-cacheにHit from cloudfrontが返ってくる。
※ブラウザを開き、F12で開発者ツールを開いてNetworkタブを選択する。

キャッシュパージ後

キャッシュのパージ後は、レスポンスヘッダのX-cacheにMiss from cloudfrontが返ってくる。

実際にパージできていることを確認できた。

参考

Amazon CloudFrontとキャッシュについて
https://heartbeats.jp/hbblog/2023/04/cache-with-cloudfront.html
レスポンスヘッダーポリシーを理解する
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/understanding-response-headers-policies.html

おわりに

最近、CloudFrontをよく利用しているので、理解を深めるためにキャッシュの削除を実践してみた。
次回もCloudFrontに関連する記事を書いていく。