LoginSignup
1
3

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

Last updated at Posted at 2024-04-05

どうもこんにちは、たくびー(@takubii)です。

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

Supabaseでの操作

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

スクリーンショット 2024-03-21 15.54.42.png

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

スクリーンショット 2024-03-21 15.55.06.png

Vercelでの操作

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

スクリーンショット 2024-03-21 16.03.39.png

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

スクリーンショット 2024-03-21 16.04.04.png

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

スクリーンショット 2024-03-21 16.04.18.png

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

スクリーンショット 2024-03-21 16.10.22.png

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

スクリーンショット 2024-03-21 16.10.58.png

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

スクリーンショット 2024-03-21 16.11.51.png

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

スクリーンショット 2024-03-21 16.12.01.png

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

スクリーンショット 2024-03-21 16.13.16.png

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

スクリーンショット 2024-03-21 16.13.58.png

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

スクリーンショット 2024-03-21 16.14.41.png

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

終わりに

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

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

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

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3