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

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

#構成図
![スクリーンショット 2021-11-03 23.43.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/7befb5e6-1a3c-d94c-0048-988776e47d3a.png)


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

#完成ページ

![スクリーンショット 2021-11-03 23.21.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/5e512d27-cebb-cfa5-59a1-87adf08d9ac5.png)
↓クリックすると、CloudFrontのキャッシュ削除され、画面遷移します。


![スクリーンショット 2021-11-03 23.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/d12e160a-31fc-72fc-e770-fd8ab292439f.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の場合

```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の場合

```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
```

参考記事

https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/cloudfront.html#CloudFront.Client.create_invalidation

https://kotororo.net/2018/07/%E9%9D%99%E7%9A%84%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8D%E3%81%AB%E5%8D%B3%E6%99%82%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%82%8B%E3%82%88%E3%81%86%E3%81%ABcloudfront%E3%81%AEinvalidation%E3%82%92%E8%B5%B0%E3%82%89%E3%81%9B%E3%82%8Blambda%E9%96%A2%E6%95%B0/


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

###4. IAMロールに、CreateInvalidationを追加します。
![スクリーンショット 2021-11-03 12.00.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/9dbcc404-0a21-1551-bd4c-d5217d29096f.png)

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

###6. テストを実行
![スクリーンショット 2021-11-03 12.29.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/bc16a86b-9357-03b7-dbe2-7edf227fe189.png)



#ApiGatewayを設定
1. REST APIの構築をクリックします
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/9e06e840-8a63-56ac-8813-9285a6c92271.png">
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. ソースを作成します
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/5c2365db-e39e-33a0-f140-b1e52a02564c.png">




1. リソース名（`cache`）を入力し、リソースを作成をクリックします
![スクリーンショット 2021-11-03 16.38.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/28543c19-4ec8-7395-96aa-7e9ff1ceb2c1.png)

1. GETメソッドを作成します
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/a81d60ad-a54e-0060-ff5c-ea5adfbbdac3.png">
先程作成した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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/e661ac41-eec2-d613-e5e4-1682ae7e7fd4.png)
![スクリーンショット 2021-11-03 16.42.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/97d0f320-f0a7-4cfb-9609-f4a25680df05.png)



1. APIをデプロイすると（ステージ名は`prod`）、URLの呼び出しが表示されます。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/9964945a-5c37-2432-5e97-e264a1e513c9.png">

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

#html作成

```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>
```

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

https://qiita.com/holdout0521/items/f0cb3182bfb3785388a0

https://qiita.com/holdout0521/items/9ed3d861db67fa561c15