strapiとsupabaseをつなぐ (DB編)

IKEAのサメアイコンが一人で完走を目指す Advent Calendar 2022 2日目ではローカルに立てられるheadlessCMSとしてStrapiを紹介しました。
Strapiの良い点の一つにDBを自由にできるという点があるのですが、同時にこれはDBを用意しなければならないという欠点でもあります。

個人にとって、RDSとかCloud SQLとかは著しく高いわけではありませんが、特にお安いわけでもありません。

これが会社なら、予算さえ確保しておけばとりあえず脳死でAWSやGCPを使えばよいですが、個人となるとそうもいきません。
別に会社であれば無尽蔵にお金を使ってよいというわけではないのですが、個人だと可能な限りお金を使いたくないので無料なものを使用したいです。

というわけで、ちょうど昨日のアドベントカレンダーの記事で触ってみたsupabaseが偶然、たまたま、運よくPostgreSQLとして使用できたのでこちらの無料分を使っていきたいと思います。

SupabaseのDBに直接繋ぐ

まず、Strapi環境を作成します。

npx create-strapi-app@latest

いつものごとく質問事項が出てくるので、ぺちぺち適当な値を入力します。
DB関連は下手にsupabaseを見に行ったりせず、本当に適当な値を入れていきましょう。

? What would you like to name your project? temp_strapi
? Choose your installation type Custom (manual settings)
? Choose your preferred language TypeScript
? Choose your default database client postgres
? Database name: temp_strapi
? Host: 127.0.0.1
? Port: 5432
? Username: pass
? Password: ****
? Enable SSL connection: Yes

以前の記事ではAPI経由でDBにつなぎましたが、実は直繋ぎもできたりします。
ダッシュボードから。Setting > Databaseと行くと、接続に必要な各種情報が記載されているページにたどり着くことができます。
そちらに記載されている値を見ながら、先ほど作成したStrapiのconfig/database.tsを見に行きましょう。

config/database.ts

export default ({ env }) => ({
  connection: {
    client: 'postgres',
    connection: {
      host: env('DATABASE_HOST', '127.0.0.1'),
      port: env.int('DATABASE_PORT', 5432),
      database: env('DATABASE_NAME', 'temp_strapi'),
      user: env('DATABASE_USERNAME', 'pass'),
      password: env('DATABASE_PASSWORD', 'pass'),
      ssl: env.bool('DATABASE_SSL', true),
    },
  },
});

するとはい、このように先のCLI上で入力した値が載っています。
ポートとかはかわいいもんですけど、ホスト先とパスワードここに直書きしてくるの勘弁してほしいですね。.envに吐け。

一通り値を消して、そこに記載されている環境変数に合わせてsupabaseのダッシュボードの内容を.envに記載していきましょう。

.env

//...

DATABASE_HOST=
DATABASE_PORT=
DATABASE_NAME=
DATABASE_USERNAME=
DATABASE_PASSWORD=
DATABASE_SSL=

config/database.ts

export default ({ env }) => ({
  connection: {
    client: "postgres",
    connection: {
      host: env("DATABASE_HOST"),
      port: env.int("DATABASE_PORT"),
      database: env("DATABASE_NAME"),
      user: env("DATABASE_USERNAME"),
      password: env("DATABASE_PASSWORD"),
      ssl: env("DATABASE_SSL", true)
    }
  },
});

記入が終わったら、SSLで接続するための証明書を用意します。
supabaseのDatabase settingsにある↓の項目からダウンロードできます。

ダウンロードしたら、適当な名前を付けて適当な場所に置いておきます。
設置を確認して、そこのパスを指定してreadFileSyncで証明書情報を取得しましょう。
以下は、プロジェクトのルートに置いた際の例です。

config/database.ts

import { readFileSync } from "node:fs";

// ...
      ssl: env.bool("DATABASE_SSL")
        ? {
            ca: readFileSync(
              `${__dirname}/../../supabase.crt`
            ).toString(),
          }
        : false,

正直もうちょっとやり方あった気がするんですがまあいいでしょう。
まじめにやるならbase64変換して環境変数にでも渡してあげた方がよいかもしれません。

これで準備完了です。
developで開発環境を立ち上げて一通り操作したのち、supabaseを見に行くとすごい数のテーブルが作成されていることが確認できるかと思います。

終わりに

というわけで、ひとまずはここまでです。
firebaseとは異なり内部でpostgreSQLが動いてるとこういったことができるので便利ですね。
ただ、これだとファイルがstrapi管理になっていて片手落ちなので、近いうちにこれもsupabase管理にする記事を書きたいと思います。