Heroku + WordpressでS3を使用する

概要

WordpressをHerokuで運用する際、Herokuは定期的にビルドを行っているため、アップロードした画像が消えてしまう現象が発生します。

herokuのリポジトリがdynoという単位で管理されており、Freeプランだと一定時間経過後にdynoが再起動される仕様になっているから。 - 【Rails6】herokuで投稿した画像が表示されない

そこでAWSの**「S3」**というサービスを用いることで画像が消える現象を回避します。Wordpressのプラグインを用いてアップロードする画像の格納先をS3に設定することで、外部に画像を保存します。

S3を使用するための準備をする

まず、下記の記事に沿ってWordpressでS3を使用する準備を行います。

WordPressの画像データをS3に保存する

S3のアクセス権限の設定

S3のブロックパブリックアクセスは下記のように設定します。

この設定によって、私の環境で次の二つを達成することを確認しております。

• WordPressからの画像アップロード
• ポートフォリオサイトからの画像の表示

参考：Amazon S3 パブリックアクセスブロックの使用

バケットポリシーの設定は次のようにしています。

バケットポリシー

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "<リソース名>/*"
        }
    ]
}

参考：

• WordPress S3 Tutorial: How to Connect WordPress to Amazon S3 Bucket
• Amazon S3 コンソールを使用して、バケットの ACL でパブリックアクセスを有効にしました。誰でもバケットにアクセスが可能ですか ?

ローカル環境でS3へつなぐ際にエラーが発生する

Wordpressのローカル環境からS3へアクセスする際にエラーが発生することがありますので、次の記事に沿って対処します。

WordpressからS3につなごうとして"There was an error attempting to get the region of the bucket"が発生した

GDをComposerに追加する

WordpressでS3を使用するためにはGD（画像ファイルの操作ライブラリ)の使用が必要です。HerokuにはデフォルトでGDがインストールされてないため、Composerで使えるように設定する必要があります。

参考：Image Processing and GD

まず、composer.jsonに下記のように追記します。

composer.json

{
    "require": {
        "ext-gd": "*"
    }
}

作ったファイルはwordpressのルートディレクトリに配置します。続いて下記のコマンドを実行します。

$ composer install

終了後、composer.lockがcomposer.jsonと同じディレクトリに作成されていればOKです。後はHerokuへのデプロイ時にHerokuが自動的にライブラリをインストールします。

参考：Heroku PHP Support