Vercel上のNuxtアプリとSupabaseをなるべく簡単に接続する
こんにちは、合同会社Stegのkeigoです。今回は、VercelでホスティングしているNuxtアプリケーションとSupabaseの接続方法を紹介します。
一般公開する際は、アプリケーションの要件に応じて適切なDB接続方式を採用してください。
前提条件:
- Nuxt Serverにバックエンド処理が書かれている。
- Vercelへのデプロイが完了している。
1. Connection URIを用いてDBと接続する
Connection URIは、以下のように postgres:// から始まり、ユーザ名、パスワード、ホスト名、ポート番号、データベース名が記載されたURIです。
postgres://user:password@host:port/db
Nuxt Serverにて、DB接続処理を記述してください。今回は、Drizzle ORMを使用しています。
import { drizzle } from "drizzle-orm/node-postgres";
import pg from "pg";
export const client = new pg.Client({
connectionString: process.env.DATABASE_CONNECTION_URI,
});
await client.connect();
export const db = drizzle(client);
他にも、オブジェクトとしてHostやUser、Password等を渡す書き方でもOKです。
// HostやUser、Password等を渡す書き方の例
const client = new pg.Client({
host: "127.0.0.1",
port: 5432,
user: "postgres",
password: "password",
database: "db_name",
});
2. SupabaseでDBを作成し、Connection stringを取得
Supabaseの管理画面にて、DB接続に必要な情報を取得します。
Database Settings > Connection string
3. Vercelの環境変数に、Supabase側のConnection URIを登録
Vercelの管理画面にログインし、Supabase管理画面にて取得した接続情報を環境変数に登録します。
URIを登録する際は、パスワードが含まれていることを確認してください。
4. SupabaseのSQL Editorにて、MigrationやSeedを実行
SupabaseのSQL Editorを開き、テーブルや初期データなどを作成するためのSQL（DDL・DML）を貼り付けて実行します。
今回はDrizzle ORMが生成したSQLをそのまま貼り付ける形で実行しています。
5. VercelとSupabaseを連携させる
VercelとSupabaseを連携させることで、Supabaseで作成したプロジェクトの環境変数が自動で登録されます。
Vercel側
SupabaseのIntegrationを追加します。
Manage Accessボタンより、対象のVercelプロジェクトに権限を与えます。
Supabase側
Add new project connectionボタンより、VercelプロジェクトとSupabaseプロジェクトを連携させます。
Vercelのプロジェクトに、いくつかの環境変数が追加されていれば完了です。
以上で設定は完了です。
デプロイした上でVercelサーバー上のアプリケーションにアクセスし、DBと接続ができていれば成功です。🙌
Discussion