TiDB Cloud
TiDB Self-Managed
Learning Center
お問い合わせ

TiDB CloudとVercelを統合する

ヴェルセルはフロントエンド開発者向けのプラットフォームであり、イノベーターがインスピレーションの瞬間に創造するために必要なスピードと信頼性を提供します。

TiDB Cloudを Vercel と併用すると、MySQL 互換のリレーショナル モデルを使用して新しいフロントエンド アプリケーションをより迅速に構築し、回復力、拡張性、最高レベルのデータ プライバシーとセキュリティを実現するプラットフォームを使用して自信を持ってアプリを拡張できます。

このガイドでは、次のいずれかの方法を使用して、 TiDB Cloudクラスターを Vercel プロジェクトに接続する方法について説明します。

上記の両方の方法では、 TiDB Cloud はプログラムによってデータベースに接続するための次のオプションを提供します。

  • クラスタ: 直接接続またはサーバーレスドライバーを使用して、 TiDB Cloudクラスターを Vercel プロジェクトに接続します。
  • データアプリ : HTTP エンドポイントのコレクションを通じてTiDB Cloudクラスターのデータにアクセスします。

前提条件

接続する前に、次の前提条件が満たされていることを確認してください。

Vercel アカウントと Vercel プロジェクト

Vercel にアカウントとプロジェクトがあることが前提となります。アカウントとプロジェクトがない場合は、次の Vercel ドキュメントを参照して作成してください。

1 つの Vercel プロジェクトは 1 つのTiDB Cloudクラスターにのみ接続できます。統合を変更するには、まず現在のクラスターを切断してから、新しいクラスターに接続する必要があります。

TiDB Cloudアカウントと TiDB クラスター

TiDB Cloudにアカウントとクラスターがあることが前提となります。アカウントとクラスターがない場合は、以下を参照して作成してください。

  • TiDB Cloud Serverless クラスターを作成する

    注記：

    TiDB Cloud Vercel 統合は、 TiDB Cloud Serverless クラスターの作成をサポートしています。統合プロセス中に後で作成することもできます。

  • TiDB Cloud専用クラスターを作成する

    注記：

    TiDB Cloud Dedicated クラスターの場合、Vercel デプロイメントでは動的IPアドレス使用されるため、クラスターのトラフィック フィルターですべての IP アドレス ( 0.0.0.0/0に設定) が接続に許可されていることを確認してください。

TiDB Cloud Vercel Integrationを介してVercelと統合するについては、組織のOrganization OwnerロールまたはTiDB Cloudの対象プロジェクトのProject Ownerロールを担っていることが求められます。詳細については、 ユーザーロール参照してください。

1 つのTiDB Cloudクラスターは複数の Vercel プロジェクトに接続できます。

データアプリとエンドポイント

データアプリ経由でTiDB Cloudクラスターに接続する場合は、事前にTiDB Cloudにターゲット データ アプリとエンドポイントを用意しておく必要があります。用意していない場合は、以下を参照して作成してください。

  1. TiDB Cloudコンソールで、プロジェクトのデータサービスページに移動します。
  2. プロジェクトのデータアプリを作成する 。
  3. データアプリをリンクするターゲットのTiDB Cloudクラスターに追加します。
  4. エンドポイントを管理するなので、SQL ステートメントを実行するようにカスタマイズできます。

1 つの Vercel プロジェクトは、1 つのTiDB Cloud Data App にのみ接続できます。Vercel プロジェクトのデータ App を変更するには、まず現在の App を切断してから、新しい App に接続する必要があります。

TiDB Cloud Vercel統合を介して接続

TiDB Cloud Vercel 統合を介して接続するには、 Vercel の統合マーケットプレイスからTiDB Cloud統合ページに移動します。この方法を使用すると、接続するクラスターを選択でき、 TiDB Cloud はVercel プロジェクトに必要なすべての環境変数を自動的に生成します。

注記：

この方法は、 TiDB Cloud Serverless クラスターでのみ使用できます。TiDB TiDB Cloud Dedicated クラスターに接続する場合は、 手動方式を使用します。

統合ワークフロー

詳細な手順は次のとおりです。

  • Cluster
  • Data App

  1. TiDB Cloud Vercel 統合ページの右上にある「統合の追加」をクリックします。 「TiDB Cloud の追加」ダイアログが表示されます。

  2. ドロップダウン リストで統合の範囲を選択し、 [続行]をクリックします。

  3. 統合を追加する Vercel プロジェクトを選択し、 「続行」をクリックします。

  4. 統合に必要な権限を確認し、 「統合の追加」をクリックします。その後、 TiDB Cloudコンソールの統合ページに移動します。

  5. 統合ページで、次の操作を行います。

    1. 対象の Vercel プロジェクトを選択し、 「次へ」をクリックします。
    2. ターゲットのTiDB Cloud組織とプロジェクトを選択します。
    3. 接続タイプとしてクラスタを選択します。
    4. 対象のTiDB Cloudクラスターを選択します。クラスタのドロップダウン リストが空の場合、または新しいTiDB Cloud Serverless クラスターを選択する場合は、リスト内の+ クラスターの作成をクリックしてクラスタを作成します。
    5. 接続するデータベースを選択します。データベースのドロップダウン リストが空の場合、または新しいデータベースを選択する場合は、リスト内の[+ データベースの作成]をクリックしてデータベースを作成します。
    6. Vercel プロジェクトが使用しているフレームワークを選択します。ターゲット フレームワークがリストされていない場合は、 [全般]を選択します。フレームワークによって環境変数が異なります。
    7. プレビュー環境用の新しいブランチを作成するためにブランチを有効にするかどうかを選択します。
    8. 「統合を追加」をクリックして、Vercel に戻ります。

Vercel Integration Page

  1. Vercel ダッシュボードに戻り、Vercel プロジェクトに移動して、 「設定」 > 「環境変数」をクリックし、ターゲット TiDB クラスターの環境変数が自動的に追加されているかどうかを確認します。

    以下の変数が追加されていれば統合は完了です。

    一般的な

    TIDB_HOST
TIDB_PORT
TIDB_USER
TIDB_PASSWORD
TIDB_DATABASE

    プリズマ

    DATABASE_URL

    TiDB CloudサーバーレスDriver

    DATABASE_URL

  1. TiDB Cloud Vercel 統合ページの右上にある「統合の追加」をクリックします。 「TiDB Cloud の追加」ダイアログが表示されます。

  2. ドロップダウン リストで統合の範囲を選択し、 [続行]をクリックします。

  3. 統合を追加する Vercel プロジェクトを選択し、 「続行」をクリックします。

  4. 統合に必要な権限を確認し、 「統合の追加」をクリックします。その後、 TiDB Cloudコンソールの統合ページに移動します。

  5. 統合ページで、次の操作を行います。

    1. 対象の Vercel プロジェクトを選択し、 「次へ」をクリックします。
    2. ターゲットのTiDB Cloud組織とプロジェクトを選択します。
    3. 接続タイプとしてデータ アプリを選択します。
    4. ターゲットの TiDB データ アプリを選択します。
    5. 「統合を追加」をクリックして、Vercel に戻ります。

Vercel Integration Page

  1. Vercel ダッシュボードに戻り、Vercel プロジェクトに移動して、 「設定」 > 「環境変数」をクリックし、対象のデータ アプリの環境変数が自動的に追加されているかどうかを確認します。

    以下の変数が追加されていれば統合は完了です。

    DATA_APP_BASE_URL
DATA_APP_PUBLIC_KEY
DATA_APP_PRIVATE_KEY

接続を構成する

TiDB Cloud Vercel 統合インストールしている場合は、統合内で接続を追加または削除できます。

  1. Vercel ダッシュボードで、 「統合」をクリックします。

  2. TiDB Cloudエントリで[管理] をクリックします。

  3. [構成]をクリックします。

  4. 接続を追加または削除するには、 「リンクの追加」または「削除」をクリックします。

    Vercel Integration Configuration Page

    接続を削除すると、統合ワークフローによって設定された環境変数も Vercel プロジェクトから削除されます。ただし、このアクションはTiDB Cloud Serverless クラスターのデータには影響しません。

TiDB Cloud Serverless ブランチに接続

Vercel のプレビュー展開機能を使用すると、Git プロジェクトの本番ブランチに変更をマージすることなく、ライブ デプロイメントでアプリの変更をプレビューできます。 TiDB Cloudサーバーレス ブランチ使用すると、Vercel プロジェクトのブランチごとに新しいインスタンスを作成できます。これにより、本番データに影響を与えることなく、ライブ デプロイメントでアプリの変更をプレビューできます。

注記：

現在、 TiDB Cloud Serverless ブランチはGitHub リポジトリに関連付けられた Vercel プロジェクトのみをサポートしています。

TiDB Cloud Serverless Branching を有効にするには、 TiDB Cloud Vercel 統合ワークフローで次の点を確認する必要があります。

  1. 接続タイプとしてクラスタを選択します。
  2. ブランチを有効にして、プレビュー環境用の新しいブランチを作成します。

変更を Git リポジトリにプッシュすると、Vercel はプレビュー デプロイメントをトリガーします。TiDB TiDB Cloud統合により、Git ブランチ用のTiDB Cloud Serverless ブランチが自動的に作成され、環境変数が設定されます。詳細な手順は次のとおりです。

  1. Git リポジトリに新しいブランチを作成します。

    cd tidb-prisma-vercel-demo1
git checkout -b new-branch

  2. いくつかの変更を追加し、その変更をリモート リポジトリにプッシュします。

  3. Vercel は新しいブランチのプレビュー展開をトリガーします。

    Vercel Preview_Deployment

    1. デプロイメント中に、 TiDB Cloud統合により、Git ブランチと同じ名前のTiDB Cloud Serverless ブランチが自動的に作成されます。TiDB TiDB Cloud Serverless ブランチがすでに存在する場合、 TiDB Cloud統合はこの手順をスキップします。

      TiDB_Cloud_Branch_Check

    2. TiDB Cloud Serverless ブランチの準備が整うと、 TiDB Cloud統合により、Vercel プロジェクトのプレビュー デプロイメントで環境変数が設定されます。

      Preview_Envs

    3. TiDB Cloud統合では、 TiDB Cloud Serverless ブランチの準備ができるまで待機するためのブロッキング チェックも登録されます。チェックは手動で再実行できます。

  4. チェックに合格したら、プレビュー デプロイメントにアクセスして変更を確認できます。

注記：

Vercel デプロイメント ワークフローの制限により、デプロイメントで環境変数が確実に設定されるわけではありません。この場合、デプロイメントを再デプロイする必要があります。

注記：

TiDB Cloudの各組織では、デフォルトで最大 5 つのTiDB Cloud Serverless ブランチを作成できます。制限を超えないようにするには、不要になったTiDB Cloud Serverless ブランチを削除します。詳細については、 TiDB Cloud Serverlessブランチを管理する参照してください。

環境変数を手動で設定して接続する

  • Cluster
  • Data App

  1. TiDB クラスターの接続情報を取得します。

    接続情報は、クラスターの接続ダイアログから取得できます。ダイアログを開くには、プロジェクトのクラスターページに移動し、ターゲット クラスターの名前をクリックして概要ページに移動し、右上隅の[接続]をクリックします。

  2. Vercel ダッシュボード > Vercel プロジェクト >設定>環境変数に移動し、TiDB クラスターの接続情報に従って各環境変数の値を宣言する実行します。

    Vercel Environment Variables

ここでは、例として Prisma アプリケーションを使用します。以下は、 TiDB Cloud Serverless クラスターの Prisma スキーマ ファイルのデータ ソース設定です。

datasource db {
    provider = "mysql"
    url      = env("DATABASE_URL")
}

Vercel では、次のように環境変数を宣言できます。

  • キー= DATABASE_URL
  • 値= mysql://<User>:<Password>@<Endpoint>:<Port>/<Database>?sslaccept=strict

<User> <Password>情報<Port> <Endpoint> <Database> TiDB Cloudコンソールで取得できます。

  1. データ アプリとそのエンドポイントをまだ作成していない場合は、手順データアプリを管理するとエンドポイントの管理に従って作成します。

  2. Vercel ダッシュボード > Vercel プロジェクト >設定>環境変数に移動し、データ アプリの接続情報に従って各環境変数の値を宣言する実行します。

    Vercel Environment Variables

    Vercel では、次のように環境変数を宣言できます。

    • キー= DATA_APP_BASE_URL
    • 値= <DATA_APP_BASE_URL>
    • キー= DATA_APP_PUBLIC_KEY
    • 値= <DATA_APP_PUBLIC_KEY>
    • キー= DATA_APP_PRIVATE_KEY
    • 値= <DATA_APP_PRIVATE_KEY>

    <DATA_APP_BASE_URL> <DATA_APP_PRIVATE_KEY>情報は<DATA_APP_PUBLIC_KEY> TiDB Cloudコンソールのデータサービスページから取得できます。

このページは役に立ちましたか？