2023年8月19日時点でのCloudflare D1のGet startedをやる

• Cloudflareのアカウントは作成済み
• npm v9.4.2
• Node.js v18.14.0
• create-cloudflare v2.1.1
• wrangler v3.5.1

create-cloudflareとwranglerはコマンド実行時にインストールできるので事前のインストール不要

1. Create a Worker

C3(create-cloudflare-cli)を使ってプロジェクトを作成する。

npm create cloudflare@latest

どのディレクトリにアプリを作るか聞かれる。
「hello-cloudflare-d1」と入力。
ドキュメントでは「d1-tutorial」と入力するように書いてあるが、TutorialsがGet startedと別で存在するため、明確に分けるために「hello-cloudflare-d1」にした。

In which directory do you want to create your application?
dir ./hello-cloudflare-d1

どのような種類のアプリケーションを作りたいか聞かれる。
ドキュメントでは「"Hello World" script」を選ぶように書いてあるが「"Hello World" Worker」の間違いだと思う。

What type of application do you want to create?
● "Hello World" Worker

TypeScriptを使うか聞かれる。
「Yes」を選択。

Do you want to use TypeScript?
Yes / No

Gitを使うか聞かれる。
「Yes」を選択。

Do you want to use git for version control?
Yes / No

デプロイするか聞かれる。
「No」を選択。

Do you want to deploy your application?
Yes / No

2. Create a database

プロジェクトのディレクトリに移動する。

cd hello-cloudflare-d1

データベースを作成する。名前は「sample-db」としておく。
名前についてドキュメントから引用。

• Typically a combination of ASCII characters, shorter than 32 characters, and uses dashes (-) instead of spaces
• Descriptive of the use-case and environment - for example, “staging-db-web” or “production-db-backend”
• Only used for describing the database, and is not directly referenced in code.

npx wrangler d1 create sample-db

3. Bind your Worker to your D1 database

データベースを作成した時のコマンド実行結果に以下のような情報が出力されているので、それをwrangler.tomlに追加する。

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

4. Run a query against your D1 database

Configure your D1 database

schema.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');

ローカルでデータベースを構成する。

npx wrangler d1 execute sample-db --local --file=./schema.sql

SELECT文を実行してみる。

npx wrangler d1 execute sample-db --local --command='SELECT * FROM Customers'

Write queries within your Worker

WorkerからD1に接続しSELECT文の結果を返すコードを書く。

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"
    );
  },
};

コードの説明をドキュメントから引用。

• Define a binding to our D1 database in our TypeScript code. This binding matches the binding value we set in wrangler.toml under [[d1_databases]]
• Query our database using env.DB.prepare to issue a prepared query with a placeholder (the ? in the query).
• Call .bind() to safely and securely bind a value to that placeholder. In a real application, we would allow a user to define the CompanyName they want to list results for. Using .bind() prevents users from executing arbitrary SQL (known as “SQL injection”) against our application and deleting or otherwise modifying your database.
• Execute the query by calling .all() to return all rows (or none, if the query returns none)
• Return our query results, if any, in JSON format with Response.json(results)

5. Develop locally with Wrangler

ローカルで起動させる。

npx wrangler dev

http://localhost:8787にアクセスすると「Call /api/beverages to see everyone who works at Bs Beverages」と表示されていることを確認できる。

http://localhost:8787/api/beveragesにアクセスするとSELECT文の実行結果が表示されていることを確認できる。

6. Deploy your database

Cloudflareにログインする。

npx wrangler login

認証画面が表示されるので「Allow」を押下する。

ローカルでやったように実環境でもSQLファイルを実行する。

npx wrangler d1 execute sample-db --file=./schema.sql

SELECT文を実行してみる。

npx wrangler d1 execute sample-db --command='SELECT * FROM Customers'

Workerをデプロイする。

npx wrangler deploy

https://hello-cloudflare-d1.<YOUR_SUBDOMAIN>.workers.devにアクセスすると「Call /api/beverages to see everyone who works at Bs Beverages」と表示されていることを確認できる。デフォルトだと<YOUR_SUBDOMAIN>にはメールアドレスのローカルパートが入っている。

https://hello-cloudflare-d1.<YOUR_SUBDOMAIN>.workers.dev/api/beveragesにアクセスするとSELECT文の実行結果が表示されていることを確認できる。