LoginSignup
8
5

More than 5 years have passed since last update.

carrierwave + heroku + rails + Cloudinary 画像投稿

Last updated at Posted at 2018-12-16

はじめに

railsでwebアプリを作成中、今回はAWSS3ではなくCloudinaryを使うことになりました。使ってみた結果、自分的にはCloudinaryの方が使いやすかったので今度使うときのために、備忘録。
またAWSS3の方もまとめてあるのでよかったらどうぞ。=>https://qiita.com/yukiyukimiyaiwa/items/a9e0103c8342b81f6ac1

前提条件

rails 5.2.1
ruby 2.5.1
Herokuにデプロイできる状態とします
今回はUserimageカラムが追加されているとします

早速やってみる

追加・変更記述

Gemfile
gem 'cloudinary'
gem 'carrierwave'
gem 'fog'

この三つを記述しbundle installします。(てっきりfogはAWSS3にアップするためのものかと思ってたけど、cloudinaryでも必要みたい)
uploaderを作るので

$ rails g uploader Image

するとapp/uploadersが作成されて、今回ならそこにimage_uploader.rbがあるはずです。これの記述を変更します

image_uploader
class PostUploader < CarrierWave::Uploader::Base
  include Cloudinary::CarrierWave
              .
              .
 # storage :file  
              . 
              .

end

上記のようにinclude Cloudinary::CarrierWaveを追加します。また初期設定ではstorage :fileが有効化されているので、コメントアウトしてください。
次はuser.rbを変更

user.rb
class User < ApplicationRecord
  mount_uploader :image, UserUploader
                .
                .
end

以上のように追加します。

Herokuの設定

$ heroku addons:add cloudinary:starter

これでCloudinaryが使えるようになります。
次はHerokuからCloudinaryを開きます。
すると
スクリーンショット 2018-12-16 21.34.11.png
というところがあると思います。(近くにAPIkeyとか書いてあるのでスクショはこれが限界。。。)
YMLをクリックしてアカウントの詳細をダウンロードします。
ダウンロードしたcloudinary.ymlconfigの下に置きます。
またこのファイルを次のように変更します。(もともと書いてあったcloud_name,api_key,api_secretは環境変数にするのでメモを取っておく。)

cloudinary.yml
---
development:
  cloud_name: <%= ENV['CLOUDINARY_CLOUD_NAME'] %>
  api_key: <%= ENV["CLOUDINARY_API_KEY"] %>
  api_secret: <%= ENV["CLOUDINARY_API_SECRET"] %>
  enhance_image_tag: true
  static_image_support: false
production:
  cloud_name: <%= ENV['CLOUDINARY_CLOUD_NAME'] %>
  api_key: <%= ENV["CLOUDINARY_API_KEY"] %>
  api_secret: <%= ENV["CLOUDINARY_API_SECRET"] %>
  enhance_image_tag: true
  static_image_support: true
test:
  cloud_name: <%= ENV['CLOUDINARY_CLOUD_NAME'] %>
  api_key: <%= ENV["CLOUDINARY_API_KEY"] %>
  api_secret: <%= ENV["CLOUDINARY_API_SECRET"] %>
  enhance_image_tag: true
  static_image_support: false

環境変数にする理由はAWSS3の時も書きましたが、悪用される危険があるからです。絶対に直接ソースコードに書き込むのはやめましょう。
環境変数の設定は以下のようにしましょう。(もちろん他の方法で環境変数を設定してもOK)

$ heroku config:set CLOUDINARY_CLOUD_NAME="メモしたcloud_name"
$ heroku config:set CLOUDINARY_API_KEY="メモしたapi_key"
$ heroku config:set CLOUDINARY_API_SECRET="メモしたapi_secret"

あとはローカル環境で試しましょう。

$ CLOUDINARY_CLOUD_NAME="メモしたcloud_name" CLOUDINARY_API_KEY="メモしたapi_key" CLOUDINARY_API_SECRET="メモしたapi_secret" rails s

これで確認したらおk
ちなみに出力は

<%= @user.image.to_s %>

で。
.to_sはimageカラムの時だけ(なぜかわからんけど。他のカラム名だったらいらない)

終わり

説明は難しかったけどこっちの方が相性良い気がする。今度からこれ使おう!!!!と思って忘れないうちに殴り書きしました。間違いなどがあったらご指摘お願いします。

8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
5