TiDB Cloudと Netlify を統合する
ネットリファイは、最新の Web プロジェクトを自動化するためのオールインワン プラットフォームです。ホスティング インフラストラクチャ、継続的インテグレーション、デプロイ パイプラインを単一のワークフローに置き換え、プロジェクトの成長に合わせてサーバーレス関数、ユーザー認証、フォーム処理などの動的な機能を統合します。
このドキュメントでは、 TiDB Cloud をデータベース バックエンドとして使用して Netlify にフルスタック アプリをデプロイする方法について説明します。
前提条件
展開する前に、次の前提条件が満たされていることを確認してください。
Netlify アカウントと CLI
Netlify アカウントと CLI が必要です。何も持っていない場合は、次のリンクを参照して作成してください。
TiDB Cloudアカウントと TiDB クラスター
TiDB Cloudにアカウントとクラスターが必要です。何も持っていない場合は、以下を参照して作成してください。
1 つのTiDB Cloudクラスターは複数の Netlify サイトに接続できます。
TiDB Cloudのトラフィック フィルターに許可されるすべての IP アドレス
TiDB 専用クラスターの場合、クラスターのトラフィック フィルターですべての IP アドレス ( 0.0.0.0/0に設定) の接続が許可されていることを確認してください。これは、Netlify デプロイメントでは動的 IP アドレスが使用されるためです。
TiDB サーバーレス クラスターでは、デフォルトですべての IP アドレスの接続が許可されるため、トラフィック フィルターを構成する必要はありません。
ステップ 1. サンプル プロジェクトと接続文字列を取得する
すぐに始められるように、 TiDB Cloud、React と Prisma Client を使用した Next.js を使用した TypeScript のフルスタック サンプル アプリを提供しています。自分でブログを投稿・削除できるシンプルなブログサイトです。すべてのコンテンツは 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 サーバーレス クラスターの場合、接続文字列はTiDB CloudCLIまたはTiDB Cloudコンソールから取得できます。
TiDB 専用クラスターの場合、接続文字列はTiDB Cloudコンソールからのみ取得できます。
- TiDB Cloud CLI
- TiDB Cloud console
ヒント：
Cloud CLI をインストールしていない場合は、次の手順を実行する前に、 TiDB CloudCLI クイック スタートのクイック インストールを参照してください。
対話型モードでクラスターの接続文字列を取得します。
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://: @ : / ?sslaccept=strict" } 注記：
後で接続文字列を使用する場合は、次の点に注意してください。
- 接続文字列内のパラメータを実際の値に置き換えます。
- このドキュメントのサンプル アプリには新しいデータベースが必要なので、
<Database>一意の新しい名前に置き換える必要があります。
TiDB Cloudコンソールでは、プロジェクトのクラスターページに移動し、ターゲット クラスターの名前をクリックして概要ページに移動し、右上隅の[接続]をクリックします。表示されたダイアログで、接続文字列から次の接続パラメータを取得できます。
${host}${port}${user}${password}
次の接続文字列に接続パラメータを入力します。
mysql://: @ : / ?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 にデプロイできます。
--triggerローカル ファイルをアップロードせずに展開することを意味します。ローカルで変更を加えた場合は、それを GitHub リポジトリにコミットしていることを確認してください。netlify deploy --prod --triggerNetlify コンソールに移動して、デプロイメントの状態を確認します。デプロイメントが完了すると、アプリのサイトには Netlify によって提供されるパブリック IP アドレスが設定され、誰もがアクセスできるようになります。