WordPressで作成した記事をS3に連携しエンドポイントでホスティングする

# はじめに
最終的には以下のような構成を目指して構築します。
![WordPress Architecture.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582190/9e905b0f-b083-2924-9b18-8b88b49d0bb7.jpeg)

構築作業の覚書としてQiita記事を作成しておきます。
また、この記事ではWordPressからS3に連携し、S3のエンドポイントでホスティングするまでを記載しています。
![WordPress Architecture_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582190/bc98029a-745b-30fd-4745-d0201d13fae3.png)
その先のCDN、DNS部分はまた別の記事で。
【2020/2/17 追記】
書きました。
[CloudFrontにキャッシュしたS3上のWordPress記事に独自ドメインでアクセスする](https://qiita.com/ebipilaf/items/0ff04fb621cc10efe090)

# 本アーキテクチャのメリット
- ColoudFront
  - CDNを咬ますことで負荷に強くなったりレンダリング速度が上がる
  - S3、Route53との連携が簡単
- サーバー容量も気にしなくて良い（訳ではないが、EC2に直接配置するよりはまし）
  - WordPressが稼働できればいいのでインスタンスタイプも小さくてよくなる
- [Route53は可用性100%](https://aws.amazon.com/jp/route53/sla/)

# 構築手順

## EC2インスタンスの作成
WordPress本体を稼働させれるためのEC2を構築していきます。
今回はBitnamiのAMIを使用します。
https://bitnami.com/

EC2のダッシュボードから[インスタンス] > [インスタンスの作成]
![EC2_dashbord.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582190/d1964f80-87cb-9ba3-adcb-31db1ae2a17f.png)

BitnamiのAMIを選択します。
- `AWS Marketplace`タブを選択
- `wordpress`で検索
- `WordPress Certified by Bitnami and Automattic`を選択
![EC2_AMI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582190/cdd5be96-5f0a-5f23-0035-6948c0bcedd7.png)
![EC2_AMI_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582190/fb5e722e-020c-4634-bff7-7d31aa1e77e7.png)

インスタンスタイプは無料枠で使用したいこともあったので`t2.micro`で作成します。
WordPressで記事を生成するだけであれば、正式運用時でも`t2.micro`で十分な気もします。
残りの設定は、今回すべてそのままなので [確認と作成] を押下します。
![EC2_instancetype.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582190/0f71e639-2c9b-d6ee-e8d6-20d81963bb73.png)

設定した内容が表示されるので、問題なければ [作成] を押下します。
![EC2_confirm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582190/b9204def-5837-652a-d8dc-7fbea7a63832.png)


これでWordPressが使用できるようになるのでパブリックIPを使用してアクセスできることを確認します。

```
ログイン → http://#{パブリックIP}/wp-login.php
初期記事（HelloWorld） → http://#{パブリックIP}/
```

### WordPressへの初回ログイン 
WordPressの初期IDは`user`で固定なのですが、パスワードは自力で調べる必要があります。
以下を参考にパスワードを調べログインします。
https://aws.amazon.com/jp/getting-started/tutorials/launch-a-wordpress-website/
　→ ステップ 3: Web サイトを変更する

## IAMの作成
WordPressのプラグインである[StaicPress](http://ja.staticpress.net/)を使用しますが、アクセスキーが必要になるので専用のIAMを作成します。
ポリシーはS3FullAccessのみアタッチします。
![IAM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582190/29bc516f-c856-3543-06b5-04cc62b37cb6.png)


## S3バケットの作成
適当な名前でバケットを作成します。

### バケットポリシー
以下のとおり設定します。

```json
 {
  "Id": "Policy1573970170037",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1573970167621",
      "Action": [
        "s3:*"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::#{バケット名}",
      "Principal": {
        "AWS": [
          "arn:aws:iam::#{AIMのユーザー名}"
        ]
      }
    }
  ]
}
```

### ホスティング設定
作成したバケットをホスティングします。
S3のコンソールから、[作成したバケット名] > [プロパティ] > [Static website hosting]と選択し、以下のような設定を行う。
![S3hosting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582190/9897a821-0f05-692a-df4a-85172bba80e8.png)



## StaticPressをインストールする
以下の記事を参考にさせていただきました。
https://qiita.com/Ichiro_Tsuji/items/c6a52ec0ee95ead42f68

記事内でプラグインをインストールするために下記ディレクトリ配下に移動する手順がありますが、ディレクトリが存在していないという現象に遭遇しました。

```bash

/var/www/vhosts/i-xxxxxxxx/wp-content/plugins
```
調べてみると、bitnamiのAMIの場合はパスが異なり、下記となるそうです。

```bash
/opt/bitnami/apps/wordpress/htdocs/wp-content/plugins
```
https://docs.bitnami.com/virtual-machine/how-to/troubleshoot-wordpress-issues/

インストール後`再実行`を行うとS3に記事が連携され、S3のエンドポイントでアクセスするとHelloWorldを確認できます。
![HelloWorld.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/582190/9b86d6b8-0152-c9d0-54a2-1354011fa3e2.png)

# 参考文献
参考にさせていただきました。ありがとうございました。
[WordPress + StaticPress S3で静的WebサイトをS3でホストする](https://qiita.com/Ichiro_Tsuji/items/c6a52ec0ee95ead42f68)