Featured image of post 【StaticPressS3】WordpressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】
IT

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

3508文字

前回の続き

おさらい

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

関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます

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

StaticPressS3?

What’s?

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

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

S3バケット？

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

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

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

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

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

手順

前提

Point
  • StaticPressプラグイン導入済み
  • AWSアカウント取得済み
  • AWSアクセスキー/シークレットキー取得済み
  • Gitインストール済み
  • SSHコマンド等でサーバーに入れる事
  • お名前.comでドメイン取得済み

【準備】S3側

バケットの作成

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

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

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

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

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

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

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

【準備】StaticPressS3側

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

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

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

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

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

作業ディレクトリ
/var/www/html/{ワードプレスインストールディレクトリ}/wp-content/plugins

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

command
sudo git clone https://github.com/megumiteam/staticpress-s3.git

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

成功ログ
Cloning into 'staticpress-s3'...
remote: Counting objects: 23, done.
remote: Total 23 (delta 0), reused 0 (delta 0), pack-reused 23
Unpacking objects: 100% (23/23), done.

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

command
sudo chown -R apache:apache staticpress-s3

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

command
ls -la
合計 32
drwxr-xr-x 6 apache apache 4096  5月  5 09:26 .
drwxr-xr-x 7 apache apache 4096  5月  5 09:19 ..
drwxr-xr-x 4 apache apache 4096  4月 24 14:34 akismet
-rw-r--r-- 1 apache apache 2230  4月 24 14:34 hello.php
-rw-r--r-- 1 apache apache   28  4月 24 14:34 index.php
drwxr-xr-x 5 apache apache 4096  4月 25 13:29 staticpress
drwxr-xr-x 4 apache apache 4096  5月  5 09:26 staticpress-s3
drwxr-xr-x 4 apache apache 4096  4月 24 14:34 wp-multibyte-patch

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

プラグインの設定

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

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

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

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

確認

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

エラーが発生する場合

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

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

エラーログ
[05-May-2018 10:55:37 UTC] PHP Warning: finfo::finfo(): Failed to load magic database at '/usr/share/misc/magic'. in /var/www/html/{Wordpressインストールディレクトリ}/wp-content/plugins/staticpress-s3/includes/class-S3_helper.php on line 190
[05-May-2018 10:55:37 UTC] PHP Fatal error: Call to a member function file() on null in /var/www/html/{Wordpressインストールディレクトリ}/wp-content/plugins/staticpress-s3/includes/class-S3_helper.php on line 195

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

/var/www/html/<ワードプレスインストールディレクトリ>/wp-content/plugins/staticpress-s3/includes/class-S3_helper.php
//188行目辺り
//$magic_file = '/usr/share/misc/magic';
$magic_file = '/etc/httpd/conf/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サイトホスティング化の設定は完了です。

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

課題
  • 独自ドメイン化
  • SSL化
  • S3バケットへの直接アクセス制限
  • 不要ファイルをS3バケットに転送しないようにする

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

関連

関連記事 【Wordpress】AWSのS3とCloudFrontとRoute53を連携して独自ドメインで公開する方法【お名前.com】 2018/05/07 2981文字 約6分で読めます 関連記事 【無料SSL証明書】AWSでHTTPS通信を取得してCloudFrontに設定してみよう！【Wordpress】 2018/05/08 3849文字 約8分で読めます