はじめに

この記事では、SupbaseとNext.js(Reactも可)を使用して、画像を保存する方法について解説します。

Supbaseは、リアルタイムデータベースとファイルストレージなどの機能を提供するプラットフォームです。
FirebaseのようなmBaasとして利用されています。

詳しい解説は以下の記事を参照ください。
分かりやすくまとめてくださっています。

ここではSupabse + Next.js(React)を活用して、画像を保存する方法をまとめました。

前提

記事を進める前に、前提条件を確認してください。

Node.jsを利用できること
Next.jsプロジェクトを作成していること
Supabaseのアカウントがあること
Supabaseのプロジェクト作成してAPI_KEYとSUPABASE_URLを準備していること
2023/07/06時点での知識

これらの前提を踏まえて進めていきます。

Next.jsのプロジェクト作成が分からない方は、以下を参照ください。

また、Supabseのアカウントを作成してください。

以下、解説を進めていきます。

Supabse側での操作

Supabseのアカウントにてログインしてください。
Supabseのプラットフォーム上で作業を進めていきます。

SupabseのBacketの作成

まず、保存先であるSupabseのBucketを用意する必要があります。

下記画像の赤枠をクリックして進めてください（UIが変ってる場合があるので注意してください）

新しい「Cards」バケットが作成されました。

一般ユーザーが画像にアクセスできるように「Public bucket」をOnにします。

しかし、現状ではアップロードされたファイルに対してアクセスが可能にはなっていますが、Backetに操作をすることはできません。

つまり、Next.jsから画像を上げることができません。

ポリシーの追加

それを回避するために、ポリシーというものを追加します。

S3などと同様に、ポリシーを追加することで、対象のバケットに対して行える操作を制御することができます。

今回は追加（Insert）処理だけをポリシーに追加します。

（取得（Select）などの処理を追加する際は同様の操作を行って下さい）

Action: 赤枠に沿って作業を進めてください

操作まとめ

Policy名を追加します
Allowed operationでInsertを許可します
authenticatedを許可し、認証した人だけ作成できるようにします。
Reviewで完了させます
Save policyで完了させます
Policyが増えているのを確認します

これで、Next.js側からバケットを操作できるようになりました。

Supabaseプラットフォームでの作業は終わりです。

Next.js側での操作

必要なライブラリのインストール

Next.js側での作業を行います。

Action: Supabseのライブラリを追加します

npm install supbase

Supabseライブラリの設定

Supbaseライブラリを初期化します。
事前に用意しているSupabseのAPIキーとURLを利用します。
無い場合はSupbaseのウェブサイトにログインして用意してください。

Action: supabase.tsに以下の内容を記載してください。

import { createClient } from '@supbase/supbase';

export const supbase = createClient('YOUR_API_KEY', '<SUPABASE_URL>');

これで、supabaseのライブラリを使えるようになりました

以降はこれをimportして利用していきます。

画像のアップロード機能の実装

画像のアップロード機能を実装していきます。

1. CreateImageFormを作成する

const CreateImageForm = () => {
	return <div></div>
}

2. ファイルアップロード処理を追加する

Action: aCreateImageFormにアップロードの処理を追加します。

const CreateImageForm = () => {
	const handleFileUpload = (event) => {
		const file = event.target.files[0];
	
		if (!file) return;

        const storage = await supabase.storage.from("cards");
        const { data, error } = await storage.upload(imageId, favoriteImage);
    
        if (error) {
          // TODO アップロードエラーの処理
          console.log(error);
        } else {
          // TODO アップロード成功の処理
    			console.log(data);
    
          // TODO 画像へのurlを使いたい場合
          const url = await supabase.storage.from("cards").getPublicUrl(imageId);
        }
	};
	
	return <input type="file" onChange={handleFileUpload} />
}

これで、画像選択した際に、Supabseのバケットに画像がアップロードされるようになりました。

以降は、urlを利用して、画像の表示などが可能になります。

終わり

以上でSupabseの画像アップロードの解説を終わります。

基本的にはS3などのファイルシステムと同様に、アクセス許可とポリシーを設定するだけで利用が可能だということが分かりました。

Supabseでは、基本的には固定料金が採用されていますので、大きなファイル量を利用しない場合は、Supabaseを利用するのもいいかもしれません。

以上です。

Supbase + Next.js(React)で画像を保存する方法