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

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

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

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

注記
このチュートリアルは、 TiDB Cloud Serverless および TiDB Self-Managed で機能します。

前提条件

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

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

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

(推奨) TiDB Cloud Serverless クラスターの作成に従って、独自の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) 接続を確立するときに Node.js がデフォルトで組み込みの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です。)
サンプルコードを実行するには、 [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 ステートメントがあまり含まれないシナリオでは、続編、タイプORM 、プリズマなどの ORM フレームワークを使用すると、開発効率が大幅に向上します。

次のステップ

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

ヘルプが必要ですか?

TiDB コミュニティ、またはサポートチケットを作成するについて質問します。