⚙️

VercelとSupabaseを連携させる方法【画像付き】

2024/04/05に公開

はじめまして、たくびーと申します。
Qiitaでも投稿を行っていますが、今回からZennでも記事を投稿していこうと思います。
大体月2くらいの頻度で投稿しているのでぜひ見ていってください。

今回はVercelとSupabaseを連携させてアプリをデプロイしたのでその手順を書きたいと思います。
Vercel、Supabaseともに非常に簡単な操作で連携することができたので初心者の方でも安心してください。

Supabaseでの操作

DashboardからNew projectをクリックし、新しいプロジェクトを作成してください。

プロジェクトを作成する際は下記の画像を参考に項目を入力しCreate new projectをクリックしてプロジェクトを作成します。
（Regionは任意ですが日本リージョンがあるので変えておきましょう）

VercelのOverviewからAdd New...をクリックし、その中からProjectを選択します。

プロジェクト作成時にGithubと連携を行うので今回使用するリポジトリを選択してください。

Configure Project画面では特に設定は変えずこのままDeployで大丈夫です。
これでVercelにデプロイが完了します。

プロジェクトの設定が完了したらSettingsタブを選択し、その中からIntegrationsをクリックします。

下記の画面からIntegrations Marketplaceをクリックしてください。

左側のサーチボックスでSupabaseと入力すると検索結果としてSupabase連携が出てくるのでこちらをクリックしてください。

Add IntegrationをクリックしてVercelに追加しましょう。

インストール画面が出てくるのでSpecific Projectsを選択し、セレクトボックスから連携するVercelのプロジェクトを選択してください。
その後Installをクリックします。

下記の画面が出てきたらorganizationを確認し、Install integrationをクリックします。

Supabase、Vercelそれぞれ連携するプロジェクトを選択し、Connect projectをクリックしたら完了です。

以上でVercelとSupabaseの連携ができました。
基本的に画面に従い、プロジェクトを選択するだけで連携できてしまいます。素晴らしいですね。

Vercel、Supabaseともに最近話題のBaaSを使ったプロジェクトの設定方法を紹介しました。
基本的にはドキュメント通りに進めればできると思いますが、備忘録兼初心者向けということで記事に残したいと思いました。

画面が変わっていたり、うまくいかないという方のために公式ドキュメントを添付しておきます。
詳しくは下記をご参照ください。

それでは今回はこのあたりで締めたいと思います。
ここまで読んでいただきありがとうございます。
また機会があればお会いしましょう。