Next.js の mysql2 を使用して TiDB に接続する

TiDB は MySQL 互換データベースであり、 mysql2は Node.js 用の人気のあるオープンソースドライバーです。

このチュートリアルでは、Next.js で TiDB と mysql2 を使用して次のタスクを実行する方法を学習できます。

環境をセットアップします。
mysql2 を使用して TiDB クラスターに接続します。
アプリケーションをビルドして実行します。オプションで、基本的な CRUD 操作のサンプルコードスニペットを見つけることができます。

注記
このチュートリアルは、TiDB サーバーレスおよび TiDB セルフホストで動作します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.js 18以降。
ギット。
TiDB クラスター。

TiDB クラスターがない場合は、次のように作成できます。

(推奨) TiDB サーバーレスクラスターの作成に従って、独自のTiDB Cloudクラスターを作成します。
ローカルテスト TiDB クラスターをデプロイまたは本番TiDB クラスターをデプロイに従ってローカルクラスターを作成します。

サンプルアプリを実行して TiDB に接続する

このセクションでは、サンプルアプリケーションコードを実行して TiDB に接続する方法を説明します。

注記
完全なコードスニペットと実行手順については、 tidb-nextjs-vercel-クイックスタート GitHub リポジトリを参照してください。

ステップ 1: サンプルアプリリポジトリのクローンを作成する

ターミナルウィンドウで次のコマンドを実行して、サンプルコードリポジトリのクローンを作成します。

git clone git@github.com:tidb-samples/tidb-nextjs-vercel-quickstart.git
cd tidb-nextjs-vercel-quickstart

ステップ 2: 依存関係をインストールする

次のコマンドを実行して、サンプルアプリに必要なパッケージ ( mysql2を含む) をインストールします。

npm install

ステップ 3: 接続情報を構成する

選択した TiDB デプロイメントオプションに応じて、TiDB クラスターに接続します。

クラスターページに移動し、ターゲットクラスターの名前をクリックして、その概要ページに移動します。
右上隅にある「接続」をクリックします。接続ダイアログが表示されます。
接続ダイアログの設定が動作環境と一致していることを確認してください。
- エンドポイントタイプはPublicに設定されます
- ブランチはmainに設定されています
- [接続先] はGeneralに設定されています
- オペレーティングシステムが環境に一致します。
注記
Node.js アプリケーションでは、TLS (SSL) 接続を確立するときにデフォルトで組み込みのMozilla CA 証明書を使用するため、SSL CA 証明書を提供する必要はありません。
「パスワードの生成」をクリックして、ランダムなパスワードを作成します。
ヒント
以前にパスワードを作成したことがある場合は、元のパスワードを使用するか、 「パスワードのリセット」をクリックして新しいパスワードを生成できます。
次のコマンドを実行して.env.exampleをコピーし、名前を.envに変更します。
```
# Linux
cp .env.example .env
```
```
# Windows
Copy-Item ".env.example" -Destination ".env"
```
対応する接続文字列をコピーして.envファイルに貼り付けます。結果の例は次のとおりです。
```
TIDB_HOST='{gateway-region}.aws.tidbcloud.com'
TIDB_PORT='4000'
TIDB_USER='{prefix}.root'
TIDB_PASSWORD='{password}'
TIDB_DB_NAME='test'
```
{}のプレースホルダーを、接続ダイアログで取得した値に置き換えます。
.envファイルを保存します。

次のコマンドを実行して.env.exampleをコピーし、名前を.envに変更します。
```
# Linux
cp .env.example .env
```
```
# Windows
Copy-Item ".env.example" -Destination ".env"
```
対応する接続文字列をコピーして.envファイルに貼り付けます。結果の例は次のとおりです。
```
TIDB_HOST='{tidb_server_host}'
TIDB_PORT='4000'
TIDB_USER='root'
TIDB_PASSWORD='{password}'
TIDB_DB_NAME='test'
```
{}のプレースホルダーを、 「接続」ウィンドウで取得した値に置き換えます。 TiDB をローカルで実行している場合、デフォルトのホストアドレスは127.0.0.1で、パスワードは空です。
.envファイルを保存します。

ステップ 4: コードを実行して結果を確認する

アプリケーションを起動します。
```
npm run dev
```
ブラウザを開いてhttp://localhost:3000にアクセスします。 (実際のポート番号については端末を確認してください。デフォルトは3000です。)
「RUN SQL」をクリックしてサンプルコードを実行します。
端末の出力を確認します。出力が次のような場合、接続は成功しています。
```
{
  "results": [
    {
      "Hello World": "Hello World"
    }
  ]
}
```

サンプルコードスニペット

次のサンプルコードスニペットを参照して、独自のアプリケーション開発を完了できます。

完全なサンプルコードとその実行方法については、 tidb-nextjs-vercel-クイックスタートリポジトリを確認してください。

TiDB に接続する

次のコードは、環境変数で定義されたオプションを使用して TiDB への接続を確立します。

// src/lib/tidb.js
import mysql from 'mysql2';

let pool = null;

export function connect() {
  return mysql.createPool({
    host: process.env.TIDB_HOST, // TiDB host, for example: {gateway-region}.aws.tidbcloud.com
    port: process.env.TIDB_PORT || 4000, // TiDB port, default: 4000
    user: process.env.TIDB_USER, // TiDB user, for example: {prefix}.root
    password: process.env.TIDB_PASSWORD, // The password of TiDB user.
    database: process.env.TIDB_DATABASE || 'test', // TiDB database name, default: test
    ssl: {
      minVersion: 'TLSv1.2',
      rejectUnauthorized: true,
    },
    connectionLimit: 1, // Setting connectionLimit to "1" in a serverless function environment optimizes resource usage, reduces costs, ensures connection stability, and enables seamless scalability.
    maxIdle: 1, // max idle connections, the default value is the same as `connectionLimit`
    enableKeepAlive: true,
  });
}

export function getPool() {
  if (!pool) {
    pool = createPool();
  }
  return pool;
}

データの挿入

次のクエリは、単一のPlayerレコードを作成し、 ResultSetHeaderオブジェクトを返します。

const [rsh] = await pool.query('INSERT INTO players (coins, goods) VALUES (?, ?);', [100, 100]);
console.log(rsh.insertId);

詳細については、データの挿入を参照してください。

クエリデータ

次のクエリは、ID 1による単一のPlayerレコードを返します。

const [rows] = await pool.query('SELECT id, coins, goods FROM players WHERE id = ?;', [1]);
console.log(rows[0]);

詳細については、クエリデータを参照してください。

データを更新する

次のクエリは、ID 1のPlayerに50コインと50グッズを追加します。

const [rsh] = await pool.query(
    'UPDATE players SET coins = coins + ?, goods = goods + ? WHERE id = ?;',
    [50, 50, 1]
);
console.log(rsh.affectedRows);

詳細については、データを更新するを参照してください。

データの削除

次のクエリは、ID 1のPlayerレコードを削除します。

const [rsh] = await pool.query('DELETE FROM players WHERE id = ?;', [1]);
console.log(rsh.affectedRows);

詳細については、データの削除を参照してください。

便利なメモ

接続プールを使用してデータベース接続を管理すると、接続の頻繁な確立と破棄によって生じるパフォーマンスのオーバーヘッドを軽減できます。
SQL インジェクションを回避するには、準備されたステートメントを使用することをお勧めします。
複雑な SQL ステートメントがあまり含まれないシナリオでは、続編、 TypeORM 、またはプリズマのような ORM フレームワークを使用すると、開発効率が大幅に向上します。

次のステップ

ORM と Next.js を使用して複雑なアプリケーションを構築する方法の詳細については、私たちの書店デモを参照してください。
node-mysql2 ドライバーの使用法についてはnode-mysql2 のドキュメントから学びましょう。
TiDB アプリケーション開発単一テーブルの読み取りベストプラクティスについて取引、開発者ガイドの章 ( データの挿入など) データを更新する参照データの削除 SQLパフォーマンスの最適化ください。
プロフェッショナルとしてTiDB 開発者コースを学び、試験合格後にTiDB 認定獲得します。

助けが必要？

不和またはサポートチケットを作成するについて質問してください。