Zenn
👋

SupabaseをDevContainersで使いたい

2024/09/23に公開
Docker
Supabase
devcontainer
tech

Supabase入門

SupabaseをDev Containers環境で利用しようとした際、いくつか注意点があったので共有します。SupabaseはFirebaseの代替として知っていましたが、特にFirebaseに不満はなかったため、これまで利用する予定はありませんでした。しかし、正式版になり、RDB(PostgreSQL)が使えることや無料枠の提供を知り、個人開発のテスト環境として最適だと感じ、試してみることにしました（2024年9月時点）。
なお、私の環境はMacです。

この記事の目標

Dev Containersを使用してSupabase Edge FunctionsのGetting Startedができるようにします。

環境構築

docker-compose.yml

version: '3.8'
services:
  node22-supa:
    build: ./web
    stdin_open: true
    working_dir: '/app'
    ports:
      - 8787:8787
    volumes:
      - ../server:/app
    tty: true
    privileged: true

Docker in Dockerを仕様するため、docker-compose.ymlはシンプルです。ただし、Dockerコンテナが削除されるとSupabaseの開発環境も削除されるため注意が必要です。
使わない場合は、socket経由でDockerを起動できるようにすることやnetwork_modeの設定が必要となるのでややこしいです。

Dockerfile

FROM node:22.7.0
RUN apt update; apt install -y wget software-properties-common apt-transport-https git
# Supabase CLI を手動でダウンロードしてインストール
RUN curl -L "https://github.com/supabase/cli/releases/latest/download/supabase_linux_arm64.tar.gz" -o supabase.tar.gz && \
    tar -xzf supabase.tar.gz -C /usr/local/bin && \
    rm supabase.tar.gz

Mac（ARMアーキテクチャ搭載）の場合、Supabase CLIを手動ダウンロードする必要があります。

devcontainer.json

{
  "name": "node22-supa",
  "dockerComposeFile": "docker-compose.yml",
  "service": "node22-supa",
  "workspaceFolder": "/app",
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },
  ...
}

featuresの部分でdocker-in-dockerを定義しています。これは、supabase startコマンドを実行すると、別コンテナが立ち上がるため、コンテナ内でホストとは別のDockerを実行できるようになります。

Edge Functionsをローカルで作る

まず、supabase.comでアカウントを作成しておきます。
次に、Supabaseを初期化します。

supabase init

Edge Functionsを作る

supabase functions new hello-world

以下のようなディレクトリ構造が作成されます。。

└── supabase
    ├── functions
    │   └── hello-world
    │   │   └── index.ts 
    └── config.toml

この時、TypeScriptが使えることや、package.jsonがないことに気づくでしょう。
Edge FunctionsはDenoが採用されています。

Edge Functionsをローカルで立ち上げる

supabase start

supabase startコマンドを実行すると、別コンテナが立ち上がり、ローカルでSupabaseの開発環境が稼働します。ローカル開発環境でSupabaseが立ち上がります。PostgreSQLデータベース、認証、ストレージ、リアルタイム機能が含まれ、Supabaseのフルスタックサービスをローカルでエミュレートします。

初回実行時やコンテナが破棄されている場合、ダウンロードが必要で起動に時間がかかります。
※またsupabase stopを明示的にせずにVSCodeを再起動するとコンテナが起動しっぱなしなのは良いですがport forwardが設定されずにコンテナ外からAPIを叩けなくなることがあります。

supabase functions serve

正常にSupabaseコンテナが立ち上がったら、上記コマンドでEdge Functionsを開始します。

Edge Functionsを実行する

cURLを使ってEdge Functionsを実行しましょう。

curl --request POST 'http://localhost:54321/functions/v1/hello-world' \
  --header 'Authorization: Bearer SUPABASE_ANON_KEY' \
  --header 'Content-Type: application/json' \
  --data '{ "name":"Functions" }'

以上で、動作確認ができるはずです。
今回は環境構築までなので、今後さらにいろいろと試していこうと思います。

Discussion