【Cloudflareのデータベース】D1を試してみました

2023年の9月頃にD1がオープンベータになったのですがまだ触っていなかったので、機能を検証してみました。

Cloudflare公式URL：https://developers.cloudflare.com/d1/

D1はCloudflareのネイティブサーバーレスデータベースになっています。
WorkersやPagesから接続してDBとして使用ができます。

今回は簡単なWEBアプリケーションを全てCloudflareの機能を使って作ってみようと思います。

構成としては下記で作成します。

---
データベース：Cloudflare D1
バックエンド(API)：Cloudflare Workers
フロントエンド：Cloudflare Pages(react)
---

トップページはD1のDBデータを全て表示。
テキストに値を入力してボタンを押せばDBにデータを登録するといった簡単なものです。

バックエンド(Cloudflare Workers, Cloudflare D1)の作成

まずはWorkersの作成を行います。

$ npm create hono@latest test-pages-d1-be
$ cd test-pages-d1-be
$ npm install

Cloudflareへログインします。

$ wrangler login
$ wrangler whoami

wrangler.tomlに下記を追加します。

main = "src/index.ts"

D1のDBを作成します。

$ wrangler d1 create test-db

tableの情報をファイルに設定します。

$ vi schema.sql
DROP TABLE IF EXISTS Users;
CREATE TABLE IF NOT EXISTS Users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, city TEXT);

Cloudflareの画面(アカウント -> Workers & Pages -> D1)からD1が作成されたことを確認します。

作成したD1のDBにUsersテーブルを作成します。

$ wrangler d1 execute test-db --file=./schema.sql

wrangler.tomlに下記を追加します。

[[d1_databases]]
binding = "TEST_DB"
database_name = "test-db"
database_id = "xxxxxxxxxxxxxxxxxxxxxx"

※database_id はCloudflareの画面(アカウント -> Workers & Pages -> D1 -> 作成したD1)で確認できます。

/src/index.tsを編集します。

import { Hono } from 'hono'
import { cors } from 'hono/cors'

type Bindings = {
  TEST_DB: D1Database
}

const app = new Hono<{ Bindings: Bindings }>()

app.use('/api/*', cors())
app.use(
  '/api2/*',
  cors({
    origin: '*',
    allowHeaders: ['X-Custom-Header', 'Upgrade-Insecure-Requests'],
    allowMethods: ['POST', 'GET', 'OPTIONS'],
    exposeHeaders: ['Content-Length', 'X-Kuma-Revision'],
    maxAge: 600,


    credentials: true,
  })
)

app.get("/api/v1/users", async (c) => {
  try {
    let { results } = await c.env.TEST_DB.prepare("SELECT * FROM users").all()
    return c.json(results)
  } catch (e) {


    return c.json({err: e}, 500)
  }
})

app.post("/api/v1/users", async (c) => {
  try {
    const body = await c.req.json()
    const { name, city } = body

    await c.env.TEST_DB.prepare("INSERT INTO users (name, city) VALUES (?, ?)")
      .bind(name, city)
      .run()

    return c.json({ message: 'User added successfully' })
  } catch (e) {
    console.error(e)


    return c.json({ err: e }, 500)
  }
})

export default app

フロントエンドとバックエンドのFQDNが違うのでCORSの設定も合わせてしておきます。

APIの動きとしては、下記のようにしております。

・/api/v1/usersにGETしたらUsersテーブルの内容を返します。
・/api/v1/usersにPOSTしたらUsersテーブルに登録を行います。

WorkersをCloudflareにデプロイします。

$ wrangler deploy

Cloudflareの画面(アカウント -> Workers & Pages)からWorkersが作成されたことを確認します。


WorkersをクリックしてプレビューのURLを控えておいてください。
　※xxxxxxxxxxxx.workers.dev

これでバックエンド側は完成です。

フロントエンド(Cloudflare Pages)の作成

まず、githubにRepositoryを作成します。

続いてCloudflare Pagesのコードを作成します。

$ npm create cloudflare@latest test-pages-d1 -- --framework=react

githubにコードをPUSHします。

$ cd test-pages-d1
$ git remote add origin https://github.com/xxxxxxxxxxxxxx/test-pages-d1.git
$ git branch -M main
$ git push -u origin main

Cloudflareの画面(アカウント -> Workers & Pages)から「アプリケーションの作成」でPagesを作成して、githubに連携をします。
下記URLを参考に作成します。

https://developers.cloudflare.com/pages/framework-guides/deploy-a-react-site/#deploy-with-cloudflare-pages

設定としては下記も参考にしてください。

プロダクション ブランチ -> main
フレームワーク プリセット -> Create React APP
ビルド コマンド -> npm run build
ビルド出力ディレクトリ ->  /build

保存してデプロイを行うとgithubからコードを取得してビルドとデプロイをしてくれます。
デプロイまで完了したら自動でドメインが出されますのでブラウザからアクセスします。

reactの初期画面が表示されていることを確認します。

では実際にreactのコードを書いていきましょう。
まずmaterial ui、axios、x-data-gridをインストールします。

$ npm install @mui/material @emotion/react @emotion/styled
$ npm install axios
$ npm install @mui/x-data-grid

src/App.jsを編集します。
baseURLのFQDN部分は控えておいたバックエンドのプレビューのFQDNに書き換えてください。パス部分はそのままで大丈夫です。※/api/v1/users

import React, { useState, useEffect } from "react";
import axios from "axios";
import { DataGrid } from "@mui/x-data-grid";
import { Button, TextField, Box } from "@mui/material";

const baseURL = "https://xxxxxxxxxxxxxxx.workers.dev/api/v1/users";

function App() {
  const [posts, setPosts] = useState([]);
  const [formData, setFormData] = useState({ name: "", city: ""});

  const fetchData = () => {
    axios.get(baseURL).then((response) => {
      setPosts(response.data);
    });
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      await axios.post(baseURL, formData);
      fetchData(); // データを再取得して更新
      setFormData({ name: "", city: ""}); // フォームをクリア
    } catch (error) {
      console.error("Error adding post", error);
    }
  };

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const columns = [
    { field: "id", headerName: "ID", width: 100 },
    { field: "name", headerName: "NAME", width: 200 },
    { field: "city", headerName: "CITY", width: 200 },
  ];

  return (
    <div className="App">
      <h2>VIEW D1 DATA</h2>
      <Box
        component="form"
        sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' }, mb: 2 }}
        noValidate
        autoComplete="off"
        onSubmit={handleSubmit}
      >
        <TextField
          label="Name"
          variant="outlined"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
        />
        <TextField
          label="City"
          variant="outlined"
          name="city"
          value={formData.city}
          onChange={handleInputChange}
        />
        <Button type="submit" variant="contained" color="primary" sx={{ mt: 2 }}>
          ADD DATA
        </Button>
      </Box>
      <DataGrid rows={posts} columns={columns} autoHeight />
    </div>
  );
}

export default App;

ローカル環境でテストします。

npm start

表示ができたらテキストに値を入れて「ADD DATA」ボタンをクリックしましょう。

データが登録されたことが確認できたと思います。

ここまで確認出来たらCloudflare Pagesにデプロイします。githubのmainブランチにPUSHすれば自動でデプロイされます。

$ git add ./*
$ git commit -m “create front app”
$ git push origin main

Cloudflare Pagesで自動で作成されたFQDNにアクセスすると同じ画面が出てきます。
試しにデータを登録してみます。


問題なくデータが登録できました。

今回はCloudflareのD1の検証をしてみました。
D1の機能としては、他にも自動バックアップ取得やタイムトラベル機能、Cloudflareの画面からテーブルの情報を見れたりなど色々あるのですが、今回は文章が長くなってしまったのでまたの機会にご紹介できればと思います。

まだベータ版なので制限などもあるのですが機能もこれから増えると思いますし楽しみです。

そしてCloudflareなら上記以外でも、

　・パフォーマンスの向上
　・サイトの信頼性の向上
　・セキュリティの向上

が、一つのサービスで実現できますので非常におすすめです。

アクセリア自社CDNの開発と運用は、20年以上にわたります。それらの経験とノウハウを駆使したプロフェッショナルサポートをパッケージしたサービスが、［Solution CDN］です。
移行支援によるスムーズな導入とともに、お客様の運用負担を最小限に​とどめながら、WEBサイトのパフォーマンスとセキュリティを最大限に高めます。運用サポートはフルアウトソーシングからミニマムサポートまで、ご要望に合わせてご提供します。

Cloudflare（クラウドフレア）の導入や運用について、またそれ以外のことでもなにか気になることがございましたらお気軽にご相談下さい。