Logo
    Supabaseにカスタムドメインを設定した

    Supabaseにカスタムドメインを設定した

    はじめに

    ゆとり世代の中野です。

    さっそくチャレンジについて書いていきます。

    チャレンジする背景

    • DXとUXのため

    チャレンジ内容

    • supabaseにカスタムドメインを設定する

    やったこと

    事前準備

    • Supabase
      • カスタムドメインのアドオンを有効化する
        • image
        image
    • Cloudflare
      • レコードを追加するを押下する
        • image

    カスタムドメインを設定する

    • Supabase
      • 例
        • Add a custom domain: api.example.com
        image
    • Cloudflare
      • 例
        • 名前: api
        • ターゲット: 自分のsupabaseのproject_id.supabase.co
        • プロキシステータス: DNSのみ(グレー色の雲)
        • TTL: 自動
        image

    TXTを設定する

    • Supabase
      • TXTのNameとContentをコピーしてCloudflareに登録後にVerifyを押下する
        • image
    • Cloudflare
      • SupabaseのTXTのNameとContentを元にレコードを登録する
        • 名前: supabaseのTXTで表示されているName
        • TTL: 自動
        • コンテンツ: supabaseのTXTで表示されているContent
          • ダブルクォーテーションで囲ってください
        image

    カスタムドメインを有効化する

    • Activeを押下する
      • image
    • 設定内容を確認して問題なければActiveを押下する
      • image
    • 設定が反映されていることを確認してください
      • image

    結論

    • Supabaseにカスタムドメインの設定ができました

    さいごに

    • Supabaseを利用している各サービスの環境変数の上書きを忘れずに！

    yutanakano

    WEBエンジニア

    大阪生まれのゆとり世代です

    趣味はバイクでツーリングに行くこと

    愛車は Ninja ZX-25R SE KRT EDITION

    Expoでプロダクトを作っています

    image

    ©ゆとりちゃれんじ

    GitHubXInstagram