Cloudinaryで画像アップロード機能を作る

Next.jsアプリで画像アップロード機能を作る際にメディア管理SaaSのCloudinaryを使った。

Upload Widgetを使うと手軽に画像アップロードができる。

認証済みのユーザのみが画像アップロードできるようにしたかったので、Signed uploadsを参考に、認証済みユーザのみがアクセスできる署名APIを用意した。

Node.jsの場合、SDKを使うと署名処理は↓のように非常にシンプルに書ける。

import cloudinary from 'cloudinary'

export type SignatureParams = {
  [key: string]: string | number
}

export const generateSignature = (paramsToSign: SignatureParams): string => {
  const API_SECRET = process.env.CLOUDINARY_API_SECRET || ''
  const signature = cloudinary.v2.utils.api_sign_request(paramsToSign, API_SECRET)
  return signature
}

アップロード後の画像はAPI経由でも変換できるが、URLのパラメータを変更することで様々な加工ができる。

無料枠も多いので画像アップロード機能を手軽に作りたい場合はCloudinaryオススメ。