Portfolioこのプロジェクトについて
ヘッドレスECでは、フロントエンドのホスティングサーバー（Vercel、AWSなど）で画像変換を行うと、サーバー負荷とコストが予想以上に膨らむことがあります。
この問題を解決するために、Shopifyの商品画像をCloudinary経由で配信するフローを構築しました。画像の変換・最適化・配信をCloudinaryに任せることで、自社サーバーの負荷をゼロにし、コストを予測可能な範囲に抑えています。
詳しく学ぶ
この技術について、3つの記事で詳しく解説しています。順番に読むと理解が深まります。
1
なぜ画像配信が問題になるのか
ヘッドレス構成で画像配信の負荷・コストが増える理由と、実際の影響を解説します。
2
Cloudinaryという選択肢
Cloudinaryとは何か、なぜ選ばれるのか、Shopify CDNやVercel画像最適化との比較を行います。
3
実装方法とフロー構築
Shopify → Cloudinaryの同期方法、URL変換、Next.jsでの表示まで、実装の全体像を解説します。
アーキテクチャ
従来: サーバー側で画像変換
お客様
リクエスト
→
あなたのサーバー
画像取得・変換（負荷: 高、コスト: 高）
改善後: Cloudinary経由
Shopify（商品画像）
元画像
Webhook同期
Cloudinary（変換・保存）
画像処理・CDN配信
CDN配信（高速・低負荷）
お客様のブラウザ
高速表示
主な成果
- サーバー負荷: 画像処理による負荷をゼロに
- コスト: Vercel画像最適化の超過費用を削減
- 表示速度: グローバルCDNで世界中から高速アクセス
- 変換機能: 自動フォーマット選択、品質最適化、顔認識クロップなど
技術スタック
- Cloudinary（画像変換・CDN配信）
- Shopify Storefront API
- Next.js（カスタムImageローダー）
- Webhook（画像同期）