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

TiDB は MySQL 互換のデータベースであり、 MySQL2 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 クラスターに接続します。

TiDB Cloud Serverless
TiDB Self-Managed

クラスターページに移動し、ターゲットクラスターの名前をクリックして概要ページに移動します。
右上隅の「接続」をクリックします。接続ダイアログが表示されます。
接続ダイアログの構成が動作環境と一致していることを確認します。
- 接続タイプは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認定獲得します。

ヘルプが必要ですか?

不和またはスラック、あるいはサポートチケットを送信するについてコミュニティに質問してください。