📣

TiDB Cloud Serverless が
Starter
に変わりました!このページは自動翻訳されたものです。
原文はこちらからご覧ください。

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

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

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

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

注記

このチュートリアルは、TiDB サーバーレスおよび 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 クラスターに接続します。

    1. クラスターページに移動し、ターゲット クラスターの名前をクリックして、その概要ページに移動します。

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

    3. 接続ダイアログの設定が動作環境と一致していることを確認してください。

      • エンドポイント タイプはPublicに設定されます

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

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

      • オペレーティング システムが環境に一致します。

      注記

      Node.js アプリケーションでは、TLS (SSL) 接続を確立するときにデフォルトで組み込みの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. 「RUN 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 1Player50コインと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 ステートメントがあまり含まれないシナリオでは、 続編TypeORM 、またはプリズマのような ORM フレームワークを使用すると、開発効率が大幅に向上します。

    次のステップ

    助けが必要?

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

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