Wordpressで作成したブログをS3で管理する。StaticPress

# S3で管理する利点

EC2を起動しないでいいので、料金が安く済む。

# S3のバケットを作成する

公開する静的ファイルを置く、S3を作成します。
http://example.comの場合、example.comというバケットを作成します。
![スクリーンショット 2018-05-10 15.32.35.png](https://qiita-image-store.s3.amazonaws.com/0/52386/fd71a777-97ac-cebf-a89b-9b944cfb58da.png)

# IAMの設定を行います。

## ポリシーを作成します

S3Onlyという名前にしてみました。（適当で）

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "s3:ListAllMyBuckets",
                "s3:GetBucketLocation",
                "s3:DeleteObject",
                "s3:GetObject",
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Effect": "Allow",
            "Resource": "arn:aws:s3:::*"
        },
        {
            "Action": "*",
            "Effect": "Allow",
            "Resource": [
                "arn:aws:s3:::${aws:username}",
                "arn:aws:s3:::${aws:username}/*"
            ]
        }
    ]
}
```

## S3を使用するユーザを作成します。

ユーザを作成します。
作成したときに取得する、アクセスキーとシークレットキーを後で使います。
さきほど作成したポリシーをアタッチします。
ここでは、S3Onlyというユーザを作成しました。（適当）
同じ名前ですが、S3Onlyというポリシーをアタッチしました。

# StaticPressのプラグインをインストールする

WordPressのプラグインの項目から新規追加する。

<img width="622" alt="スクリーンショット 2018-05-10 14.58.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/52386/56a7d249-73fb-b185-52a5-b07d8c8d6872.png">

インストールしたら、有効化を忘れずにします。


# StaticPress S3もインストールします。

こちらは、WordPressからインストールできません。
Gitから「Download ZIP」を押して、Zipを落としてください。
https://github.com/megumiteam/staticpress-s3
<img width="1004" alt="スクリーンショット 2018-05-10 15.16.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/52386/71b3b6f9-f28b-cd7a-9b03-b7bf1e88c386.png">


プラグインの新規追加画面を開きます。
プラグインのアップロードボタンを押します。
<img width="383" alt="スクリーンショット 2018-05-10 15.22.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/52386/f1dc641a-766d-1d2f-2a61-cc9c07d00d40.png">

先ほどダウンロードしたZIPを選択し今すぐインストールを押します。
<img width="896" alt="スクリーンショット 2018-05-10 15.25.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/52386/cfcda5a5-1c96-dd44-2d59-28cfa03e9d8e.png">

StaticPressとStaticPress S3を有効化します。
<img width="340" alt="スクリーンショット 2018-05-10 15.27.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/52386/f6bb941f-2fbd-ba60-95d5-04f96be76bc4.png">

# StaticPressのコードを修正

AWSのインスタンスで立ち上げた場合必要でした

```wordpress_home/wp-content/plugins/staticpress-s3-master/includes/class-S3_helper.php

$magic_file = '/usr/share/misc/magic';
↓
$magic_file = '/etc/httpd/conf/magic';
```

一応リスタートします

```
sudo service nginx restart
sudo service php-fpm restart
```

# StaticPressの設定

StaticPressの設定を押して、設定します。

<img width="304" alt="スクリーンショット 2018-05-10 16.48.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/52386/d620e35a-4257-9e31-8fa6-2f6d056ef35a.png">

静的サイトURLには、S3バケットでのエンドポイントを設定してください
出力先ディレクトリ (ドキュメントルート)には、/wordpress_home/staticを設定します。

真ん中にある、変更を保存ボタンを押します。

AWS Access Key
AWS Secret Key
AWS Region
を入れて、一番下にある変更を保存ボタンを押します。

そうするとバケットが選べるようになるので、S3に作成したバケットを選択し、変更を保存ボタンを押します。

# StaticPressで再構築

StaticPressの再構築を押します。
これにより、設定で指定した、出力先ディレクトリと、S3のバケットに静的ファイルが出力されます。
<img width="276" alt="スクリーンショット 2018-05-10 16.56.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/52386/57e5a598-7a43-6da2-85ac-86e7418b1880.png">


# Route53で公開する

Route53を開き、使用するドメインのAレコードにS3で指定したドメイン名と同じバケットを指定する

# 完成

これで完成となります。
アクセスして確認してください