TiDB Cloudを Netlify と統合する

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

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

前提条件

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

Netlify アカウントと CLI

Netlify アカウントと CLI が必要です。お持ちでない場合は、次のリンクを参照して作成してください。

• Netlifyアカウントにサインアップする 。
• Netlify CLI を入手する 。

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

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

• TiDB Cloud Serverless クラスターを作成する
• 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 を使用して、Next.js による TypeScript のフルスタック サンプル アプリを提供しています。これは、自分のブログを投稿したり削除したりできるシンプルなブログ サイトです。すべてのコンテンツは、Prisma を通じてTiDB Cloudに保存されます。

サンプルプロジェクトをフォークして自分のスペースにクローンする

1. Next.js と Prisma を使用したフルスタックの例リポジトリを自分の GitHub リポジトリにフォークします。

2. フォークしたリポジトリを自分のスペースにクローンします。

   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

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

1. Netlify CLI で、Netlify アカウントを認証し、アクセス トークンを取得します。

   netlify login
   

2. 自動セットアップを開始します。この手順では、継続的なデプロイのためにリポジトリを接続するため、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
```

3. 環境変数を設定します。自分のスペースと 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
   

4. アプリをローカルでビルドし、スキーマをTiDB Cloudクラスターに移行します。

   ヒント:

   ローカルデプロイをスキップしてアプリを Netlify に直接デプロイする場合は、手順 6 に進んでください。

   npm install .
   npm run netlify-build
   

5. アプリケーションをローカルで実行します。ローカル開発サーバーを起動してサイトをプレビューできます。

   netlify dev
   

   次に、ブラウザでhttp://localhost:3000/に移動して、その UI を調べます。

6. アプリを Netlify にデプロイ。ローカル プレビューに満足したら、次のコマンドを使用してサイトを Netlify にデプロイできます。1 --trigger 、ローカル ファイルをアップロードせずにデプロイすることを意味します。ローカルで変更を加えた場合は、必ず GitHub リポジトリにコミットしてください。

   netlify deploy --prod --trigger
   

   Netlify コンソールに移動して、デプロイメントの状態を確認します。デプロイメントが完了すると、アプリのサイトには Netlify によって提供されるパブリック IP アドレスが割り当てられ、誰でもアクセスできるようになります。

エッジ機能を使用する

上のセクションで説明したサンプル アプリは、Netlify サーバーレス関数で実行されます。このセクションでは、 TiDB Cloudサーバーレス ドライバーでエッジ関数を使用する方法を説明します。エッジ関数は Netlify が提供する機能で、Netlify CDN のエッジでサーバーレス関数を実行できます。

エッジ機能を使用するには、次の手順を実行します。

1. プロジェクトのルート ディレクトリにnetlify/edge-functionsという名前のディレクトリを作成します。

2. ディレクトリに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" };
   

3. DATABASE_URL環境変数を設定します。3 から接続情報を取得できますTiDB Cloudコンソール

   netlify env:set DATABASE_URL 'mysql://<username>:<password>@<host>/<database>'
   

4. エッジ機能を Netlify にデプロイ。

   netlify deploy --prod --trigger
   

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