素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

投稿日: 2018年5月15日
最終更新日:

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

YouTubeも見てね♪

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2024/04/03 21:33:13時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

Anker PowerCor

created by Rinker
Anker
¥4,990 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー!

【最新機種】GoPro hero11 Black

created by Rinker
GoPro(ゴープロ)
¥62,000 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥2,600 (2024/04/03 21:42:16時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥14,935 (2024/04/03 21:42:10時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥7,500 (2024/04/03 21:42:14時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/04/03 21:42:18時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

おさらい

サイトのSSL化まで

前回までの記事では、StaticPressでHTML化し、

StaticPressS3でS3バケットに転送し、

CloudFrontとRoute53を使って独自ドメインでアクセスし、

サイトをSSL化するところまで設定をしました。

更新されない問題

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を入力して許可ボタンをクリックしてください。


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

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

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

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

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

確認

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

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

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

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

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

終わりに

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

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

CATEGORIES & TAGS

IT