【StaticPressS3】WordPressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】

おさらい

前回は、StaticPressプラグインを導入し、WordpressサイトをHTMLファイルに吐き出して正常に表示出来るところまで確認しました。

今回は、さらにStaticPressS3プラグインを利用して、AWSのS3バケットにHTMLファイルを転送し、サイト公開するところまでを紹介致します。

What’s?

StaticPressS3とは、サーバー内のファイルをAWSのS3バケットに転送していくれるプラグインとなっています。

このプラグインは単独で利用することは出来ずに、StaticPressプラグインの拡張プラグインという形になっています。

S3バケット？

S3バケットとは、ファイルサーバーという役割を持っているAWSのサービスの一つです。
HTMLや画像ファイルなどの全てのファイルを保存することが出来ます。

また、このS3バケット自体をインターネット上に公開することが可能なのでHTML等を配置しておけば、サーバーを借りることなくホームページをインターネット上に公開することが可能です。
また、料金もとても安いのでおすすめです。

ただ、AWSの知識が多少必要になるので中級者以上の方向けの運用方法ですね。

本ブログもS3バケットを利用して運用しています。

では、早速StaticPressS3の導入方法を紹介していきます。

前提

【準備】S3側

バケットの作成

まずは、転送先のS3バケットを作成しておきましょう。
AWSマネジメントコンソールにアクセスし、上部サービスメニューからストレージ>S3を選択します。

次に、バケットを作成するボタンをクリックします。

すると、バケットの作成ダイアログが表示されるのでバケット名とリージョンを設定します。
任意のバケット名とリージョンを入力し、次へボタンをクリックします。

次に、プロパティの設定を求められますが、一旦は何もいじらずに次へボタンをクリックします。

次にアクセス許可の設定を求められます。
この設定もそのままで問題はないので次へボタンをクリックします。

最後に、設定の確認画面が表示されるので問題が無ければバケットを作成ボタンをクリックします。

これで正常にバケットの作成は完了しました。

【準備】StaticPressS3側

プラグインのインストール

では、次にStaticPressS3プラグインをインストールしましょう。
ただ、このプラグインは管理画面からインストールする事は出来ません。
試しにstaticpressと入力しても2件しかヒットしません。。。

じゃあどうすれば良いのかorz

StaticPressS3プラグインはGitコマンドでインストールする必要があります。
なので、SSHコマンド等でWordpressサーバーに入り、直接インストールする必要があります。
※サーバーコマンドを失敗すると全てのファイルが消えたりサーバーが壊れて動かなくなる可能性があるので、自己責任でお願いします

まず、サーバーに入り以下のディレクトリに移動してください。

そして、以下のコマンドでStaticPressS3のリポジトリーをクローンします。
※sudoコマンドが使えるユーザーで実行してください

以下のログが出力されればクローン完了です。

次に、所有者をapacheに変更します。
同じディレクトリで以下のコマンドを実行してください。

正常に変更されていれば以下のようになっているはずです。

StaticPressS3プラグインのインストールはこれで完了です。

プラグインの設定

では、次にStaticPressS3の設定を行っていきましょう。

インストール済みプラグイン画面を表示すると、StaticPressS3プラグインが表示されるようになっていると思います。
まずは、プラグインを有効化しましょう。

有効化すると、StaticPressの設定画面に以下のような項目が追加されているので、AWSのアクセスキー/シークレットキー/リージョンを設定して、変更を保存ボタンをクリックしましょう。

設定値が正しければ、さらにS3バケットを選ぶプルダウンが追加されているので、StaticPressで出力したファイル群を転送を行いたいバケットを選択し、変更を保存ボタンをクリックします。

確認

では、試しにStaticPressを実行してみましょう。

エラーが発生する場合

主に、AWSのEC2でWordpressを構築している場合、以下のようなエラーが発生する事があります。

ログを見てみると以下のような出力がされています。

EC2では、この/usr/share/misc/magicの場所が違うらしいのでここを以下のように修正してみてください。

これで再度実行をしてみましょう。

正常に転送されている事が確認出来ましたね。

ブラウザからもアクセス出来るか確認してみましょう。
>index.htmlにチェックを入れ、表示されたリンクURLを開いてみましょう。

あら、うまく表示されていませんね。。。
このリンクURLはファイル単体へのリンクURLなので、HTMLとしてCSSや画像などを自動で追加読み込みしてくれるわけではありません。

【調整】S3側

静的Webサイトホスティングの有効化

これは、S3バケットを静的Webサイトのホストとして利用するという設定が有効になっていないのが原因です。
S3のバケットメニューにアクセスし、Static web hostingをクリックします。

すると、以下のようなメニューが開くので、このバケットを使用してウェブサイトをホストするにチェックを入れ、インデックスドキュメントにindex.htmlと入力し保存ボタンをクリックしましょう。

すると、バケットホスティングの設定が有効になりました。

再確認

では、もう一度確認してみましょう。
今回はStatic web hostingのエンドポイントに表示されているURLにアクセスしてみましょう。

無事に表示されるようになりましたね♪

子テーマを使っている場合は注意

WordPressでカスタマイズをする際は子テーマを作り、そちらに修正をかけると思いますが、Staticpressでは有効に設定しているテーマの情報しか転送してくれません。
なので、子テーマを利用している場合は、まずは親テーマを有効にした上で一度S3バケットに転送し、再度子テーマに切り替えるようにする必要がありますので、気をつけましょう。

以上でStaticPressS3プラグインを利用したS3バケットへの転送及びWebサイトホスティング化の設定は完了です。

ただ、まだまだ以下の課題が残っています。

そちらについては別の記事にまとめて改めて紹介しようと思いますので、そちらもご覧頂ければなと思います♪

関連