WordPress on Herokuで画像アップロードできるようにする方法

先日「WordPressのブログをherokuで立ち上げて、何かメリットあるの？」というブログを書きました。

「画像アップロードできる方法は、要望があったら書きます」と書いたところ、Messageleaf経由で応援のメッセージをいただきましたので、早速書いてみたいと思います！

ちょっと待って、WordPressは何も設定しなくてもファイルアップロードできるでしょ？？

できるのですが、Herokuアプリを再起動すると、Gitでバージョン管理されていないファイルは消えてしまいます。

なので、アップロードはできるけれども、アップロードしたファイルは消えてしまうかも知れないのです。

そこで、外部のサービスに画像ファイルを保存することで、画像ファイルが消えないようにする必要があります。

今回は

• Amazon Web ServiceのS3という安価で使い勝手の良いストレージサービス
• WordPressのプラグイン「WP Read-Only」

を利用します。

Amazon Web ServiceのS3を用意する

Amazon Web Service（以下、AWS）を使うということで、有料のサービスにはなってしまいますが、

• アカウントを作成した最初の1年間は無料
• 有料になっても1GBあたり月額9円〜
• 安価だけども99.999999999%の堅牢性

という安価かつ安全なサービスなので、使って損はないと思います。

AWSのアカウントを作成する

AWSのアカウントを持っていない方は、早速取得しましょう。こちらのリンクから「サインアップ」をクリックしてアカウントを作成して下さい。

http://aws.amazon.com/jp/

アカウントの作成の流れについては、こちらのリンクにわかりやすい説明がありますので、参照しながらアカウントの作成をおこなうとスムーズです。

アカウント作成の流れ（Amazon Web Service）

AWS Management Consoleを開いてS3のバケットを作成する

ファイルをまとめる単位を「ディレクトリ」と呼ぶように、S3ではアップロードしたファイルをまとめる単位のことを「バケット」と呼びます。

それでは早速、ブログの画像をアップロードするS3のバケットを作成しましょう。下図のリンクの場所からAWS Management Consoleを開きます。

http://aws.amazon.com/jp/

するとAWSで使用できるサービスの一覧画面が開きますので、この中から下の画像の緑枠の場所にある、S3を選択しましょう。

下図のようにS3の画面が表示されたら、左上の「Create Bucket」をクリックして、バケットを作成する画面を開きます。

「Bucket Name」にはアルファベットでバケット名を入力しましょう。「Region」は「Tokyo」を選んでおくと、日本からのアクセスがスピーディです。

これでS3のバケットの作成が完了しました。画像アップロード先を作成する＝ブログ閲覧ユーザーからも画像が見える必要があるので、画像がブログ閲覧ユーザーからも見ることのできるように、設定を追加していきます。

S3にバケットポリシーを登録する

バケット名を選択して「Propaties」をクリックし、その中の「Permissions」をクリックすると、「Add bucket policy」と書かれたボタンが表示されるので、それをクリックします（設定後は下図のように「Edit bucket policy」と表示されます）。

するとBucket Policy Editorが開くので、下記のコードの[ここにバケット名を入力]を自分のバケット名におきかえ、保存します。

これでバケットポリシーが設定されました。

S3をホスティングモードにする

ブログ閲覧ユーザーからアップロード画像が見えるようにするためには、さらにS3をホスティングモードにする必要があります。

「Enable website hosting」を選択し、「Save」ボタンを押すと、ホスティングモードが有効になります。

このままの設定だと、直接バケットにアクセスすると、ファイルの一覧が表示される画面になります。

あまりそういう画面を見られたくない場合は、内容がなにもないindex.htmlをS3にアップロードしておき、Index Documentにindex.htmlを指定しておくと、直接バケットにアクセスした際に真っ白な画面が表示されるようになります。

ここまで設定を終えると、ブログ閲覧ユーザーからS3バケットの中身が見える状態になっています。下図のリンクをクリックして、ファイルの一覧もしくは真っ白な画面が表示されれば、設定が正常に完了していることになります。確認してみてください！

WordPressのプラグイン「WP Read-Only」を使う

S3の設定が終わったら、次はWordPressのプラグインの設定です。

僕は「WP Read-Only」というプラグインを使用しています。いくつかプラグインを試した中では、一番安定しているように思えました。

このプラグインを使用すると、WordPress内でメディアを追加したときに、自動的にS3にアップロードされ、画像などのURLが自動的にS3のURLに変更されます。

設定画面ではAWSのクレデンシャルと、バケット名、リージョンを設定します。

AWSのクレデンシャル情報には下図のリンクからアクセスできます。

「WP Read-Only」のAWS Key、AWS Secretには、それぞれ下図の情報をコピー＆ペーストしてください。

設定を保存すると、「WP Read-Only」が有効になります。

さっそく試してみましょう！

画像アップロードしてみると、完了までに時間がかかると思います。

これはS3にアップロードしているせいですね。失敗してしまう場合は、いままでの設定をもう一度見なおしてみましょう。

アップロードが無事に完了したあとに、AWS Management ConsoleからS3の内容をみてみると、無事にファイルがアップロードされていることが確認できます。

これで無事、WordPressから画像をアップロードすることができるようになりました！

ここまでの作業、ちょっと大変でしたが、画像のアップロード設定ができただけでなく、S3の使い方まで覚えることができてしまいましたね。

S3を上記の設定で作成することで、なんと大量のアクセスが見込まれるキャンペーンサイトにも対応することができてしまいます！　負荷分散はAmazonがやってくれてしまうのです。VPSなどではできないことですね。

また、S3をCDNの代わりに使うこともできます。日本からのアクセスだけなら、高価なCDNを使うまでもなく、TokyoリージョンのS3にホスティングしてしまうのも1つの方法です。

最初の敷居は高いですが、できるようになると用途はかなりたくさんあるので、夢が広がりますね。ぜひ試してみてください。

1点だけ欠点が・・・

上記の方法、1点だけ欠点が・・・。

「WP Read-Only」のエンドポイントの設定に独自ドメインを割り当てられないので、SEO的にはちょっと問題です・・・（amazonaws.com固定になってしまう）。一つのドメインからコンテンツが配信されている方が、効果が高いのです。エンドポイントの設定さえできれば完璧なプラグインなのになぁ。。

「W3 Total Cache」でメディアのCDNにS3を設定して、エンドポイントに独自ドメインを割り当てれば、一応問題解決するっちゃするのですが、まわりくどすぎますね。