Supabase と Vercel でカスタムドメインを設定する

Supabase と Vercel でカスタムドメインを設定する

カスタムドメインを利用することで、OAuth のリダイレクト URL や画像の URL を独自ドメインに変更できます。ユーザーに対してより一貫したブランド体験を提供することができるので、おすすめです。

Supabase では、以下の 2 種類のドメインを使用できます。

• カスタムドメイン
• バニティサブドメイン

カスタムドメインとは、自分で取得したドメインを使うことです。例えば、example.com というドメインを取得して、Supabase の API エンドポイントを api.example.com に設定することができます。

バニティサブドメインとは、supabase.co のサブドメインを使うことです。例えば、example.supabase.co のようになります。ただ、この方法だと、画像 URL などに Supabase のドメインが含まれます。

カスタムドメインを使用することで、API のバージョン管理が容易になったり、OAuth 認証時に Supabase のドメインではなく独自ドメインを表示することができます。また、ストレージの画像 URL も独自ドメインで提供することが可能です。

例: 画像の URL を https://api.example.com/fuga.jpg のように変更できます。

カスタムドメインの設定手順

ここからは、Vercel と Supabase でカスタムドメインを設定する手順を詳しく説明します。

1. Vercel での設定

まず、Vercel の管理画面にログインし、以下の手順で CNAME レコードを設定します。

1. Vercel Dashboard にログインします。
2. 設定したいプロジェクトを選択します。
3. 「Settings」タブを開き、「Domains」セクションに移動します。
4. 「Add Domain」ボタンをクリックし、カスタムドメインを入力します（例：api.example.com）。

ドメインを追加した後、DNS 設定で以下の CNAME レコードを追加します。

• Type: CNAME
• Name: api（これで api.example.com が作成されます）
• Value: example.supabase.co
• TTL: デフォルトのままで問題ありません

CNAME レコードとは、ドメイン名を IP アドレスに変換する DNS レコードの一種です。Vercel で設定することで、api.example.com というサブドメインを作成し、Supabase の API エンドポイントにリダイレクトします。

2. Supabase でのカスタムドメイン設定

次に、Supabase 側でカスタムドメインの設定を行います。

1. Supabase Dashboard にログインします。
2. 設定したいプロジェクトを選択し、「Settings」タブを開きます。
3. 「Custom Domain」セクションを見つけ、api.example.com を入力して設定します。
4. Supabase はドメインの所有権を確認するために、TXT レコードの情報を提示します。この情報をコピーしてください。

3. Vercel での TXT レコードの設定

次に、Vercel の管理画面で TXT レコードを設定して、ドメインの所有確認を行います。

Vercel のプロジェクト設定で、DNS レコードを追加します。以下のように TXT レコードを設定します。

• Type: TXT
• Name: _acme-challenge.api.example.com
• Value: Supabase から提供された TXT レコードの値
• TTL: デフォルトのままで問題ありません

設定を保存し、Supabase のダッシュボードに戻って「Activate」ボタンを押してカスタムドメインを有効化します。

この手順により、Supabase はドメインの所有者が正当であることを確認し、カスタムドメインの設定を完了します。

カスタムドメイン設定後の確認

最後に、カスタムドメインが正常に設定されたかどうかを確認しましょう。

1. ブラウザで https://api.example.com にアクセスしてみてください。
2. 正常に Supabase のエンドポイントに接続できれば、設定は成功です。
3. OAuth 認証やストレージの画像リンクなど、独自ドメインで問題なく機能しているかを確認します。

注意点

• SSL 証明書は、Supabase が自動的に管理するため、手動で設定する必要はありません。
• ドメイン設定には 反映までに数分から最大 48 時間かかることがあるため、ドメインがすぐに機能しない場合は少し時間をおいて再確認してください。

まとめ

カスタムドメインを設定することで、よりプロフェッショナルで一貫したブランド体験をユーザーに提供することができます。Vercel と Supabase を使ったカスタムドメイン設定は、手順を踏めば比較的簡単に行えます。この記事を参考に、ぜひ独自ドメインでのサービス提供を検討してみてください。