こんにちは！GIGのサービス開発事業部でアプリケーションエンジニアとして働くちいかた（片田）です！

Firebaseに大型アップデートがくるなど、SaaS界隈が盛り上がっていますね！Supabaseを使い倒している私としても、楽し嬉しいです。

Alternative Firebaseとして開発されているSupabase。ただ、あくまで噂ですが一部のアンケートではSupabaseの方が高評価だったとかなんとか……。RDSを使える恩恵が大きいので、僕自身もSupabaseが大好きですが、今後もSaaS界隈全体をウォッチし続けたいと思います！

◇

さて今回は、Supabase Storageを使ってファイルアップロード機能を実装する方法をご紹介します。

Supabase Storageに適切なポリシーを設定することでよりセキュアにする方法も解説するので、ぜひ最後までご覧ください。

Supabaseとは

Supabaseは、オープンソースのデータベースである PostgreSQL をベースにした、Backend as a Service （BaaS） プラットフォームです。データベース、認証、ストレージ、Functionsなど、ほぼすべてのバックエンド機能を提供しています。

先日正式版となったSupabaseへのリスペクトの気持ちを記事にしているので、もしよければご覧ください！Supabase Authを使って簡単に認証機能を実装する方法、SupabaseとFirebaseの比較などを記事にまとめています。

■関連記事
・Supabase Edge Functionsでサーバーレス入門
・Supabase Authを使って爆速で安全なアプリケーションを開発する方法
・Supabase + Next.jsで認証機能付きWebアプリケーションを作る方法

Supabase Storageとは

Supabase Storageは、Supabaseのエコシステムの一部として提供されている「ファイルのアップロードと配信」を簡単に行えるサービスです。

Supabaseの他の機能（認証・データベース・関数など）と連携できる点が個人的に気に入っています。たとえば、Supabase AuthのUIDによる認証認可で、セキュアにアプリケーションに組み込むことが可能です。

提供されている機能は以下の通りです。

1. 簡単なファイル管理
Supabase Storageでは、ファイルのアップロード、ダウンロード、削除などの基本的な操作が簡単に行えます。SupabaseのクライアントライブラリやAPIを使うことで、プログラムからファイル管理を自動化することも可能です。

2. グローバルCDN
Supabase Storageでは、ファイルをグローバルCDN（コンテンツ配信ネットワーク）経由で配信できます。これにより、ユーザーの地理的な位置に応じて最適なエッジサーバーからファイルを配信できるため、高速な配信が可能になります。

3. 画像の最適化
Supabase Storageには画像の最適化機能が組み込まれています。アップロードされた画像を自動的に圧縮・リサイズすることで、ファイルサイズを削減し、表示速度を向上させることができます。

4. アクセス制御
Supabase Storageでは、ファイルへのアクセス権限を細かく設定できます。ユーザーやロールごとに、ファイルの閲覧、アップロード、編集などの権限を管理できます。これにより、セキュリティリスクをおさえたファイル共有が可能になります。

Supabase StorageとNext.jsを使ってファイルアップロード機能を作る

ここからはSupabase StorageとNext.jsを使って、実際にファイルアップロード機能を作成する方法を解説します！以下の手順に従って進めてみてください。

前提条件

・Supabaseアカウントを持っていること
・Next.jsプロジェクトがセットアップされていること
・Supabaseクライアントライブラリをインストール済みであること

1. Supabaseプロジェクトの作成と設定

まずはSupabaseプロジェクトを作成し、ストレージを設定します。

a. Supabaseにアクセスし、アカウントにログインまたは新規登録します。
b. 新しいプロジェクトを作成し、プロジェクトの名前や地域を設定します。
c. プロジェクトが作成されたら、プロジェクトダッシュボードに移動し、ストレージタブにアクセスします。
d. バケットを作成し、適切なアクセスポリシーを設定します。

2. Next.jsプロジェクトにSupabaseクライアントを設定

次に、Next.jsプロジェクトにSupabaseクライアントを設定します。

a. Supabaseクライアントライブラリをインストールします。

$ npm install @supabase/supabase-js

b. ./lib/supabase.ts ファイルを作成し、Supabaseクライアントを初期化します。

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.SUPABASE_URL as string
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY as string
export const supabase = createClient(supabaseUrl, supabaseAnonKey)

3. ファイルアップロードフォームの作成

次に、ファイルアップロードフォームを作成します。

a. app/page.tsx ファイルを作成し、以下のコードを追加します。

'use client'

import { useState } from 'react'
import supabase from '@/lib/supabase'

const Page = () => {
  const [file, setFile] = useState(null)
  const [uploading, setUploading] = useState(false)

  const handleFileChange = (e) => {
    setFile(e.target.files[0])
  }

  const handleUpload = async () => {
    try {
      setUploading(true)
      if (!file) {
        return
      }

      const { data, error } = await supabase.storage
        .from('your-bucket-name')
        .upload(`public/${file.name}`, file)

      if (error) throw error
    } catch (e) {
      throw e
    }
  }

  return (
    <div>
      <h1>File Upload</h1>
      <input type='file' onChange={handleFileChange} />
      <button onClick={handleUpload} disable={uploading}>
        {uploading ? 'uploading...' : 'upload'}
      </button>
    </div>
  )
}

Supabase Storageに適切なポリシーを設定する

アップロードされたファイルへのアクセス制御を設定することで、セキュリティを強化できます。

1. Supabaseダッシュボードに戻り、ストレージタブから該当のバケットを選択します。
2. アクセスポリシーを設定し、ファイルの閲覧、アップロード、編集などの権限を管理します。

僕の場合は、画像を${bucketName}/icons/${uid}.jpeg というパスに保存しているため、下記のようなポリシーを設定してアクセス制御しています。

・画像の取得: 全てのユーザーに許可
・画像の作成、更新、削除: リクエスト元のユーザーのUIDと、ファイルのパスを照合して一致していれば操作可能

おわりに

Supabase Storageは内部的にAWS S3を使用していることもあり、元々AWSをゴリゴリ使う現場にいた僕にとって非常に扱いやすく、お気に入りの機能の一つ。

記事内では触れる程度でしたが、画像の最適化やグローバルCDNの機能も強力で、画像を何件も取得するようなページで使っても表示速度も速いので最高です！

SupabaseのようなSaaSを活用して、浮いたリソースは別の作業に割くことも。個人でも企業でも、積極的に取り入れていきたいですね。

◇

私が所属する株式会社GIGは、Web制作やシステム開発に強みをもつデジタルコンサルティング企業です。さまざまな技術を活用し、ご要望を叶えるWebサイト・システムを実現します。

Webやシステム、DX支援のご相談はいつでもご連絡ください。

ご相談・ご依頼はこちら
会社紹介資料のダウンロードはこちら

また、株式会社GIGでは一緒に働くメンバーも募集中です！エンジニアとして成長できる環境が整っており、プロダクトにも積極的に関わることができます！少しでもご興味を持っていただいた方は、ぜひカジュアル面談でお話しましょう。

採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

片田 凌太

1997年10月生まれ。自動車のコネクティッドサービス開発や日本最大のコーヒーサブスクリプションサービス開発などの経験を経て2023年10月に株式会社GIGに入社。現在は、Webサイト制作からコンテンツSEO、問い合わせ管理、LP制作などWebマーケティングに必要な機能をもったCMS『LeadGrid』の開発チームに所属。