🔗

Vercel上のNuxtアプリとSupabaseをなるべく簡単に接続する

keigo

2024/04/14に公開

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",
});