やりたいこと

WordPressを使ってお手軽かつ、負荷にも耐えられるWEBサイトを構築したい。が、サーバを何台も用意してとか大袈裟なことはしたくなく、極力手間なく安く楽にやりたい。あとAWS上で全て構築したい。

システム構成

Amazon LightsailでWordPressの管理を行う。
Amazon Lightsailで起動したインスタンスでは配信せず、S3に静的ファイルを出力してそれをCloudFront経由で配信する。

構築手順

１．AmazonLightsailにてWordPress環境構築

プラットフォーム： Linux/Unix 、アプリ+OS： WordPress を選択し、任意のリソース名を入れて作成。ステータスが実行中になるまで待つ。

最小インスタンス１ヶ月$3.5♪(2020/12現在)
数クリックだけで楽々構築♪

２．WordPressの表示確認

IPアドレスでアクセスし、上記のようなサンプルページが表示されるか確認
管理画面のアカウントを取得するためにLightsail専用のターミナルを起動し、以下コマンドを打ちユーザ名とパスワードを取得
```
cat /home/bitnami/bitnami_credentials
```
サンプルページ右下のManageから管理画面にログインできるか確認

３．S3のバケット作成

S3にて静的ページを保存しておく、非公開バケットを作成する。バケット名は全てのユーザ間でユニークにする必要があり、また作成後は変更ができないので、よく考えて命名すること。
ブロックパブリックアクセスは 新しいアクセスコントロールリスト (ACL) を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする のみオフにして、後はオンにしておく。

ブロックパブリックアクセスの説明はホント分かりにくい...

４．CloudFrontの設定

Webサイトを配信するためのCloudFrontの設定を以下の手順で行う。

Create Distribution をクリック
Webの Get Started をクリック
以下の通り設定
Origin Domain Name：作成したS3のバケット指定
Restrict Bucket Access：Yes
Origin Access Identity：Create a New Identity
Grant Read Permissions on Bucket：Yes, Update Bucket Policy
Default Root Object：index.html
Done!

S3バケットポリシーにCloudFront経由でのアクセス設定が自動で設定される。

５．S3へのアクセス権限設定

WordPressのインスタンスからS3へアップロードするためのユーザをIAMで作成する。
アクセスキーとシークレットキーは必ず保存する。
作成後、以下のポリシーをインラインにて追加する。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect":"Allow",
            "Action":[
                "s3:ListAllMyBuckets"
            ],
            "Resource":"arn:aws:s3:::*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::(バケット名)",
                "arn:aws:s3:::(バケット名)/*"
            ]
        }
    ]
}

６．WordPressのプラグイン設定

静的ファイルを出力するプラグイン(StaticPress)のインストール

WordPressの管理画面の、 Plugins -> AddNew から StaticPress を検索し、インストール
Plugins -> Installed Plugins から StaticPress を探し、 Activate で活性化

S3へアップロードするプラグイン(StaticPressS3)のインストール

GitHub( https://github.com/megumiteam/staticpress-s3 )にアクセスし、ZIPファイルをダウンロード
WordPressの管理画面の、 Plugins -> AddNew -> Upload Plugin からダウンロードしたZIPファイルを選択しインストール
Plugins -> Installed Plugins から StaticPress S3 を探し、 Activate で活性化

静的ファイルの出力先とAWSのアクセスキーの設定

WordPressの管理画面の、 StaticPress -> StaticPress Options を開き、以下を入力
Static URL：https://xxxxxxxxxxxxx.cloudfront.net/
Save DIR (Document root)：/opt/bitnami/apps/wordpress/htdocs/static/
Save Changes を押して保存
続いて、その下に表示されている以下を入力
AWS Access Key：xxxxxxxxxxxxxxxxxxxx
AWS Secret Key：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
AWS Regin：AP_NORTHEAST_1
S3 Bucket：設定したS3バケット名
Save Changes を押して保存

７．S3へ静的ファイル出力

WordPressの管理画面の StaticPress のページから Rebuild ボタンを押下
Endが表示されるまで待つ
2回目以降は差分のみアップロードされる

８．CloudFrontのURLで確認

https://xxxxxxxxxxxxx.cloudfront.net/ にアクセスし、サンプルページが閲覧できるか確認する。
CloudFront経由で閲覧できるようになるには数時間かかる場合があり、S3に307リダイレクトされエラーとなる場合は少し待ってアクセスしてみる。

考察

前段にCloudFront+S3を持ってきたことでWordPressの管理画面を公開領域から切り離すことができ、管理画面へのアタックを防ぐことができた(要以下ファイアウォール)。また、そのおかげでインスタンスサイズは最小で十分かと。

https://aws.amazon.com/jp/blogs/compute/enhancing-site-security-with-new-lightsail-firewall-features/
Lightsail = ステージング環境 、 CloudFront+S3 = 本番環境 で使えそう。
Lightsail専用のWEB上で操作できるターミナルが付いているが、vi(vim)の動作が少し怪しいため、何か編集作業をする際は、秘密鍵をダウンロードして手元でsshしたほうが良さそう。ちょっと調べるとかなら全然使える。
インスタンスに設定する静的IPは料金に含まれているので使ったほうが良さげ。
インスタンスを都度停止して節約できると思ったが、Lightsailの場合、起動も停止も料金は変わらないので意味がなかった。
ルート以外での /アクセス は自動で index.html に読み替えないので、対応が必要になる(S3をWebホスティングすれば解決するが、全開放することになる)。
エラーページが微妙。
静的ファイルは不要なものまでS3へ転送されるので、ここは任意のものが選べるプラグインを作ったほうが良さそう。
CloudFront -> 任意のドメインに変更すれば完璧。

こういったサービスは、少し毛嫌いしていたが、思った以上に使い勝手良かったので、今後使う機会ありそう！