AWSにWordPressを立て静的ページに変換してS3に置くまで

WordPressはStaticPressプラグインを使用すると、静的コンテンツに変換することが出来ます。 さらにStaticPress S3プラグインを使用して変換した静的コンテンツをS3から配信するようにすれば、WordPress自体を外部に公開する必要がなくなるので、内部にのみ公開しているサーバやVagrant上にWordPressを立てることができ、セキュリティ上・運用上メリットがあります。(当然、動的なコンテンツ、例えばコメント欄などは使用できませんが・・・)

で、このやり方自体は色んな方が書かれているのですが、AWSにEC2を立ててWordPressを構築するところからやってみたところ色々と試行錯誤が必要だったので備忘録も兼ねてまとめます。

## コミュニティーAMIを使用して、WordPressサーバを構築する
今回は以下のコミュニティAMIを使用して、WordPressを立ててみました。
https://aws.amazon.com/marketplace/pp/B00NN8Y43U/ref=dtl_recsim_B007IP8BKQ_B00NN8Y43U_2
(StaticPressはWordPress 4.2.5まで動作確認済み、とありますが4.3.1でも動かせます。)

<img width="1264" alt="貼り付けた画像_2015_10_31_11_15.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/6800e7d0-6af5-f2db-09d9-b2a4cd747bd0.png">

その他の設定はお好みで。インスタンスは`t2.micro`でも十分動きました。
セキュリティグループはstaticpressを使う前提でWordPressへは自分のIPからのみアクセスできればよいはず…なのですが、StaticPressを使用する場合にはサーバ自体のpublic ipでもHTTP/HTTPSでアクセスできるようにしないと、htmlファイルが生成されません(これで大分ハマりました)。内部的には実際にサイトにアクセスしてHTMLを生成してるっぽい？
WordPressやAWSの設定しだいでは不要な気もしますが、今回はここにあまり深く立ち入らないことにしました。

<img width="794" alt="貼り付けた画像_2015_11_01_14_45.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/c3bba7df-bb59-0b20-8cad-cabdb99c9fd5.png">

構築後、アクセスしてみるとこんな感じ。簡単！

<img width="1166" alt="貼り付けた画像_2015_10_31_11_29.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/7fd38f91-5cbe-2fe8-3d08-189a0c21244d.png">

## WordPressにログインする
`/admin` から管理画面にログインします。
このときのパスワードがなかなか見つからないのですが、以下のページにまとまっています。
https://bitnami.com/stack/wordpress/cloud/amazon

<img width="717" alt="貼り付けた画像_2015_10_31_11_33.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/ac01dd64-5516-4128-d6a3-2b65a4352947.png">

EC2からAMIを選択した場合には user/bitnami、 AWS Marketplaceから立ち上げた場合はパスワードはランダムに生成された値となります。AWS Marketplaceから直接立ち上げた場合には、システムログから確認する必要があるので注意しましょう。

<img width="696" alt="貼り付けた画像_2015_10_31_11_37.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/1e08245a-6717-e60d-a2ea-222774990261.png">

ログインできたら早速、StaticPressをインストールします。
StaticPressで検索すると出てきます。
<img width="1280" alt="貼り付けた画像_2015_10_31_11_43.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/8ddf4612-4be9-f852-473d-b5d225370e8a.png">

インストールできたらプラグインの一覧から有効化します。
<img width="1278" alt="貼り付けた画像_2015_10_31_11_49.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/5efcb583-c14a-1c1c-79d5-c9e15ce4bee3.png">

有効化するとメニューに `StaticPress` が現れます！
<img width="1280" alt="貼り付けた画像_2015_10_31_11_52.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/75ebbd98-15bc-de96-11f2-c5eb69f41929.png">

## StaticPressを動かすまで
早速StaticPressを動かしてみましょう。StaticPressのメニューから再構築ボタンをクリックします。
<img width="1280" alt="貼り付けた画像_2015_10_31_11_52.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/aff69f23-f9d2-5dab-de50-f9486e72e122.png">
と、これだけで動く場合もあるようですが、自分の場合は以下の二手間が必要でした。

### `static`ディレクトリを作成し権限を`daemon:daemon`に変更する
再構築ボタンを押すと裏では`daemon`というユーザで`wordpress/htdocs`配下に`static`というディレクトリを作成します(デフォルト設定の場合)。しかしこのユーザーには上記の場所にディレクトリ作成の権限が無いため、
再構築ボタンを押しても処理が延々と終わりません(fetching...という表示のまま止まります)。以下のようにあらかじめ`static`ディレクトリを作成して、ownerを`daemon:daemon`に変えておきす。(`htdocs` 自体の権限を変更でも問題ないと思います)
```bash
bitnami@hogehoge:~$ cd apps/wordpress/htdocs/
bitnami@hogehoge:~/apps/wordpress/htdocs$ mkdir static
bitnami@hogehoge:~/apps/wordpress/htdocs$ sudo chown -R daemon:daemon static/
```

### パーマリンク設定を変更する
パーマリンク設定を行わないと、cssやjsといったもともと静的なファイルは生成してくれますが、ページのhtmlファイルは生成されません。パーマリンク設定から、各URLの末尾に`.html`が付くように変更します。
<img width="1279" alt="貼り付けた画像_2015_10_31_12_06.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/73ed608e-0b08-2733-c252-7968d1f84526.png">
ここで、`/%postname%.html`のように末尾がhtmlになるようにします。
<img width="1275" alt="貼り付けた画像_2015_11_01_14_34.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/438140a3-8b79-71f2-1d71-e777b9ad405b.png">

これで、StaticPressが静的なコンテンツを全て生成できるようになるはず。

## 生成された静的コンテンツをS3に転送する
### StaticPress S3のインストール 
StaticPress S3という便利なプラグインを使います！ただし管理画面からplugin検索しても出てこないので手動でインストールする必要があります。
```bash
bitnami@hogehoge:~$ cd /home/bitnami/apps/wordpress/htdocs/wp-content/plugins
bitnami@hogehoge:~/wordpress/htdocs/wp-content/plugins$ wget https://github.com/megumiteam/staticpress-s3/archive/master.zip
bitnami@hogehoge:~/apps/wordpress/htdocs$ unzip master.zip
```
プラグインの一覧に`StaticPress S3`から出てくるので、有効化します。

### StaticPress S3の設定
StaticPressの設定に以下のように、S3の権限を設定する項目が出てくるのでこちらを設定します。
<img width="1275" alt="貼り付けた画像_2015_11_01_15_10.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/83c81ffd-3f06-7e38-1ecd-83aeb869bf01.png">
この画面だけだとバケットどこに設定するの？！って感じですが、各項目を設定して変更を保存すると、ちゃんとバケット設定する項目が現れます。
![貼り付けた画像_2015_11_01_15_21.png](https://qiita-image-store.s3.amazonaws.com/0/76861/29cfb0fe-206a-0f2c-cd80-aec84986a703.png)


### S3に転送する
あとは、普通にStaticPressのメニューから再構築ボタンを押すだけ！
S3上に展開されます！簡単！
<img width="1278" alt="貼り付けた画像_2015_11_01_15_17.png" src="https://qiita-image-store.s3.amazonaws.com/0/76861/e122be90-4f62-e189-0d6c-8f1de9958029.png">


## 参考URL
http://dev.classmethod.jp/cloud/aws/staticpress-amazons3/
http://blog.cloudpack.jp/2014/07/14/wordpress-staticpress-amazon-s3/
http://blog.masuidrive.jp/2013/09/15/wordpress-on-s3-1/