Clear CloudFront Cache | さゆフィクション

StaticPressを使ってEC2上のWordPressコンテンツをCloudFront経由で簡単に配信する方法

sayu — Fri, 17 Feb 2023 21:46:32 +0000

WordPressのコンテンツを静的ページ化し、CloudFrontで配信できるようする！ということをやっていきます。

静的ページ化するところはWordPressのプラグインStaticPressを使用します。

CloudFrontのキャッシュクリアはClear CloudFront Cacheプラグインを使用します。

また、WordPressURLにBasic認証をかけるということもやっていきます！

WordPressのインストールは終わっている前提での記載になりますので、インストールが終わっていない場合は、以下の記事をご参照いただきEC2にWodPressをインストールください。

やること

①WordPressコンテンツを静的ページ化
②静的ページ化をCloudFrontで配信
③WordPressURLにはBasic認証をかける

使用するプラグイン

StaticPress
→静的ページ化で使用
Clear CloudFront Cache
→CloudFrontキャッシュの削除で使用

それでは、StaticPressを使用して、WordPressコンテンツの静的ページ化をしていきます！

以下の手順で静的ページ化します。手順に記載のパスはAMI「WordPress Certified by Bitnami and Automattic」を使用時の例ですので、環境に応じて読み替えてください

以下のコマンドのようにWordPressが動いているEC2にSSH接続します
- ssh -i “{sshキー}” bitnami@{パブリック IPv4 DNS}
WordPress管理画面からStaticPressプラグインをインストールして、有効化します
StaticPressの設定を以下の通り行います
- サイトURL：http://{パブリック IPv4 アドレス}/static/
- ドキュメントルート：/opt/bitnami/wordpress/
StaticPressプラグインの再構築ボタンを押下し、静的ファイルを生成します
- フェッチが進まない場合はソース修正をします
  - /home/bitnami/stack/wordpress/wp-content/plugins/staticpress/includes/class-static_press_admin.php
```
// 以下のコードを追加する
「if( !($('li:last-child', ul).offset() === void 0) )」を追加する 

修正後ソース　312行目辺り
if( !($('li:last-child', ul).offset() === void 0) )//追加 
$('html,body').animate({scrollTop: $('li:last-child', ul).offset().top},'slow');
```
- ファイルが生成されずに終了する場合はドキュメントルートの権限を確認します
  - 権限がなければ付与します
    - 「chown -R daemon:daemon /opt/bitnami/wordpress」を実行すると、権限に問題がある場合は問題解消できます
以下のURLにアクセスし画面表示されればOKです。
- http://{パブリック IPv4 アドレス}/static/

ディストリビューションを以下の設定で新規作成します(他の項目は変更しなくて大丈夫)
- オリジンドメイン：EC2のパブリック IPv4 DNS
- オリジンパス：static
以下のURLにアクセスし画面表示されればOK
- http://ディストリビューションドメイン名
  - httpsでも大丈夫