こんにちは、@Manabu です。
以前、Amazon S3とCloudFrontを使用してウェブサイトをホスティングし、公開する方法について紹介しました。
この構成には、以下のようなメリットがあります。
これらのメリットを活かして、誰でも簡単に低コストでかつ高速にセキュアなウェブサイトを立ち上げることができます。
詳細な作業手順については、以下の記事を参考にしてください。
今回は、Wordpressの「wp2static」というプラグインを使用してS3の静的コンテンツを作成しようと試みました。
その中でプラグインが上手く動作しなかったため、発生した問題と解決策について記事にして皆さんに紹介します。
はじめに
今回、実行しようとしているAWSの構成と理想の動きについて説明します。
この構成で動けば、少ない手順でS3に静的コンテンツを配置することができる想定です。
AWS構成
AWSの構成は以下になります。
一般的な閲覧者は、CloudFrontに設定したドメインにアクセスし、S3に配置した静的コンテンツをブラウザで閲覧することができます。
サイト運営者は、EC2で動いているWordpressを編集して、「wp2static」プラグインを実行しS3に静的コンテンツを転送するようなイメージです。
それぞれCloudFrontは、大量のアクセスがない限り無料で使用できるうえにACMで発行したSSL証明書でセキュアなアクセスを実行可能です。
EC2側は、IP制限など開発者以外のアクセスをブロックする場合、WAFやApacheによるIP制限を実装することをお勧めします。
※アクセス制限は、プラグインのクローリングに影響があるかもしれないので、実行する時は解除するか、Basic認証が良いかもしれません。
理想の動作
理想としては、Wordpressに入れた「wp2static」プラグインにAmazon S3へ転送するための設定があるため、まずはその設定を行います。
プラグインは以下のURLからダウンロードして、インストールすることができます。
そしてプラグインを実行することで自動で静的コンテンツが作成され、S3に配置まで行われることを想定していました。
発生した事象
インストール後に、wp2staticの設定を行って転送を行おうとプラグインを実行したところ、何度もエラーが発生しました。
発生したエラーについて調査した内容をまとめます。
wp2staticの設定
プラグインに設定した内容は以下になります。
静的コンテンツをホストする場所（今回はAmazon S3を選択しています。）
・Destination URL：Webサイト閲覧者がアクセスするリンク先のURL
・Access Key ID：S3のアクセス権限を付与したIAMユーザーのアクセスキー
・Secret Access Key：アクセスキーと一緒に発行されたシークレットキー
・Region：S3バケットのあるリージョン
・Bucket：S3バケット名
・Subdirectory：バケット内のサブディレクトリ（空でも可能）
・CloudFront Cache Invalidation：
CloudFrontを使用している場合、ディストリビューションID
上記を設定した後に、「Start static site export」ボタンをクリックするとプラグインが起動します。
発生したエラー
プラグイン起動後に、結果が返ってきますが、何度やっても以下のようなエラーが発生しました。
Failed during "Deploying files to S3", please consult the Help tab for where to get assistance.エラー解消するために以下、確認してみました。
Test S3 Settings
プラグインの機能に、S3への接続テストを行ってくれるボタンがあります。
こちらを実行してみたところ、以下の画像のような結果が返ってきて成功していることが確認できました。
コンソールを確認
ブラウザの検証ツールから確認したところ、/wp-admin/admin-ajax.phpで500エラーが発生していることが確認できました。
何度実行しても同じエラーが発生するため、これが上手くいかない原因だということがわかります。
ただ、こちらのエラーについては解決策は最終的に見つかりませんでした。
解決策
今回は、発生しているエラーはそのままにし、別の方法で対応しました。
プラグインで実行しているのは、「静的コンテンツの作成」と「S3への転送」を行ってくれているので、それぞれ別の方法で対応しています
静的コンテンツの作成
wp2staticはWP-CLIというコマンドでも実行可能です。
このコマンドを使用して、静的コンテンツの作成を行います。
WP-CLIのインストール
まず、WP-CLIがEC2内にインストールされているか確認し、されていない場合インストールを実行します。
// WP-CLIがインストールされているか確認します。
wp --info
// インストールされていない場合、下記コマンドでインストールを実行します。
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp
// インストールされたことを確認します。
wp --infoインストールされるとWP-CLIを実行することができるようになります。
wp2staticで静的ファイルの作成
WP-CLIコマンドで、wp2staticプラグインを使用して静的コンテンツを作成します。
wp wp2static generate上記のコマンドを実行することで、wp-content/uploads配下に静的ファイルが作成されます。
Amazon S3へ転送
作成された静的ファイルをS3へ転送するのは、AWS CLIを使用します。
AWS CLIを使用してS3へファイルを転送する場合、IAMのS3操作権限を与える必要があります。
操作権限は、EC2にアタッチするIAMロールに付与するか、EC2内のconfig設定でIAMユーザーのアクセスキーとシークレットキーを登録する方法があります。
今回は、プラグイン用に作成したIAMユーザーのアクセスキーとシークレットキーをEC2のconfigに設定する方法で実行します。
// AWSのIAMユーザーの設定を行います
aws configure
// S3権限を付与しているIAMユーザーのアクセスキーとシークレットキーを登録
// ファイルの格納されているディレクトリに移動
cd wp-content/uploads/静的ファイル
//移動後、以下のコマンドの「your-bucket-name」を転送したいバケット名に変更して実行
aws s3 sync . s3://your-bucket-nameAWSのS3マネジメントコンソールからバケットの中身を確認すると、転送された静的コンテンツが確認できます。
ブラウザからドメインにアクセスすると、Wordpressで作成された静的コンテンツが表示されるようになっていると思います。
まとめ
今回の記事では、発生したエラーについて解消することはできていません。
ただ、プラグインを使用して静的コンテンツを作成し、代替案でS3に転送することまで完了する手順を紹介しました。
プラグインとして、正しく動作してくれなくても自力で解決できるのがプログラムの良さだと改めて感じました。
同じ事象が発生する場合、こちらの記事を参考に目的を達成できることを願います。