素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日: 2018年5月6日
最終更新日:

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

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

Anker PowerCor

created by Rinker
Anker
¥4,990 (2024/03/15 15:06:44時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー!

【最新機種】GoPro hero11 Black

created by Rinker
GoPro(ゴープロ)
¥62,000 (2024/03/15 19:06:06時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,748 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

created by Rinker
スクウェア・エニックス(SQUARE ENIX)
¥3,250 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/03/15 19:06:03時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

スポンサーリンク

336×280




前回の続き

おさらい

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

今回は、さらに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サーバーに入り、直接インストールする必要があります。
※サーバーコマンドを失敗すると全てのファイルが消えたりサーバーが壊れて動かなくなる可能性があるので、自己責任でお願いします

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

そして、以下のコマンドで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サイトホスティング化の設定は完了です。

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

課題

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

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

関連

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , ,

blogenist

Author: blogenist

関連記事

YouTubeも見てね♪

お名前.comサイドバー