【Heroku】Herokuに画像をアップロードできない / 画像表示できない問題を解決する

はじめに

HerokuにDjangoアプリをデプロイした際、ローカルでは表示されていた画像が表示されなくなったり、アップロード機能でアップロードした画像も表示されなかったり、という問題に直面しました。
Herokuでは画像を表示したりアップロードしたりすることができない仕様のようです。
この問題を解決してくれる、Cloudinaryについてご紹介します。

Cloudinaryの使い方

1. Herokuでの設定

Herokuにログインし、アプリの管理画面に移動します。
管理画面の「Overview」タブの画面上部にある「Configure Add-ons➡️」をクリックします。

「Find more add ons」ボタンを押下します。

Heroku Add Onのサイトに飛びますので、画面右上の検索窓から「Cloudinary – Image and Video Management」と検索してインストールします。StarterのFreeプランで大丈夫です。

Herokuに支払い情報の登録をしていない場合、アドオンをインストールできないので、まだの方はそちらを済ませてからインストールしてください。

2. ライブラリをインストール

次に、必要なライブラリをインストールしていきます。
仮想環境に入っている状態でインストールするよう注意してください。

$ pip install Pillow
$ pip install django-cloudinary-storage
# 動画がある場合はこっち
$ pip install django-cloudinary-storage

requirements.txtを更新します。

$ pip freeze > requirements.txt

3. Djangoの設定

Djangoのsettings.pyを編集します。

3.1 INSTALLED_APPSの追加

書く順番が違うと設定がうまくいかないので、下記をそのままコピペしてください。

settings.py

#メディアファイルのみの場合
INSTALLED_APPS = [
    #...
    'django.contrib.staticfiles',
    'cloudinary_storage',
    'cloudinary',
    #...
]

#メディアファイル以外もある場合
INSTALLED_APPS = [
    #...
    'cloudinary_storage',
    'django.contrib.staticfiles',
    'cloudinary',
    #...
]

3.2 SECRET KEYの追加

アプリ管理画面の「Overview」タブにある「Installed add-ons」から、Cloudianryのダッシュボードに移動します。

「Cloud Name」「API Key」「API Secret」をコピーしてsettings.pyに以下のように追加します。

settings.py

#setting.pyの最後に追加でOK
CLOUDINARY_STORAGE  = {
    'CLOUD_NAME':'your_cloud_name',
    'API_KEY':'your_CLOUDINARY_API_KEY',
    'API_SECRET':'your_CLOUDINARY_API_SECRET'
}

3.3 画像ファイルのパス設定

settings.py

DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

4. デプロイ

以上の設定が完了したらデプロイします。
画像が問題なく表示/アップロードできるようになっていることを確認してください。

$ git push heroku master