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

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

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

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

注記

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

前提条件

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

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
  1. クラスターページに移動し、ターゲット クラスターの名前をクリックして概要ページに移動します。

  2. 右上隅の「接続」をクリックします。接続ダイアログが表示されます。

  3. 接続ダイアログの構成が動作環境と一致していることを確認します。

    • 接続タイプPublicに設定されています

    • ブランチはmainに設定されています

    • 接続先はGeneralに設定されています

    • オペレーティング システムは環境に適合します。

    注記

    Node.js アプリケーションでは、TLS (SSL) 接続を確立するときに Node.js がデフォルトで組み込みのMozilla CA 証明書使用するため、SSL CA 証明書を提供する必要はありません。

  4. ランダムなパスワードを作成するには、 「パスワードの生成」をクリックします。

    ヒント

    以前にパスワードを作成したことがある場合は、元のパスワードを使用するか、 「パスワードのリセット」をクリックして新しいパスワードを生成することができます。

  5. 次のコマンドを実行して.env.exampleコピーし、名前を.envに変更します。

    # Linux cp .env.example .env
    # Windows Copy-Item ".env.example" -Destination ".env"
  6. 対応する接続文字列をコピーして.envファイルに貼り付けます。例の結果は次のようになります。

    TIDB_HOST='{gateway-region}.aws.tidbcloud.com' TIDB_PORT='4000' TIDB_USER='{prefix}.root' TIDB_PASSWORD='{password}' TIDB_DB_NAME='test'

    {}のプレースホルダーを接続ダイアログで取得した値に置き換えます。

  7. .envファイルを保存します。

  1. 次のコマンドを実行して.env.exampleコピーし、名前を.envに変更します。

    # Linux cp .env.example .env
    # Windows Copy-Item ".env.example" -Destination ".env"
  2. 対応する接続文字列をコピーして.envファイルに貼り付けます。例の結果は次のようになります。

    TIDB_HOST='{tidb_server_host}' TIDB_PORT='4000' TIDB_USER='root' TIDB_PASSWORD='{password}' TIDB_DB_NAME='test'

    {}のプレースホルダーを、接続ウィンドウで取得した値に置き換えます。TiDB をローカルで実行している場合、デフォルトのホスト アドレスは127.0.0.1で、パスワードは空です。

  3. .envファイルを保存します。

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

  1. アプリケーションを起動します:

    npm run dev
  2. ブラウザを開いてhttp://localhost:3000アクセスします。(実際のポート番号についてはターミナルで確認してください。デフォルトは3000です。)

  3. サンプル コードを実行するには、 [SQL の実行]をクリックします。

  4. ターミナルの出力を確認します。出力が次のようになる場合、接続は成功しています。

    { "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 1Playerにコイン50枚と商品50を追加します。

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

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

データを削除する

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

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

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

役に立つメモ

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

次のステップ

ヘルプが必要ですか?

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

このページは役に立ちましたか?