【自動キャッシュ削除】StaticPressで転送した際にCloudFrontでInvalidateを自動でする方法

おさらい

サイトのSSL化まで

前回までの記事では、StaticPressでHTML化し、
関連記事【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字約8分で読めます

StaticPressS3でS3バケットに転送し、
関連記事【StaticPressS3】WordpressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】 2018/05/06 3508文字約8分で読めます

CloudFrontとRoute53を使って独自ドメインでアクセスし、
関連記事【Wordpress】AWSのS3とCloudFrontとRoute53を連携して独自ドメインで公開する方法【お名前.com】 2018/05/07 2981文字約6分で読めます

サイトをSSL化するところまで設定をしました。
関連記事【無料SSL証明書】AWSでHTTPS通信を取得してCloudFrontに設定してみよう！【Wordpress】 2018/05/08 3849文字約8分で読めます

更新されない問題

CloudFrontが悪さをしてしまう

今の状態だと、新しい記事を公開してStaticPressで転送する分には問題なくほぼ即時反映されるが、公開済みの記事を更新した場合は即時反映がされない状態となってしまっています。

これは、CloudFrontに備わっているキャッシュ機能が働いているからです。
本来はCloudFrontはコンテンツを高速配信するためのCDNのサービスです。
それをS3バケットと連携させてWebサイトをホスティングしているので、今回のような即時反映がされない現象が発生してしまっています。

今回はCloudFrontのキャッシュ機能を残したまま、意図的にキャッシュを削除し即時反映されるように設定をしてみようと思います。

手順

手動で行う場合

CloudFrontからInvalidate

CloudFrontのキャッシュは意図的に削除して即時反映することは可能です。

AWSのマネジメントコンソールにアクセスし、上部サービスメニューからネットワーキング & コンテンツ配信>CloudFrontを選択します。

次に対象のDistributionsを選択します。

そしたら、Invalidatinosタブを選択し、Create Invalidationをクリックします。

すると、以下のようなダイアログが表示されます。
Object Pathsにはキャッシュを削除したいオブジェクトを指定します。
今回はとりあえず全てのオブジェクトのキャッシュを削除したいので、/*を入力してInvalidateボタンをクリックします。

すると、In Progresssという状態で処理が始まります。
このStatusがCompletedになるとキャッシュが削除されたのでコンテンツが更新されていると思います。

自動で行う場合

Lambdaの作成

上記のように手動でもキャッシュを削除することは可能ですが、記事を追加/更新するたびにAWSのマネジメントコンソールにアクセスして、ボタンを押すのは毎回となるととてもめんどくさいです。

ですが、ここは自動化をすることが可能です。

今回はStaticPressS3でS3バケットに転送した際に、自動でオブジェクトのキャッシュをクリアするような設定を入れてみましょう。

自動でInvalidationをするにはLambdaを利用します。
Lambdaとは、あらかじめ登録しておいた関数を、様々なイベントをトリガーに実行することが出来るサービスとなっています。

上部サービスメニューからコンピューティング>Lambdaをクリックします。

次に、左部メニューのダッシュボードを選択し、関数の作成ボタンをクリックします。

次の画面では、関数の設定を行っていきます。
まずは一から作成を選択します。

次に、任意の関数名を入力しランタイムはPython 2.7を選択します。
そして、ロールはLambda実行用のロールを作成するので、カスタムロールの作成を選んでください。

すると、ロールの作成画面が開くの

ポリシーJson

{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "logs:CreateLogGroup", "logs:CreateLogStream", "logs:PutLogEvents" ], "Resource": "arn:aws:logs:*:*:*" }, { "Effect": "Allow", "Action": [ "cloudfront:CreateInvalidation" ], "Resource": [ "*" ] } ] class=cl>}

先ほどの画面に戻り、既存のロールを選択に変更すると既存のロールに先ほど作成したロールが追加されているので、そちらを選択し関数の作成ボタンをクリックします。

次に、トリガーの設定を行います。
今回はS3バケットへのアクションがトリガーなので、設定タブのS3を選択します。
すると、トリガーエリアにS3が追加されるので、必要な設定リンクをクリックします。

すると、トリガーの設定画面が開くので、監視したいバケットを選択、イベントタイプをオブジェクトの作成(すべて)を選択、トリガーの有効化にチェックを入れて追加ボタンをクリックします。

次に、実行するPythonの関数を登録します。
画面中段あたりの関数コードエリアに進み、以下のコードを追加してください。
※${DistributionId}は自分のものを入れてください

Python関数

from __future__ import print_function

import boto3
import time

def lambda_handler(event, context):
    for items in event["Records"]:
        path = "/" + items["s3"]["object"]["key"]
    print(path)
    client = boto3.client('cloudfront')
    invalidation = client.create_invalidation(DistributionId='${DistributionId}',
        InvalidationBatch={
            'Paths': {
                'Quantity': 1,
                'Items': [path]
        },
        'CallerReference': str(time.time())
    })

これでLambdaの設定は完了なので、上部の保存ボタンをクリックしましょう。

確認

では、実際にStaticPressを利用して記事を更新し、自動でキャッシュが削除されているかの確認をしてみましょう。
更新前は以下のようなタイトルになっています。

Wordpress側でタイトルを更新し、StaticPressで転送しCloudFrontのInvalidationsを確認してみると・・・

お、自動でInvalidateが実行されてキャッシュが削除されていますね！

ブラウザでも確認してみましょ。う！

キタコレ！！！！
無事に即時反映が自動でされるようになりましたね♪

終わりに

以上のように、AWSのLambda関数を利用する事でCloudFrontを使っていてもコンテンツの即時反映がされるようになりました。

これで記事を書いて転送することだけに集中出来るので、どんどんコンテンツを増やしてPV増加を狙ってみてください♪