LoginSignup
14
9

More than 5 years have passed since last update.

cloud9をEC2の代わりにしてS3でWordPressサイトを公開 -前編:サイト構築-

Posted at

EC2でWordPressを利用し、サイトを構築するという話をよく聞きます。
ただ、EC2が高い。。個人で使うとなかなかにきついです。。

そこで、無料のcloud9をEC2の代わりに使用し、
StaticPressによってS3でサイトを公開することにしました。

cloud9なら環境の複製がワンクリックで簡単に行えるため、WordPressのアップデート等の検証が簡単です。さらに、cloud9はWebIDEなので、ネットに繋がればどこからでも作業可能です!

1. cloud9でWordPressインストール

Cloud9環境でWordPressサイト制作① -導入-を参考にインストールしましょう。

2. StaticPress

1.で構築したWordPressに「StaticPress」をインストールします。

次に、StaticPressが出力するファイル名を「パーマリンクの設定」から変更します。
今回は「タイトル.html」となるように設定します。

パーマリンクの設定が終わったら、StaticPressの「再構築」を実施します。

再構築が完了したら、StaticPressの設定画面から静的出力されたサイトを確認してみましょう。

静的サイトURLにアクセスして、画面が表示されれば成功です。

3. S3の準備

次に、AWSで静的サイトをS3で公開するための準備をします。
まず、静的サイト公開に使用するS3を用意します。

下記URLから、AWSにサインインします。
(アカウント作成は趣旨からずれるので省略します)
https://aws.amazon.com/jp/

サインインしたらS3で検索します。

以下の手順でS3を準備します。
バケット名は例と同じにはできないのでご注意ください。

4. StaticPress S3 のインストール

S3の準備ができたので、StaticPressで作成したモジュールをS3に配信するプラグインをインストールします。
このプラグインはGithubで公開されているので、cloud9のTerminalから下記コマンドを入力してインストールしてください。

cloud9
cd /home/ubuntu/workspace/wp-content/plugins/
git clone https://github.com/megumiteam/staticpress-s3.git

コマンドを発行すると、ダッシュボード上にStaticPress S3 が表示されるため、有効化します。

5. AWS アクセスキー、シークレットキーの取得

次にWordPressとS3を繋ぐためのキーを取得します。

まずは今回のS3 WordPressサイト用のIAMグループを作成します。
下記URLからサインインします。

以下の手順でIAMグループを作成を作成します。

IAMグループを作成したら、次は以下の手順でIAMユーザを作成します。

ここまで来たら、「アクセスキー」と「シークレットキー」が表示されるので、どこかに転記しておきます。特にシークレットキーは必ず確認しておきましょう。

ユーザが追加されていることが確認できます。

6. S3のホスト設定

作成したS3のバケットにアクセスし、ホストの設定を行います。
下記手順のように設定します。

7. StaticPressの設定変更

S3にモジュールを配信できるように設定を変更します。
まずは、StaticPressの設定を変更します。

次に、StaticPress S3の設定を変更します。
まずはアクセスキーとシークレットキーを入力し、「AP_NORTHEAST_1」を選択して変更を保存します。

一度保存するとバケットの選択項目が出現するので、作成したバケットを選び、再度変更を保存する。

これで設定が完了したので、再構築を実施します。

S3を確認すると、モジュールがアップされています。

S3のエンドポイントにアクセスすると、ページが表示されています。

これで一旦完成です!
ただこのままだとサイト内検索や、問い合わせフォームの設置等ができません。
次回その辺を解決していきます。

8. 参考

14
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
9