ただメモができるだけのブラウザアプリ「TextArea」はこちらw

WordPressプラグインStaticPage S3 sync CloudFront cache clear利用方法

2023.02.17

WordPressのプラグイン「StaticPage S3 sync and CloudFront cache clear」でStaticPressなどを使用して生成した静的ファイルをCloudFront＋S3で配信する方法を記載します。

AWS上でWordPressコンテンツを静的ファイルにしてCloudFront＋S3で配信したい方向けの記事です。

以下の記事ではStaticPress S3を使用していますが、「StaticPage S3 sync and CloudFront cache clear」を使うともっと簡単にCloudFront＋S3で配信できるようになるよーという記事です。

【日本語URL対応版】WordPressのコンテンツを StaticPress S3プラグインを使用して配信する方法
WordPressコンテンツをStaticPressS3を使用してS3+CloudFrontで配信する方法を記載。 コピペで環境構築できます。S3+CloudFrontで配信することで「 低コストで安定したサイト運用ができる」「高速なサイトを構築できる」「セキュリティ的に安全」というメリットがあります。
it.kensan.net
2023.02.04

WordPressをインストールする

まずはWordPressのインストールです。

以下の記事を参考に簡単にインストールできますので、インストール作業は以下の記事をみて進めてくださいー

AWSのEC2に簡単にWordPressをインストールする方法(AMIでWordPressを使用)
簡単にAWSのEC2にWordPressをインストールする方法です。5分で動作確認までできます。 ハマるポイントとしては、WordPressログイン時のパスワードの確認くらいです。 AMIはWordPress Certified by Bitnami and Automatticを使用します
it.kensan.net
2023.02.18

WordPressコンテンツを静的ファイルにする方法

プラグインを使用します。代表的なプラグインは以下の2つを紹介します。

この記事の本題は静的ファイル生成後のS3＋CloudFrontでの配信についてですので、詳細は省略します。

  • Simply Static
    • 詳細は以下のサイトを参考にさせてもらうといいです。
ワードプレスで静的HTMLを出力するプラグイン「Simply Static」
ワードプレスで静的HTMLを出力するプラグイン「Simply Static」を試してみました。機能が限定的で設定も少なく使いやすいです。
akmemo.info
  • StaticPress
    • こちらは以下のサイトを参考にさせてもらいましょう
WordPressを静的なサイトに変換するプラグイン「StaticPress」
今回はWordPressプラグイン「StaticPress」のご紹介です。WPで組んだサイトを静的なサイトに簡単に変換することができます。クライアントの意向により使用できない場面や使用するサーバーによってはPHPバージョンが対応していない場合などに便利です。
blog.universe-web.jp

CloudFront+S3に静的ファイルを配信する

StaticPage S3 sync and CloudFront cache clearを使うにあたって、WordPressが動作しているサーバにAWS CLIがインストールされている必要があります。
AWS CLIがインストールされていない場合はインストールします。

「StaticPage S3 sync and CloudFront cache clear」のインストール方法

  1. Githubからプラグインをダウンロードします。
  2. zip ファイルをコンピューター上の場所に保存します。
  3. WordPress 管理パネルを開き、[プラグイン] -> [新規追加] をクリックします。
  4. [アップロード] をクリックし、このページからダウンロードした .zip ファイルを参照します。
  5. [インストール] をクリックし、[プラグインを有効にする] をクリックします。
  6. 以下３点をStaticPage S3 sync and CloudFront cache clearプラグインに設定します。
    • S3のバケット名
    • 静的ファイルの出力先ディレクトリパス
    • CloudFrontのディストリビューションID
  7. WordPressが動いているEC2に以下の権限を追加します。
//IAMポリシーの設定例
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation",
                "s3:ListBucket",
                "s3:PutObject"
            ],
            "Resource": "*"
        }
    ]
}

「StaticPage S3 sync and CloudFront cache clear」の使い方

WordPressのコンテンツを更新して、静的ページを生成後、S3＋CloudFrontに反映したいタイミングで「StaticPage S3 sync and CloudFront cache clear」プラグインの「S3同期 & キャッシュクリア」ボタンを押下します。

これだけで、静的ファイルのS3への同期とCloudFrontのキャッシュクリアが実行され、最新のコンテンツが反映されます。

「StaticPage S3 sync and CloudFront cache clear」の画面イメージ

StaticPage S3 sync and CloudFront cache clear

StaticPage S3 sync and CloudFront cache clear

以下の3つを入力して保存すれば準備完了。

設定項目

S3のバケット名
静的ファイルの出力先ディレクトリパス
CloudFrontのディストリビューションID

あとは記事を公開・更新したいタイミングで「S3同期 & キャッシュクリア」ボタンを押下します。

「StaticPage S3 sync and CloudFront cache clear」を使うメリット

  • 入力項目は3つのみで設定が簡単
    • S3バケット名
    • 静的ファイルの出力先ディレクトリパス
    • CloudFrontのディストリビューションID
  • 操作が簡単
    • 記事を公開・更新したいタイミングで「S3同期 & キャッシュクリア」ボタンを押すだけ
  • 権限はEC2のロールに付与する
    • 「アクセスキー」「シークレットキー」が不要なのでとってもセキュア
    • EC2に付与する必要があるポリシーも最低限でいいので安心
スポンサーリンク