Herokuのadd-onsでCloudinaryを使用する方法

はじめに

Herokuの優れている点に、多くのadd-onサービスとの連携ができることがあると私は勝手に考えています。その中でも今回利用したのは画像や動画を管理できるサービス、Cloudinaryです。画像・動画はどうしてもサイズが大きくなるのですが、Cloudinaryであれば1GBまでは無料で利用できるんです。ありがたいですよね。そこで今回はDjangoプロジェクトの画像保管先として利用するための方法についてまとめました。

全体の流れ

• Heroku側の設定
• Djangoプロジェクトの側の設定

Heroku側の設定

• Herokuのadd-onは、[ダッシュボード] > [Resources]タブ内に"Add-ons"という項目があり、その画面右側の「Find more add-ons」ボタンから下の画面に遷移して追加できます。Heroku Postgresを設定したことがあれば分かるかもしれませんね。
• 今回利用するサービスは、右上の検索欄から"cloudinary"と入力すると見つかるので、表示されたアイテムをクリックしてください。
• サービスの画面に遷移すると、サービス・"Region Availability"の説明があり、その下に"Plans & Pricing"があると思います。今回は"Starter"プランを選択した状態で右横にある「Install Cloudinary」ボタンを押しましょう。
• するとダッシュボード画面に戻るので、ここで適用させたいアプリを選択し「Submit Order Form」をクリックします。
• Herokuの[ダッシュボード] > [Overview]タブに戻ると"Installed add-ons"の項目に"Cloudinary"が追加されていることが確認できます。続いて、環境変数を取得・設定する必要があるのでここをクリックして下の画像のようなCloudinaryのページにいきます。
• 遷移後、トップページの画面中央部に開発言語とコードが書かれているのが確認できると思います。ここから「Python」を選択するとインストール方法とcloud_name, api_key, api_secretがそれぞれ表示されているのでキーと値をそれぞれ控えておき、Herokuの[ダッシュボード] > [Settings]タブにいきます
• 2つ目の項目に"Config Vars"という項目があるので、ここから「Reveal Config Vars」ボタンを押すと設定済みの環境変数と追加入力可能なフィールドが表示されます。設定済みの環境変数にはCloudinaryのURLが表示されているのが分かると思いますが、ここに先ほど控えておいた3組のキーと値をそれぞれ入力していきましょう。これでHeroku側の設定は完了です。

Djangoプロジェクト側の設定

パッケージインストール

• まずは"Cloudinary"のトップページに記載があったようにDjangoプロジェクトに"Cloudinary"をインストールしましょう。また、Cloudinaryのトップページには記載がなかったのですが、DjangoプロジェクトでCloudinaryを利用する際には別途django-cloudinary-storageとPillowをインストールする必要があるのでお忘れなく。

$ pip install cloudinary django-cloudinary-storage pillow

settings.pyファイル設定

• 続いてsettings.pyを修正していきましょう。下のソースコードのようにINSTALLED_APPS内および静的ファイル等の記述がある画面一番下に、"Cloudinary"関連設定を追記します。#（追加）とある行が追記したコードです。

.envファイル設定

• 一部順番前後しますが、ローカルでの動作確認のためにも.envファイルにはSECRET_KEYやDEBUGに関する記述の下に3組のキー（CLOUD_NAME, API_KEY, API_SECRET ）と値を記述しておきます。

models.py設定

• 次にDjangoの管理画面からCloudinaryに画像を格納するための設定をします。

その他ファイル設定

• serializers.py, admin.pyについても設定しますが、他のモデルにおける設定と同じなので省略します。

画像の確認

これで設定完了です。画像を確認するためには、Djangoの管理画面から画像が格納されているデータを選択します。マスクが多く見辛くてすみませんが、下のようになっていると思います。"Currently"とある部分が現在格納されている画像のURLになっておりクリックしてみるとブラウザに画像が表示されます。その際のURLがCloudinaryの格納庫となっているわけです。ここまで記載の通り進めた場合は、"https://res.cloudinary.com/{CLOUD_NAME}/image/upload/v1/media/imgs/{img_name}"となっていると思います。

まとめ

今回CloudinaryのStarterプランを使用したわけですが、1GB超えた場合の一つ上のプランはSilver: $99/月（2023年7月時点）ということでなかなか高額なので、画像を中心としたサービスを展開する場合は別の方法を考えた方がよさそうですね。。