今回はVercel Blobを使ってファイルのアップロードを実施しました。
データベースにはファイルは保存できず、Storageに実際のファイルを保存して、保存先などのファイルの情報をデータベースに入れることになります。
今回はこのようにファイルを保存します。
ファイル → Vercel Blob
ファイル情報 → Prisma/PostgreSQLvercel blobのストレージを生成
①プロジェクト内のStorageをクリック
②Create Databaseをクリック
③Vercel Blobを選択してContinueをクリック
④Name/Region/Access(privateをおすすめ)/チェックボックス選択など詳細を入れてCreateをクリック
このような画像が出たらOKです！
@vercel/blob設置
Blob Storageを作成したらVercel Blobを操作するためのパッケージ @vercel/blob をプロジェクトにインストールします。
プロジェクトのルートディレクトリで、以下のコマンドを実行します。
npm install @vercel/blobインストールが完了すると、package.jsonに@vercel/blobが追加されます。
これで、Next.jsからVercel Blobを利用するための準備が整いました。
環境変数の設定
Blob Storageをプロジェクトに接続すると、Vercel側でBlobを利用するための環境変数が自動的に追加されます。
現在のVercel Blobでは、主に以下の環境変数が追加されます。
BLOB_STORE_ID
VERCEL_OIDC_TOKEN
BLOB_READ_WRITE_TOKENBLOB_STORE_IDとVERCEL_OIDC_TOKENは、Vercel上でBlob Storeにアクセスするために使用されます。
また、Client Uploadを利用する場合は、BLOB_READ_WRITE_TOKENがクライアント用のアップロードトークンを生成するために使用されます。
通常、Vercel上で同じプロジェクトのBlob Storeを利用する場合、これらの値を手動で設定する必要はありません。Blob Storeをプロジェクトに接続すると、Vercelが自動的に環境変数を追加してくれます。ただし、ローカル環境で開発する場合は、Vercelの環境変数をローカル環境に取得する必要があります。
Vercel CLIで環境変数を取得する
まず、プロジェクトをVercelと連携します。
vercel linkその後、以下のコマンドを実行します。
vercel env pullこれにより、Vercelに登録されている環境変数がローカルの.env.localに取得されます。
.env.local.env.localにはBlobに関する環境変数が追加されます。
BLOB_STORE_ID=...
VERCEL_OIDC_TOKEN=...
BLOB_READ_WRITE_TOKEN=...トークンの値はGitHubなどに公開しないように注意してください。
.env.localにBlob関連の環境変数が表示されない場合は、Blob StoreにDevelopment環境が含まれていない可能性があります。
Blob StoreのProjectsタブを開きます。
対象プロジェクトの横にあるコンテキストメニュー（⋯）を開き、「Update Project Connection」を選択します。
その後、「Development」を含めて接続を更新してください。
設定後、もう一度以下のコマンドを実行します。
vercel env pull
終わりに
これまでAWSやFirebaseのStorageにファイルを保存したことはありますが、Vercel Blobを使うのは初めてでした。
ファイルをStorageに保存し、ファイルに関する情報をデータベースで管理するという大きな流れは、どれも共通していました。
仕組みや流れはなんとなく理解できても、やはり実際に使ってみて、少しずつ慣れていくことが一番大切だと思います。
次回はAPIはコンポーネント作成について解説しますのでお楽しみに！
