Cloudinary + Rails 画像アップロード

経緯

Railsで開発をしていて必ず直面するのが画像アップロード機能です。

実際の運用では画像データの保存にはAWSのS3を使うことが多いです。しかし、プログラミングを始めたばかりの人や、お試しでやってみたいだけという人にとっては、AWSに登録してクレジット情報を記入し、IAMのキーを発行し、S3バケットを作成するというのは結構ハードルが高いものです。

そこでお気軽に使えるのがCloudinaryというサービスです。今回はその使い方を説明していきたいと思います。

事前準備

①クラウディナリーにサインアップ
https://cloudinary.com/users/login

②Railsプロジェクトを用意

terminal

$ rails new cloudinary_uploader

gemfile

gem 'cloudinary'
gem 'carrierwave'

terminal

$ bundle install
$ rails g scaffold article title content image
$ rails db:migrate
$ rails g uploader article_image_uploader

設定ファイルのダウンロード

シークレットキーやその他の設定情報が記載されたyamlファイルをログインした状態で、ここからダウンロードし、config/cloudinary.ymlに配置してください。

credential.ymlの編集

cloudinaryの設定情報には秘密情報も含まれているのでそれをconfig/credentials.yml.encに追記します。credentials.yml.encは直接編集できませんので、以下のように編集してください。

terminal

$ EDITOR='code --wait' rails credentials:edit
# Atomの人は以下のように
# EDITOR='atom --wait' rails credentials:edit

するとエディターでconfig/credentials.ymlが開くので、以下を追記してください。(****の部分にconfig/cloudinary.yml中のapi_key,api_secretの値を代入してください。)

cloudinary:
  cloud_name: *************
  api_key: *************
  api_secret: *******************

cloudinary.ymlの書き換え

秘密情報の書き込みが終わったら先ほど配置したファイルを以下のように書き換えてください。

config/cloudinary.yml

---
development:
  cloud_name: Rails.application.credentials.cloudinary[:cloud_name]
  api_key: Rails.application.credentials.cloudinary[:api_key]
  api_secret: Rails.application.credentials.cloudinary[:api_secret]
  enhance_image_tag: true
  static_file_support: false
production:
  cloud_name: Rails.application.credentials.cloudinary[:cloud_name]
  api_key: Rails.application.credentials.cloudinary[:api_key]
  api_secret: Rails.application.credentials.cloudinary[:api_secret]
  enhance_image_tag: true
  static_file_support: true
test:
  cloud_name: Rails.application.credentials.cloudinary[:cloud_name]
  api_key: Rails.application.credentials.cloudinary[:api_key]
  api_secret: Rails.application.credentials.cloudinary[:api_secret]
  enhance_image_tag: true
  static_file_support: false

uploader、modelの設定

次にアップローダーの設定です。 storage :fileの部分を以下のように変更してください。

article_image_uploader.rb

class FlyerImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick

  if Rails.env.production?
    include Cloudinary::CarrierWave
    CarrierWave.configure do |config|
      config.cache_storage = :file
    end
  else
    storage :file
  end
  # 後略
end

開発環境でデバッグをしたい場合は、if文を消してinclude Cloudinary::CarrierWaveだけ書いて試してみてください。

最後にarticle modelにuploaderの設定を以下のように反映します。

models/article.rb

class Article < ActiveRecord
  mount_uploader :image, article_image_uploader
end

herokuにアップロード

変更内容をコミットし、herokuにプッシュした後、herokuのconfigにマスターキーを登録すれば完了です。

terminal

$ git push heroku master
$ heroku config:set RAILS_MASTER_KEY="**********" # config/master.keyの中身を貼り付け

公式ドキュメント