DjangoにCloudinaryを導入する方法

Django に Cloudinary を導入していきます。

Cloudinary を使用すると、画像が最適化され、ブラウザの表示スピードをあげることができます。

動画解説

動画でも解説していますので、参考にしてください。

https://youtu.be/7cUFU659S3Y

アカウント登録

まずは Cloudinary のアカウントを登録します。

https://cloudinary.com/

SIGN UP FOR FREEボタンから登録しましょう。

API 取得

ダッシュボードにCloud name、API Key、API Secretが記載されているので、メモしておきましょう。

ライブラリインストール

Django にdjango-cloudinary-storageとPillowライブラリをインストールします。

requirements.txt

django-environ~=0.4.5
django-cloudinary-storage~=0.3.0
Pillow~=8.4.0

$ pip3 install -r requirements.txt

設定

settings.py に Cloudinary の設定をします。

INSTALLED_APPS にcloudinaryとcloudinary_storageを追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'rest_framework.authtoken',
    'djoser',
    'accounts',
    'cloudinary', # 追加
    'cloudinary_storage', # 追加
]

一番下に Cloudinary の設定を追加します。

import environ
import os

env = environ.Env()
env.read_env(os.path.join(BASE_DIR, '.env'))

MEDIA_URL = '/media/'
DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

CLOUDINARY_STORAGE = {
    'CLOUD_NAME': env('CLOUDINARY_NAME'),
    'API_KEY': env('CLOUDINARY_API_KEY'),
    'API_SECRET': env('CLOUDINARY_API_SECRET'),
}

環境ファイル

.envファイルにダッシュボードでメモしたCLOUDINARY_NAMEとCLOUDINARY_API_KEY、CLOUDINARY_API_SECRETを記載します。

.env

CLOUDINARY_NAME=xxxx
CLOUDINARY_API_KEY=xxxx
CLOUDINARY_API_SECRET=xxxx

以上で、画像などのメディアファイルは Cloudinary に保存されるようになりました。

今まで通り、画像を表示したい場合は、models.ImageFieldを使用することができます。

例：

models.py

class UserAccount(AbstractBaseUser, PermissionsMixin):
    email = models.EmailField("メールアドレス", max_length=255, unique=True)
    name = models.CharField("名前", max_length=255)
    image = models.ImageField(upload_to="images", verbose_name='画像', null=True, blank=True)