StaticPage S3 sync and CloudFront cache clear | さゆフィクション

WordPressコンテンツを静的ファイル化してAWS上でサーバレス配信してみる

sayu — Sun, 02 Apr 2023 08:04:17 +0000

今回はWordPressコンテンツをサーバレス配信してみます。結構簡単で、30分ほどあればサーバレス配信できるところまで確認できるかと思いまーす。

この記事でのサーバレスとはS3＋CloudFrontでコンテンツ配信をすることを指しています。

サーバーレスにすることで以下のようなメリットがあります。

低コストで安定したサイト運用ができる
- 急なアクセス増にも耐えられ、かつ、安価です
高速なサイトを構築できる
- サイトの速度向上はSEO的にも有利です
訪問者がWordPressに直接アクセスしないのでセキュアになります
- WordPressのセキュリティリスクについては以下の記事をご参照ください

WordPressはセキュリティ対策を取らないとリスクが高いと思っています。セキュリティ対策としてはセキュリティプラグインの導入などがあると思いますが、一番安全なのはStaticPress S3を使用してコンテンツをS3＋CloudFrontで配信し、WordPressが動いているサーバを隠してしまう対策です。

では、構築手順を記載していきます。

まずゴールイメージです。以下のような構成となります。サイト閲覧者はCloudFront経由でS3に格納されたコンテンツ(WordPressコンテンツを静的HTMLにしたもの)にアクセスすることになります。

使うもの

使用するAWSサービスとWordPressプラグインについて記載します。

AWSサービス

EC2
- WordPressをインストールする(DB内包)
S3
- Word Pressを静的コンテンツ化したHTMLを格納する
CloudFront
- S3のHTMLをCloud Front経由で配信する

Word Pressプラグイン

StaticPress2019
- Static Pressを使用してWord PressコンテンツをHTML化する
StaticPage S3 sync and CloudFront cache clear
- HTML化したファイルをS3に転送すると同時にCloudFrontのキャッシュを削除する

では、早速構築をしていきます。

まずはS3の作成から始めていきます。

S3バケット作成

任意のバケット名でS3バケットを作成します。

CloudFrontの作成と設定

まず、ディストリビューションを作成し、オリジンの編集からS3に設定するポリシーを取得という流れになります。

CloudFrontとS3間はOACで設定を行います。

OACについて分からなくても以下の通り進めれば大丈夫です。

ディストリビューションの作成
1. AWSコンソール画面からCloudFrontダッシュボードへ行きます
2. 「ディストリビューションを作成」ボタンを押下します
3. 以下の設定でディストリビューションを作成します
  - オリジンドメイン：作成したS3バケットを選択
  - S3 バケットアクセス：「Origin access control settings (recommended)」を選択
  - コントローラ設定を作成ボタンを押下して、Create control setting画面が表示されるので設定変更せずに(デフォルト設定のまま)作成ボタン押下
S3に設定するポリシーを取得
1. 作成したディストリビューションのオリジンタブから、S3のオリジンを選択して、編集ボタン押下
2. オリジン編集画面から「ポリシーをコピー」ボタンを押下して、ポリシーをクリップボードにコピーする
3. 変更を保存ボタンを押下する

CloudFront+S3でOACを使う

次に、CloudFrontの設定画面(以下の画面)から設定ボタンを押下して、デフォルトルートオブジェクトに「index.html」を設定します。

CloudFront設定

S3のアクセス許可設定

以下の手順でS3の設定を行います

バケットのアクセス許可タブを開く
バケットポリシーの編集ボタンを押下
CloudFront設定時にコピーしたポリシーを貼り付ける
変更の保存ボタンを押下

EC2設定

WordPressインストール方法

EC2へWordPressをインストール

AWSコンソールのEC2ダッシュボードからインスタンスを起動を選択
インスタンス起動画面で以下の設定をする
- 名前：wordpress（他の名前でも大丈夫）
- アプリケーションおよび OS イメージ (Amazon マシンイメージ)：WordPress Certified by Bitnami and Automattic
- インスタンスタイプ：t3.a.small(もっとスペック高いものを選択しても大丈夫)
- キーペア (ログイン)：任意の名前で作成または既存キーを選択
- ファイアウォール (セキュリティグループ)：
  - 「セキュリティグループを作成する」を選択し、「インターネットからの HTTP トラフィックを許可」「からの SSH トラフィックを許可する」のチェックボックスのみチェックする（他は外す）
インスタンスを起動ボタンを押下

EC2起動時のインスタンス設定

WordPress管理者アカウントのパスワード確認

EC2インスタンス一覧画面から作成したWordPressインスタンスを選択
以下の通りメニューをたどり、システムログを開く
- アクション->モニタリングとトラブルシューティング->システムログを取得
システムログを「Setting Bitnami application password to」で検索し、WordPress管理者のパスワードを調べる

WordPress EC2システムログ

動作確認

EC2インスタンス詳細画面を開き、「http://パブリック IPv4 アドレス/wp-admin」をブラウザのアドレスバーに入力する(httpsだとアクセスできないので注意)
WordPressログイン画面が表示されるのでユーザ名は「user」、パスワードはシステムログで調べたパスワードを入力し、ログインできれば完了

EC2インスタンス詳細

EC2インスタンスにSSH接続する方法

以下のようなコマンドでSSH接続可能です。ユーザが「bitnami」である点が要注意です。

ssh -i “{sshキー}” bitnami@{パブリック IPv4 DNS}

ロールの設定

起動したEC2に以下の権限を割り当てます


// EC2に割り当てが必要な権限(ポリシー)
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation",
                "s3:ListBucket",
                "s3:PutObject"
            ],
            "Resource": "*"
        }
    ]
}

Word Pressのパーマリンク設定の変更

WordPressの設定->パーマリンク画面を開き、カスタム構造を選択し、「/%postname%.html」を入力する

WordPressのプラグインStaticPress2019の設定

WordPress 管理パネルから、「プラグイン」 -> 「新規追加」をクリックします。
ブラウザの入力ボックスに「StaticPress2019」と入力します。
「StaticPress2019」プラグインを選択し、「インストール」をクリックします。
プラグインを有効にします。
メニューの「StaticPress2019 Options」をクリックする
「StaticPress2019 Options」の「Save Dir」に静的ファイルを出力するディレクトリを指定。
「StaticPress2019 Options」の「Static URL」にCloudFrontのディストリビューションドメイン名を設定
「Save Changes」ボタン押下

staticpress2019設定

WordPressのプラグイン「StaticPage S3 sync and CloudFront cache clear」の設定

インストール

Githubからプラグインをダウンロードします。
- StaticPage S3 sync and CloudFront cache clearのダウンロードはこちら
zip ファイルをコンピューター上の場所に保存します。
WordPress 管理パネルを開き、[プラグイン] -> [新規追加] をクリックします。
[アップロード] をクリックし、このページからダウンロードした .zip ファイルを参照します。
[インストール] をクリックし、[プラグインを有効にする] をクリックします。
以下３点をStaticPage S3 sync and CloudFront cache clearプラグインに設定します。
- S3のバケット名
- StaticPress2019の静的ファイルの出力先ディレクトリパス(Save Dir)
- CloudFrontのディストリビューションID

動作確認

StaticPress2019で「再構築」ボタン押下
StaticPage S3 sync and CloudFront cache clearで「S3同期 & キャッシュクリア」ボタン押下
CloudFrontのディストリビューションドメインにブラウザでアクセスし、コンテンツが閲覧できればOKです。

まとめ

WordPressコンテンツのサーバレス配信について記載しました。

ソース修正
sshしてサーバにログイン

など難しい作業をせずにWordPressコンテンツのサーバレス配信できました。

結構簡単かと思いますので、気になる方は是非★

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

sayu — Fri, 17 Feb 2023 13:00:17 +0000

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で配信することで「低コストで安定したサイト運用ができる」「高速なサイトを構築できる」「セキュリティ的に安全」というメリットがあります。

WordPressをインストールする

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

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

AWSのEC2に簡単にWordPressをインストールする方法(AMIでWordPressを使用)

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

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

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

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

Simply Static
- 詳細は以下のサイトを参考にさせてもらうといいです。

ワードプレスで静的HTMLを出力するプラグイン「Simply Static」

ワードプレスで静的HTMLを出力するプラグイン「Simply Static」を試してみました。機能が限定的で設定も少なく使いやすいです。

StaticPress
- こちらは以下のサイトを参考にさせてもらいましょう

WordPressを静的なサイトに変換するプラグイン「StaticPress」

今回はWordPressプラグイン「StaticPress」のご紹介です。WPで組んだサイトを静的なサイトに簡単に変換することができます。クライアントの意向により使用できない場面や使用するサーバーによってはPHPバージョンが対応していない場合などに便利です。

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

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

AWS CLIがインストールされていない場合はインストールします。

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-install.html

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

Githubからプラグインをダウンロードします。
- StaticPage S3 sync and CloudFront cache clearのダウンロードはこちら
zip ファイルをコンピューター上の場所に保存します。
WordPress 管理パネルを開き、[プラグイン] -> [新規追加] をクリックします。
[アップロード] をクリックし、このページからダウンロードした .zip ファイルを参照します。
[インストール] をクリックし、[プラグインを有効にする] をクリックします。
以下３点をStaticPage S3 sync and CloudFront cache clearプラグインに設定します。
- S3のバケット名
- 静的ファイルの出力先ディレクトリパス
- CloudFrontのディストリビューションID
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

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

設定項目

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

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

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

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