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オススメ。