mizuko
5か月前
0
0
Next.js から GCS への直接画像アップロード実装
Next.js
Terraform
Google Cloud Storage
Next.js アプリケーションから Google Cloud Storage (GCS) へ直接画像をアップロードする実装方法。
実装の流れ：
- Cloud Run のサービスアカウントを使用して Signed URL を生成
- フロントエンドから Signed URL を使って GCS へ直接アップロード
- アップロード完了後、画像 URL をバックエンドで保存
必要な権限設定：
- Cloud Run サービスアカウントに
roles/iam.serviceAccountTokenCreatorを付与 - GCS バケットに
roles/storage.objectAdminを付与
注意点：
x-goog-content-length-rangeヘッダーは署名に含めるとクライアント側での送信が必要になるため、サイズチェックはクライアント側で実施する方が簡単- Next.js の Image コンポーネントで GCS の画像を表示するには、next.config.js で storage.googleapis.com を remotePatterns に追加が必要