03-5211-7750 平日|09:30~18:00

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

検討に役立つお役立ち資料を無料でご利用いただけます

お役立ち資料をダウンロードFREE

[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のキャプチャ

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


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

D1のテーブルのキャプチャ

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が作成されたことを確認します。

D1の概要のキャプチャ
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の初期画面が表示されていることを確認します。

では実際に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

VIEW D1 DATA
表示ができたらテキストに値を入れて「ADD DATA」ボタンをクリックしましょう。
VIEW D1 DATAテーブル
データが登録されたことが確認できたと思います。

ここまで確認出来たらCloudflare Pagesにデプロイします。githubのmainブランチにPUSHすれば自動でデプロイされます。
$ git add ./*
$ git commit -m “create front app”
$ git push origin main

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

VIEW D1 DATAへの登録
問題なくデータが登録できました。

最後に

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

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

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

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

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

Cloudflareに、アクセリアの運用サポートをプラスしたCDNサービスを提供しています

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

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

Cloudflare導入・運用支援サービス Solution CDN

杉木 俊文

アクセリア株式会社 サービス事業本部ネットワーク運用部 所属
Contact usお問い合わせ

サービスにご興味をお持ちの方は
お気軽にお問い合わせください。

Webからお問い合わせ

お問い合わせ

お電話からお問い合わせ

03-5211-7750

平日09:30 〜 18:00

Download資料ダウンロード

製品紹介やお役立ち資料を無料でご活用いただけます。

Magazineメルマガ登録

最新の製品情報などタイムリーな情報を配信しています。

Free Service

PageSpeed Insights シミュレータ

CDNによるコンテンツの最適化を行った場合のPageSpeed Insightsのスコアをシミュレートしてレポートします。