TiDB CloudとNetlifyを統合する

Netlify 、最新のWebプロジェクトを自動化するためのオールインワンプラットフォームです。ホスティングインフラストラクチャ、継続的インテグレーション、デプロイメントパイプラインを単一のワークフローに置き換え、プロジェクトの成長に合わせてサーバーレス関数、ユーザー認証、フォーム処理などの動的な機能を統合します。

このドキュメントでは、データベースバックエンドとしてTiDB Cloudを使用してNetlify上にフルスタックアプリをデプロイする方法について説明します。また、 TiDB Cloudサーバーレスドライバーを使用してNetlifyエッジ関数を利用する方法についても学ぶことができます。

前提条件

展開前に、以下の前提条件が満たされていることを確認してください。

NetlifyアカウントとCLI

NetlifyアカウントとCLIをお持ちであることが前提となります。お持ちでない場合は、以下のリンクを参照して作成してください。

TiDB CloudアカウントとTiDB Cloudリソース

アカウントとTiDB Cloudリソースをお持ちであることが前提となります。お持ちでない場合は、以下の手順に従って作成してください。

TiDB Cloudのリソース1つで、複数のNetlifyサイトに接続できます。

TiDB Cloudのトラフィックフィルタで許可されているすべてのIPアドレス

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

TiDB Cloud StarterおよびTiDB Cloud Essentialインスタンスは、デフォルトで全てのIPアドレスからの接続を許可するため、トラフィックフィルタを設定する必要はありません。

ステップ1. サンプルプロジェクトと接続文字列を取得します。

TiDB Cloudは、すぐに開発を始められるように、TypeScriptとNext.js、React、Prisma Clientを使用したフルスタックのサンプルアプリを提供しています。これは、ブログ記事の投稿や削除ができるシンプルなブログサイトです。すべてのコンテンツは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 StarterまたはTiDB Cloud Essentialインスタンスの場合、接続文字列はTiDB Cloud CLIまたはTiDB Cloudコンソールから取得できます。。

TiDB Cloud Dedicatedクラスタの場合、接続文字列はTiDB Cloudコンソールからのみ取得できます。

ヒント：
Cloud CLI をインストールしていない場合は、次の手順を実行する前に、 TiDB Cloud CLI クイックスタートを参照して簡単にインストールしてください。

TiDB Cloud StarterまたはTiDB Cloud Essentialインスタンスの接続文字列を対話モードで取得します。
```
ticloud cluster connect-info
```
プロンプトに従って、 TiDB Cloud StarterまたはTiDB Cloud Essentialインスタンス、クライアント、およびオペレーティングシステムを選択してください。なお、このドキュメントで使用されているクライアントは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コンソールでは、私のTiDBページに移動し、ターゲットリソースの名前をクリックして概要ページに移動し、右上隅の「接続」をクリックします。表示されたダイアログで、接続文字列から以下の接続パラメータを取得できます。
- ${host}
- ${port}
- ${user}
- ${password}
以下の接続文字列に接続パラメータを入力してください。
```
mysql://<User>:<Password>@<Host>:<Port>/<Database>?sslaccept=strict
```
注記：
後で接続文字列を使用する際は、以下の点に注意してください。
- 接続文字列内のパラメータを実際の値に置き換えてください。
- このドキュメントのサンプルアプリでは新しいデータベースが必要なので、 <Database>固有の新しい名前に置き換える必要があります。

ステップ2. サンプルアプリをNetlifyにデプロイ

Netlify CLIで、Netlifyアカウントを認証し、アクセストークンを取得します。
```
netlify login
```
自動セットアップを開始します。この手順では、継続的デプロイのためにリポジトリを接続するため、Netlify CLI がリポジトリ上にデプロイキーとウェブフックを作成するためのアクセス権が必要です。
```
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 にデプロイできます。 --triggerローカルファイルをアップロードせずにデプロイすることを意味します。ローカルで変更を加えた場合は、GitHub リポジトリにコミットされていることを確認してください。
```
netlify deploy --prod --trigger
```
Netlifyコンソールにアクセスして、デプロイ状況を確認してください。デプロイが完了すると、アプリのサイトには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環境変数を設定してください。接続情報はTiDB Cloudコンソールから取得できます。 .
```
netlify env:set DATABASE_URL 'mysql://<username>:<password>@<host>/<database>'
```
Netlifyにエッジ機能をデプロイ。
```
netlify deploy --prod --trigger
```

その後、Netlify コンソールにアクセスしてデプロイの状態を確認できます。デプロイが完了すると、 https://<netlify-host>/api/hello URL を介してエッジ機能にアクセスできます。