Cloudflare D1 に入門してみる

参考

Workerを作成する

前回作成したWorkerを使いまわします。

D1データベースを作成します

wrangler d1コマンドを叩いて、データーベースの名前を決めて作成します。

$ npx wrangler d1 create <DATABASE_NAME>

✅ Successfully created DB '<DATABASE_NAME>'

[[d1_databases]]
binding = "DB"
database_name = "<DATABASE_NAME>"
database_id = "<unique-ID-for-your-database>"

WorkerをD1へバインディングする。

WorkerがD1に接続するにはバインディングを作成する必要がある。
wrangler.tomlを更新して、バインディングします。

先程作成した、DBの名前と、作成後に表示されるUniqueIDをコピーして更新します。

[[d1_databases]]
binding = "DB" # available in your Worker on env.DB
database_name = "<DATABASE_NAME>"
database_id = "<unique-ID-for-your-database>"

D1に対してクエリを叩く

下記のTABLEをつくるschema.sqlファイルをプロジェクトに追加します。
顧客ID/企業名/顧客名を持ったCustomersテーブルの作成と、ダミーデータを入れるSQLです。

DROP TABLE IF EXISTS Customers;
CREATE TABLE IF NOT EXISTS Customers (CustomerId INTEGER PRIMARY KEY, CompanyName TEXT, ContactName TEXT);
INSERT INTO Customers (CustomerID, CompanyName, ContactName) VALUES (1, 'Alfreds Futterkiste', 'Maria Anders'), (4, 'Around the Horn', 'Thomas Hardy'), (11, 'Bs Beverages', 'Victoria Ashworth'), (13, 'Bs Beverages', 'Random Name');

下記を叩いてローカルのDBへschema.sqlのクエリを実行します。

npx wrangler d1 execute <DATABASE_NAME> --local --file=./schema.sql

クエリを実行後、下記のコマンドでSQLを叩き、DBが正常に作られたかを確認します。

npx wrangler d1 execute <DATABASE_NAME> --local --command="SELECT * FROM Customers"

Workerでクエリを実行する

index.tsファイルを下記のサンプルコードへ書き換えます。

src/index.ts

export interface Env {
  // If you set another name in wrangler.toml as the value for 'binding',
  // replace "DB" with the variable name you defined.
  DB: D1Database;
}

export default {
  async fetch(request: Request, env: Env) {
    const { pathname } = new URL(request.url);

    if (pathname === "/api/beverages") {
      // If you did not use `DB` as your binding name, change it here
      const { results } = await env.DB.prepare(
        "SELECT * FROM Customers WHERE CompanyName = ?"
      )
        .bind("Bs Beverages")
        .all();
      return Response.json(results);
    }

    return new Response(
      "Call /api/beverages to see everyone who works at Bs Beverages"
    );
  },
};

ローカルで開発する

wrangler devを実行し、ローカルでテストします。
localhost:8787/api/beveragesを開くと、ブラウザにSELECTした下記の結果が表示されます。
Call /api/beverages to see everyone who works at Bs Beverages

$ npx wrangler dev

DBのDeploy

先程使用した、schema.sqlを使用してデータベースへテーブルを作成します。

npx wrangler d1 execute <DATABASE_NAME> --file=./schema.sql

ローカルでテストしたときと同様に、SELECT文を叩いて、動いているかどうか確認します。

npx wrangler d1 execute <DATABASE_NAME> --command="SELECT * FROM Customers"

最後に先程実装したWorkerをデプロイして、URLからDBを叩けるようにします。

npx wrangler deploy

https://<WORKER_NAME>.<YOUR_SUBDOMAIN>.workers.dev/api/beveragesへアクセスすると、D1を叩いた結果がローカルと同様に表示されます。