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

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

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

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

1. cloud9でWordPressインストール
---
[Cloud9環境でWordPressサイト制作① -導入-](http://qiita.com/tomine3/items/3e9eab771a105009408b)を参考にインストールしましょう。

2. StaticPress
---
1.で構築したWordPressに「[StaticPress](https://ja.wordpress.org/plugins/staticpress/)」をインストールします。

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/dfadabb4-b2d0-662a-aa19-347aabc40d37.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/39246843-c4b6-89b4-373c-723a1a470c54.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/53845e14-3621-e443-c90c-a77917c64e89.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/c5f69ad1-f711-4952-e6ef-53a1568a8f41.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/63544770-3b5b-2da4-d29b-8da8e07ff66a.png">

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

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/8857785a-d198-ba42-3904-b14636c6a5ac.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/d062ca91-656b-6eb0-33b7-8aaff602660c.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/096c5794-a255-e144-908f-80ccfb662ea5.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/4a883611-b889-a55d-7f2d-573fd04761a0.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/eea633c1-3f7a-dfbc-810b-27dc2d6908c0.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/7b86cc0d-1119-9251-48bd-27120cfdd008.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/1214a673-2bf7-af2f-1a31-5b2ae57d33c2.png">

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

```bash:cloud9
cd /home/ubuntu/workspace/wp-content/plugins/
git clone https://github.com/megumiteam/staticpress-s3.git
```
コマンドを発行すると、ダッシュボード上にStaticPress S3 が表示されるため、有効化します。

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/084729f7-c7a1-4265-c8d7-710534222630.png">

5. AWS アクセスキー、シークレットキーの取得
---
次にWordPressとS3を繋ぐためのキーを取得します。

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

https://console.aws.amazon.com/iam/home#/home

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/8785dcb7-824b-425c-5b78-904c64031240.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/5067a88f-c14c-d398-a9e9-4ce57022d86f.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/024d5aaa-62a6-d555-2311-d2f6dfb375c8.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/9fa576fc-126b-de69-ab7d-ccdfc97ef90e.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/ab566b80-f770-f950-e478-872c2c1bf6c4.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/a39a3c1b-bbb8-64e2-c60b-e4cb6157c541.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/75394815-bc76-a80d-a0bb-794830374e67.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/d69d2d9b-1069-f3dd-134e-efa5932d7809.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/dab66b64-be97-0056-8966-7b598b9938cc.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/7a2ed7ef-8fae-0a9f-9cfc-9a68644b2d93.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/2c3fa82b-7c19-feac-cdde-7e52aebad05a.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/a94fe2da-3b38-f4da-990c-76d7f98a8568.png">

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/f89f2100-7d62-295a-3379-eacb7bb2b954.png">


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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/02c9bb77-6b2c-578c-d753-b6163c9c84a1.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/c3b0e541-c1f5-bccc-b630-a6eff2a34289.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/2132b5d1-caf0-f288-7f09-3da4083031a2.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/53845e14-3621-e443-c90c-a77917c64e89.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/53e17b23-70cd-d080-35d0-b40a7c77c914.png">

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

<img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/91976/2260d98b-a572-146a-fb74-30aa046b8159.png">

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

8. 参考
---
http://qiita.com/suzan2go/items/db1062dd01dcb01a9229