Railsアプリの開発で「画像のアップロード機能」は必須の機能ですが、HerokuやRenderなどのPaaSデプロイ時に「画像が消えてしまう」問題に直面していませんか？

AWS S3は設定が少し複雑で、個人開発にはハードルが高いこともあります。そこでおすすめなのがCloudinaryです。

そもそも、Cloudinaryとは？という方は下記記事を先に読めば理解が深まると思います。

▪️この記事でわかること

• Cloudinaryのメリットとアカウント作成方法
• Rails (Active Storage) との連携手順
• 本番環境（Heroku/Render）での設定方法

無料で使えて、画像のリサイズも自動で行えるCloudinaryを導入して、爆速で画像機能を実装しましょう！

1. なぜAWS S3ではなくCloudinaryなのか？

Railsで画像を保存する際、選択肢は大きく分けて「AWS S3」か「Cloudinary」です。

個人開発や小規模なスタートアップにおいて、Cloudinaryが選ばれる理由は以下の3点です。

• 無料枠が大きい: クレジットカード登録なしで、十分な容量の無料プランが使えます。
• 画像加工が強力: URLのパラメータを変えるだけで、リサイズやトリミング、形式変換（WebP化など）をCDN側で処理してくれます。
• Active Storageとの相性が抜群: Rails標準の機能で簡単に接続できます。

Step 1: Cloudinaryのアカウント作成とAPIキー取得

まず、Cloudinary公式サイトにアクセスしてアカウントを作成します（無料）。

ダッシュボードにログインしたら、以下の3つの情報をメモしておきましょう。後ほどRailsの設定で使用します。

1. Cloud Name
2. API Key
3. API Secret

Step 2: Railsアプリ側の準備 (Gemインストール)

Railsアプリの Gemfile に必要なGemを追加します。 今回はRails標準の Active Storage を使用して連携します。

コード スニペット

# 画像アップロード用
gem "image_processing", "~> 1.2"

# Cloudinary連携用
gem "cloudinary"

追記したらターミナルでインストールを実行します。

bundle install

もしActive Storageをまだインストールしていない場合は、以下のコマンドも実行してください。

rails active_storage:install
rails db:migrate

Step 3: storage.yml の設定

config/storage.yml を編集して、Cloudinaryを使う設定を記述します。

コード スニペット

cloudinary:
  service: Cloudinary
  # ここでフォルダを指定すると、Cloudinary内の整理が楽になります
  folder: my_rails_app 

次に、開発環境（development.rb）や本番環境（production.rb）で、この設定を使うように指示します。

コード スニペット

# ローカル開発でもCloudinaryを使う場合
config.active_storage.service = :cloudinary

# ローカルではディスク保存、本番だけCloudinaryなら :local のままでOK
# config.active_storage.service = :local

コード スニペット

# 本番環境では必ずCloudinaryを指定
config.active_storage.service = :cloudinary

Step 4: 環境変数の設定 (セキュリティ対策)

【重要】APIキーやSecretを直接コードに書くのは絶対にNGです。 Github等に公開されると不正利用されるリスクがあります。

Cloudinary用の設定ファイル config/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_file_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_file_support: true

そして、.env ファイル（または credentials.yml.enc）に実際の値を設定します。

コード スニペット

CLOUDINARY_CLOUD_NAME=あなたのCloudName
CLOUDINARY_API_KEY=あなたのAPIKey
CLOUDINARY_API_SECRET=あなたのAPISecret

※ .gitignore に .env が含まれていることを必ず確認してください。

Step 5: モデルとビューの実装

準備が整ったので、実際に画像を投稿できるようにします。 例として User モデルにプロフィール画像 avatar を紐付けます。

1. モデルの設定

コード スニペット

class User < ApplicationRecord
  has_one_attached :avatar
end

2. コントローラーの設定

Strong Parameterに avatar を追加します。

コード スニペット

def user_params
  params.require(:user).permit(:name, :email, :avatar)
end

3. ビューの実装 (投稿フォーム)

コード スニペット

<%= form_with(model: user) do |form| %>
  <div class="field">
    <%= form.label :avatar, "プロフィール画像" %>
    <%= form.file_field :avatar %>
  </div>

  <%= form.submit %>
<% end %>

4. 画像の表示

ここがCloudinaryの真骨頂です。画像を表示する際に、サイズ指定などを簡単に行えます。

コード スニペット

<% if @user.avatar.attached? %>
  <%= image_tag @user.avatar.variant(resize_to_limit: [300, 300]) %>
<% end %>

補足：本番環境（Heroku/Render）へのデプロイ

本番環境で動かす際は、各プラットフォームの環境変数設定画面でキーを登録するのを忘れないようにしましょう。

Herokuの場合のコマンド例:

heroku config:set CLOUDINARY_CLOUD_NAME=xxxxxx
heroku config:set CLOUDINARY_API_KEY=xxxxxx
heroku config:set CLOUDINARY_API_SECRET=xxxxxx

まとめ

RailsでCloudinaryを導入する手順を解説しました。

1. Cloudinaryのアカウントを作成
2. gem 'cloudinary' をインストール
3. storage.yml と cloudinary.yml を設定
4. Active Storageで画像を紐付け

これだけで、セキュアで高速な画像配信環境が整います。S3の設定に時間を取られず、サービスのコア機能の開発に集中しましょう！