2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-11-03

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

#構成図
スクリーンショット 2021-11-03 23.43.30.png

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

#完成ページ

スクリーンショット 2021-11-03 23.21.42.png
↓クリックすると、CloudFrontのキャッシュ削除され、画面遷移します。

スクリーンショット 2021-11-03 23.36.09.png

#前提条件

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

#流れ

  1. 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を追加します。
スクリーンショット 2021-11-03 12.00.36.png

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

###6. テストを実行
スクリーンショット 2021-11-03 12.29.01.png

#ApiGatewayを設定

  1. REST APIの構築をクリックします
1. 以下の設定で作成します ![スクリーンショット 2021-11-03 16.35.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/73fd53f5-508c-d675-e746-98dce82b01e4.png)
  1. ソースを作成します
  1. リソース名(cache)を入力し、リソースを作成をクリックします
    スクリーンショット 2021-11-03 16.38.43.png

  2. GETメソッドを作成します

先程作成したLambda関数を紐付けて作成します。 ![スクリーンショット 2021-11-03 16.39.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/a410632c-b67b-2435-49c5-33142969c3c1.png)
  1. テストをクリックし、Lambdaが起動していることを確認します。
    スクリーンショット 2021-11-03 16.40.51.png
    スクリーンショット 2021-11-03 16.42.20.png

  2. 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ページにリダイレクトさせる

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?