TiDB Cloudと Netlify を統合する
ネットリファイは、最新のWebプロジェクトを自動化するためのオールインワンプラットフォームです。ホスティングインフラストラクチャ、継続的インテグレーション、デプロイメントパイプラインを単一のワークフローに置き換え、プロジェクトの拡大に合わせてサーバーレス関数、ユーザー認証、フォーム処理などの動的な機能を統合します。
このドキュメントでは、TiDB CloudをデータベースバックエンドとしてNetlifyにフルスタックアプリをデプロイする方法について説明します。また、 TiDB Cloudサーバーレスドライバーを使用してNetlifyエッジ機能を使用する方法についても説明します。
前提条件
展開する前に、次の前提条件が満たされていることを確認してください。
NetlifyアカウントとCLI
NetlifyアカウントとCLIが必要です。お持ちでない場合は、以下のリンクを参照して作成してください。
TiDB Cloudアカウントと TiDB クラスター
TiDB Cloudのアカウントとクラスターが必要です。まだお持ちでない場合は、以下を参照して作成してください。
1 つのTiDB Cloudクラスターは複数の Netlify サイトに接続できます。
TiDB Cloudのトラフィックフィルターで許可されるすべての IP アドレス
TiDB Cloud Dedicated クラスターの場合、クラスターのトラフィックフィルターですべての IP アドレス（ 0.0.0.0/0に設定）が接続に許可されていることを確認してください。これは、Netlify デプロイメントが動的 IP アドレスを使用するためです。
TiDB Cloud Serverless クラスターは、デフォルトですべての IP アドレスの接続を許可するため、トラフィック フィルターを構成する必要はありません。
ステップ1. サンプルプロジェクトと接続文字列を取得する
すぐに使い始められるように、 TiDB CloudはReactとPrisma Clientを使用した、TypeScriptとNext.jsで書かれたフルスタックのサンプルアプリを提供しています。これはシンプルなブログサイトで、ご自身のブログを投稿したり削除したりできます。すべてのコンテンツはPrismaを介してTiDB Cloudに保存されます。
サンプルプロジェクトをフォークして自分のスペースにクローンする
Next.js と Prisma を使用したフルスタックの例リポジトリを自分の GitHub リポジトリにフォークします。
フォークしたリポジトリを自分のスペースにクローンします。
git clone https://github.com/${your_username}/nextjs-prisma-example.git cd nextjs-prisma-example/
TiDB Cloud接続文字列を取得する
TiDB Cloud Serverless クラスターの場合、接続文字列はTiDB CloudCLIまたはTiDB Cloudコンソールから取得できます。
TiDB Cloud Dedicated クラスターの場合、接続文字列はTiDB Cloudコンソールからのみ取得できます。
- TiDB Cloud CLI
- TiDB Cloud console
ヒント：
Cloud CLI をインストールしていない場合は、次の手順に進む前に、クイック インストールのTiDB Cloud CLI クイックスタートを参照してください。
対話モードでクラスターの接続文字列を取得します。
ticloud cluster connect-infoプロンプトに従って、クラスター、クライアント、オペレーティングシステムを選択してください。このドキュメントではクライアントは
Prismaです。Choose the cluster > [x] Cluster0(13796194496) Choose the client > [x] Prisma Choose the operating system > [x] macOS/Alpine (Detected)出力は次のようになります
url値に Prisma の接続文字列が含まれています。datasource db { provider = "mysql" url = "mysql://<User>:<Password>@<Endpoint>:<Port>/<Database>?sslaccept=strict" }注記：
後に接続文字列を使用する場合は、次の点に注意してください。
- 接続文字列内のパラメータを実際の値に置き換えます。
- このドキュメントのサンプル アプリには新しいデータベースが必要なので、
<Database>一意の新しい名前に置き換える必要があります。
TiDB Cloudコンソールでプロジェクトのクラスターページに移動し、ターゲットクラスターの名前をクリックして概要ページに移動し、右上隅の「接続」をクリックします。表示されるダイアログで、接続文字列から以下の接続パラメータを取得できます。
${host}${port}${user}${password}
次の接続文字列に接続パラメータを入力します。
mysql://<User>:<Password>@<Host>:<Port>/<Database>?sslaccept=strict注記：
後に接続文字列を使用する場合は、次の点に注意してください。
- 接続文字列内のパラメータを実際の値に置き換えます。
- このドキュメントのサンプル アプリには新しいデータベースが必要なので、
<Database>一意の新しい名前に置き換える必要があります。
ステップ2. サンプルアプリをNetlifyにデプロイ
Netlify CLI で、Netlify アカウントを認証し、アクセス トークンを取得します。
netlify login自動セットアップを開始します。このステップでは、継続的デプロイメントのためにリポジトリを接続するため、Netlify CLI がリポジトリにデプロイキーと Webhook を作成するためのアクセス権が必要になります。
netlify initプロンプトが表示されたら、 「新しいサイトの作成と構成」を選択し、GitHubへのアクセスを許可します。その他のオプションはすべてデフォルト値のままにしてください。
Adding local .netlify folder to .gitignore file... ? What would you like to do? + Create & configure a new site ? Team: your_username’s team ? Site name (leave blank for a random name; you can change it later): Site Created Admin URL: https://app.netlify.com/sites/mellow-crepe-e2ca2b URL: https://mellow-crepe-e2ca2b.netlify.app Site ID: b23d1359-1059-49ed-9d08-ed5dba8e83a2 Linked to mellow-crepe-e2ca2b
? Netlify CLI needs access to your GitHub account to configure Webhooks and Deploy Keys. What would you like to do? Authorize with GitHub through app.netlify.com
Configuring Next.js runtime...
? Your build command (hugo build/yarn run build/etc): npm run netlify-build
? Directory to deploy (blank for current dir): .next
Adding deploy key to repository...
(node:36812) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Deploy key added!
Creating Netlify GitHub Notification Hooks...
Netlify Notification Hooks configured!
Success! Netlify CI/CD Configured!
This site is now configured to automatically deploy from github branches & pull requests
Next steps:
git push Push to your git repository to trigger new site builds
netlify open Open the Netlify admin URL of your site
```
環境変数を設定します。自分のスペースとNetlifyスペースからTiDB Cloudクラスターに接続するには、 ステップ1から取得した接続文字列を
DATABASE_URLに設定する必要があります。# set the environment variable for your own space export DATABASE_URL='mysql://<User>:<Password>@<Endpoint>:<Port>/<Database>?sslaccept=strict' # set the environment variable for the Netlify space netlify env:set DATABASE_URL 'mysql://<User>:<Password>@<Endpoint>:<Port>/<Database>?sslaccept=strict'環境変数を確認してください。
# check the environment variable for your own space env | grep DATABASE_URL # check the environment variable for the Netlify space netlify env:listアプリをローカルでビルドし、スキーマをTiDB Cloudクラスターに移行します。
ヒント:
ローカルデプロイメントをスキップしてアプリを Netlify に直接デプロイする場合は、手順 6 に進んでください。
npm install . npm run netlify-buildアプリケーションをローカルで実行します。ローカル開発サーバーを起動して、サイトをプレビューできます。
netlify dev次に、ブラウザで
http://localhost:3000/に移動して、UI を調べます。アプリをNetlifyにデプロイ。ローカルプレビューに問題がなければ、以下のコマンドでサイトをNetlifyにデプロイできます。1
--triggerローカルファイルをアップロードせずにデプロイすることを意味します。ローカルで変更を加えた場合は、GitHubリポジトリにコミットしたことを確認してください。netlify deploy --prod --triggerNetlifyコンソールにアクセスして、デプロイの状態を確認してください。デプロイが完了すると、アプリのサイトにはNetlifyからパブリックIPアドレスが割り当てられ、誰でもアクセスできるようになります。
エッジ機能を使用する
前述のセクションで紹介したサンプルアプリは、Netlifyのサーバーレス関数上で動作します。このセクションでは、 TiDB Cloudサーバーレス ドライバーでエッジ関数を使用する方法を説明します。エッジ関数はNetlifyが提供する機能で、Netlify CDNのエッジでサーバーレス関数を実行できます。
エッジ機能を使用するには、次の手順を実行します。
プロジェクトのルート ディレクトリに
netlify/edge-functionsという名前のディレクトリを作成します。ディレクトリに
hello.tsという名前のファイルを作成し、次のコードを追加します。import { connect } from 'https://esm.sh/@tidbcloud/serverless' export default async () => { const conn = connect({url: Netlify.env.get('DATABASE_URL')}) const result = await conn.execute('show databases') return new Response(JSON.stringify(result)); } export const config = { path: "/api/hello" };DATABASE_URL環境変数を設定します。3 TiDB Cloudコンソール接続情報を取得できます。netlify env:set DATABASE_URL 'mysql://<username>:<password>@<host>/<database>'エッジ機能を Netlify にデプロイ。
netlify deploy --prod --trigger
その後、Netlifyコンソールにアクセスしてデプロイメントの状態を確認できます。デプロイメントが完了すると、 https://<netlify-host>/api/hello URLからエッジ関数にアクセスできます。