はじめに

Cloudfrontのキャッシュ削除は、AWSコンソールから操作しますが、チームで開発時やお客さんに納品後、お客さん側でキャッシュ削除する場合、キャッシュ削除するためだけにIAMユーザーを作成するのは手間だったり不都合があったため、S3に配置したhtmlでEC2を操作できる仕組みを作成しました。
ただし、メンバー以外に操作されないよう、S3にはCloudfront OAI、CloudFrontとApiGatewayにはBasic認証をかけてます。

構成図

CloudFrontのキャッシュ削除のコンソール画面用のhtmlをS3に配置して、CloudFrontで配信し、S3からアクセスできないよう制限します。

完成ページ

↓クリックすると、CloudFrontのキャッシュ削除され、画面遷移します。

前提条件

キャッシュしたいCloudfrontを作成ずみ

流れ

Lambda作成
ApiGatewayを設定
htmlを作成
htmlをS3にアップロード
Cloudfrontからページを読み込むように設定
WebページにBasic認証を有効化する
htmlからLambda実行後、htmlページにリダイレクトさせる

Lambdaを作成

1. 関数の作成

一から作成
関数名を入力:cloudfront-cache-clear
ランタイムはnode.js python どちらでも
アクセス権限は、既存のロールで、先程作成したロールを選択し、lambda作成

2. コード編集

下記のコードをコピペして、デプロイをします

node.jsの場合

const AWS = require('aws-sdk');

const cf = new AWS.CloudFront();
// 削除するディストリビューションID
const distributionId = process.env['distributionId'];

exports.handler = async (event, context) => {
    const timestamp = new Date().getTime().toString();
    const params = {
        DistributionId: distributionId,
        InvalidationBatch: {
            CallerReference: timestamp,
            Paths: {
                Quantity: 1,
                Items: ['/weather/sea/*'],},
        }
    };
    const data = await cf.createInvalidation(params).promise();
    // Lambda実行後、リダイレクトさせる場合
    // context.succeed({Location: 'https://xxxxx.cloudfront.net/result.html'});
};

Pythonの場合

import boto3
import time
import os

def lambda_handler(event, context):
    client = boto3.client('cloudfront')
    invalidation = client.create_invalidation(
        DistributionId=os.environ['distributionId'],
        InvalidationBatch={
            'Paths': {
                'Quantity': 1,
                'Items': [
                    '/*'
                    ]
        },
        'CallerReference': str(time.time())
    })
    # Lambda実行後、リダイレクトさせる場合
    # header_location = ("https://aaaaaa.cloudfront.net/")
    # result = {"Location": header_location}
    # return result

参考記事

3. 設定から環境変数を変更

環境変数は、キー：distributionIdとし、キャッシュ削除したいディストリビューションIDを値と設定する

4. IAMロールに、CreateInvalidationを追加します。

5. タイムアウト時間を伸ばす

一般設定のタイムアウトをデフォルト値3秒であり、タイムアウトでエラーになるのを防ぐため、20秒に変更します。

6. テストを実行

ApiGatewayを設定

REST APIの構築をクリックします
以下の設定で作成します
ソースを作成します
リソース名（cache）を入力し、リソースを作成をクリックします
GETメソッドを作成します

先程作成したLambda関数を紐付けて作成します。
テストをクリックし、Lambdaが起動していることを確認します。
APIをデプロイすると（ステージ名はprod）、URLの呼び出しが表示されます。

呼び出しURLのprodの後ろに、cacheを加え、URLに遷移するとキャッシュが削除されます。
例↓
https://aaaaaa.execute-api.ap-northeast-1.amazonaws.com/prod/cache

html作成

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://aaaaaa.execute-api.ap-northeast-1.amazonaws.com/prod/cache">
      キャッシュを全削除します
    </a>
  </body>
</html>

result.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>キャッシュ削除されました</p>
    <a href="https://aaaaaa.cloudfront.net/">戻る</a>
  </body>
</html>

残りの作業

残りの作業は以下の通りです。
以前にも同様の作業を行いましたので、こちらの記事を参考に進めていただければと思います。
⑤htmlをS3にアップロード
⑥Cloudfrontからページを読み込むように設定
⑦WebページにBasic認証を有効化する
⑧htmlからLambda実行後、htmlページにリダイレクトさせる

CloudFrontのキャッシュを削除するコンソール画面の作成