heroku × Railsでメディア運営をする（Cloudinary編）

最近herokuを利用してメディアの運営を始めました。 Railsで作成して、herokuの無料プランで運営していく方針です。

その中で記事を投稿していくのですが、サムネイルの画像が消えてしまうという事態に陥ったので原因と解決方法を残しておきます。

herokuだと画像がアップロードできない

現象

herokuでデプロイ後に記事投稿を試みますが、画像がいつまでたっても表示されません。 もっと言えば、pushするたびに画像が消える…

これを解決しようと色々な方法を模索しました。

解決方法

qiita.com

まあこれですね。 簡単に説明するとherokuだとアップロード先を指定できてないので、外部のデータベースを用意してあげる必要があるらしいです。

ただし、AWSとかだとEC2なのですがherokuはなかなか難しい。

そこでCloudinaryが登場するわけです。 railsから簡単に設定できて、無料というのが嬉しいです。

heroku × Cloudinaryの使用方法

1. herokuにアドオンを追加

railsからアドオンをherokuに追加する必要があります。

$heroku addons:add cloudinary:starter

または、herokuのページから直接追加することも可能です。

herokuのResourcesからいけます。 starterにしないと料金が発生するので注意してください。

また、ここでherokuにクレジットカードを追加してくれと言われることがあります。 基本的にお金はかからないと思うので追加しておいて大丈夫でしょう。

どうしても不安という方は、後から紹介するcloudinaryのストレージを確認しながら使用してください。

2. Cloudinaryを開いてymlをダウンロード

Cloudinaryをherokuから開くとdashboardに飛ぶと思います。 次にymlをダウンロードするのですが、これが非常にわかりにくいです。

Account detailのところのYMLの文字をクリックすると自動的にダウンロードが始まります。

3. Railsから設定を行う

さあ、後もう少しです。

Railsのconfig 以下に先ほどのymlを入れます。

Config / cloudinary.ymlってことです。

---
development:
  cloud_name: abcdefgh
  api_key: '123456789'
  api_secret: xxxxxxxxxxxxxxxxx
  enhance_image_tag: true
  static_image_support: false
production:
  cloud_name: abcdefgh
  api_key: '123456789'
  api_secret: xxxxxxxxxxxxxxxxx
  enhance_image_tag: true
  static_image_support: true
test:
  cloud_name: abcdefgh
  api_key: '123456789'
  api_secret: xxxxxxxxxxxxxxxxx
  enhance_image_tag: true
  static_image_support: false

ちなみにcloud_nameとapi_keyとapi_secretはdashboardのところに書いてあります。

4. pushして利用

$ git add .

$ git commit -m "yml added"

$ git push heroku branch_name

いつもの奴を打ってください。

これで利用可能になります。 うまくアップロードできてるとcloudinaryのdashboardに画像と容量が表示されているはずです。 このcloudinaryかなり容量がありますので基本的には無料プランで大丈夫です。

こんなのもありますので、もしピンチの時はシェアしてあげてください笑