Supabaseをローカル環境に構築してNext.jsアプリで利用する（前半）
Supabaseはクラウドでプロジェクトを作成するだけで、バックエンドがすぐに使えるのが魅力です。
同様に、Supabaseが提供しているCLIを使うと、ローカル環境にSupbaseを手軽に構築できます。
これにより、本番環境はクラウドで提供して、開発はローカル環境で行う事ができます。
本記事では、Next.jsのアプリで、ローカル環境に立ち上げたSupbaseを利用する手順を紹介します。
Next.jsアプリをセットアップ
次の記事をベースに、マジック・リンクでログインできるようにします。
コードの内容に関しては詳しく触れませんので、処理内容に関しては上記の記事を参考にしくてださい。
Next.jsアプリのコードは次のリポジトリーにあります。
degit経由で取得すると便利です。
npx degit hirotaka/examples/supabase-nextjs-local#baghdad-0.0.1 supabase-nextjs-local
ダウンロードしたディレクトリーに移動して、必要なパッケージをいれます。
cd supabase-nextjs-local
npm install
Supbaseをセットアップ
Supbase CLIを使用して、ローカル環境にSupbaseをセットアップします。
Supabase CLIの内部では、DockerとDocker Composeを使用しています。ご使用のプラットフォームにあわせて、ダウンロードとインストールをしてください。
Supbase CLIをインストール
Macであれば、Homebrewでインストールできます。
brew install supabase/tap/supabase
その他のプラットフォームは次を参考にしくてださい。
初期化
Next.jsアプリでSupbaseを使用できるように初期化します。
プロジェクトのディレクトリーで初期化コマンドを実行します。
supbase init
supbaseというディレクトリーが作成され、ディレクトリーの中に設定ファイル類が格納されています。
マジック・リンクを使用するので、テスト用メールサーバーの設定を追加します。
supabase/config.jsonに設定を追加します。
@@ -3,7 +3,8 @@
"ports": {
"api": 54321,
"db": 54322,
- "studio": 54323
+ "studio": 54323,
+ "inbucket": 54324
},
"dbVersion": "140001"
}
Inbucketというアプリケーションを使用しています。
54324ポートで待ち受けるように設定します。
Supabaseを起動
Next.jsアプリから使用するSupbaseを起動します。
supabase start
はじめて起動した際は、dockerイメージの取得からはじまるので多少時間がかかります。
しばらく待つと次のようなメッセージが表示されます。
Started local development setup.
API URL: http://localhost:54321
DB URL: postgresql://postgres:postgres@localhost:54322/postgres
Studio URL: http://localhost:54323
Inbucket URL: http://localhost:54324
anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiJ9.ZopqoUt20nEV9cklpv9e3yw3PVyZLmKs5qLD6nGL1SI
service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoic2VydmljZV9yb2xlIn0.M2d2z4SFn5C7HlJlaSLfrzuYim9nbY_XI40uWFN3hEE
接続情報を設定
これら接続情報をNext.jsアプリに設定します。
cp .env .env.local
.env.localファイルを編集します。上記の接続情報の場合、次のように設定します。
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiJ9.ZopqoUt20nEV9cklpv9e3yw3PVyZLmKs5qLD6nGL1SI
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEYにanon key、NEXT_PUBLIC_SUPABASE_URLにAPI URLをセットします。
Next.jsアプリを起動
これで、準備ができたので、Next.jsを起動します。
npm run dev
動作確認
ブラウザーで開発サーバーに接続します。
ログイン画面が表示されます。
実際にメールが送信されるわけではないので、適当なメールアドレスで問題ありません。
Eメールを入力して、「マジックリンクを送信」ボタンをクリックすると、メールが送信されます。
送信されたメールをInbucketで確認できます。先ほど設定したポートにブラウザーで接続します。
上部のメニューから「Monitor」を選択します。
メールの一覧が確認できるので、先ほど送信されたメールを選択します。
「Confirm your email address」というリンクをクリックします。
ログインができて、ダッシュボードが表示されます。
さらに、Supabaseのダッシュボードもローカル環境で立ち上がっているので、次のポートをブラウザーで開きます。
Supabaseのダッシュボードが表示されます。
「Default Project」をクリックして、プロジェクトのダッシュボードを表示します。
「Authentication」ページに移動して、サイドメニューから「Users」を選択します。
先ほどのユーザーが作成されていることを確認できます。
Supabaseを停止するには次のコマンドを実行します。
supabase stop
ここまでのコードは次で確認できます。
おわりに
Supabaseはオープンソースで構成されているので、それらを組み合わせれば自身でも立ち上げることができます。ただ、Supbase CLIを使用することで、数ステップで構築できてしまうのは便利ですね。
ただ、便利に使うために、もう1つ抑えておきたい機能があります。
実は、supabase startでもう一度立ち上げると、先ほど作成したユーザーではログインできなくなります。
これは、Dockerのコンテナは「作っては捨てる」という性質のため、作成したデータはコンテナを止めるとなくなってしまいます。
毎回Supbaseを立ち上げる度にユーザー作成するのは不便です。その不便さを解消するために、Supbase CLIにマイグレーションとシードという機能があります。詳しくは後半で紹介します。
参考
Supbaseの知識を深めるために、ドキュメントの翻訳に取り組んでいます。
ローカル開発環境について、こちらも参考にしてください。
Discussion