Astroで作った静的ブログにCloudflare D1を利用してサーバレスでコメント機能を実装する！

2128 文字

11 分

Astroで作った静的ブログにCloudflare D1を利用してサーバレスでコメント機能を実装する！

2025-06-29

How to

プログラム

/

Astro

/

ブログ作成

astroで作った静的ブログにコメント機能をつけたい！！！！！！！#

当ブログはAstroで作成した静的サイトである。githubのリポジトリにあるmd資産を元に静的なhtmlを生成しているのでサイトの動きはサクサクでとてもよい。が、静的サイトなので当然コメント機能などの動的機能は存在しない。実装するには外部のコメントサービスを利用するか、自分で実装するしかない。

「Astro コメント機能」などと検索すればいくつか参考になりそうなサービスは出てくるものの、githubのDiscussion機能を利用したGiscus（コメントにgithubログインが必要で一般的ではない）や広告の表示されるものなどがメイン。実装が簡単であるのは大きいが、コメントを残すためにgithubログインが必要だとただでさえ低いコメントされる可能性が更に低くなることが容易に想像できたのでGiscusは無し。広告も表示したくない。

また、コメントが投稿されるたびにデプロイを行いサイトをビルドし直してコメントを静的なサイトとして取り込む案も検討したが、どうせならリアルタイムでコメント更新されてほしいのでこの案も見送る。

ということでつい最近提供されはじめたらしいCloudflare D1をDBとして用いて自前のコメント機能を実装していくことに。 ~~果たして実装完了まで漕ぎ着ける事はできるのか……。~~　実装完了しました。

構成#

資産：Githubリポジトリで管理

デプロイ：Cloudflare Pages

DB：Cloudflare D1

フレームワーク：Astro

Astroテンプレート：huwari

手順#

すでにAstroブログの初期設定は完了している前提です。

Cloudeflare Adapteのインストール#

AstroでSSRを利用するためには各デプロイ先サービスのアダプターが必要なため、今回はCloudeflare Adapteをインストール。

1
pnpm astro add cloudflare

yでインストール

1
pnpm astro add cloudflare
2
✔ Resolving packages...
3

4
  Astro will run the following command:
5
  If you skip this step, you can always run it yourself later
6

7
 ╭───────────────────────────────────────╮
8
 │ pnpm add @astrojs/cloudflare@^12.6.0  │
9
 ╰───────────────────────────────────────╯
10

11
? Continue? » (Y/n)

インストール完了するとastro.config.mjsに下記のように追記される。

1
  adapter: cloudflare(),

Wranglerのインストール#

Cloudflareを操作するために利用するCLIツールのWranglerのインストールを行う。Cloudflareの開発サーバの起動（Astro previewは使えなくなるので開発環境でビルドしてその内容をpreviewの代用として見る必要がある）やデータベースの作成、デプロイ等もranglerコマンドから可能（Github管理なので自動でデプロイされる為今回は使用しないが）。

1
pnpm install wrangler

インストールできたらバージョン確認コマンドを打ってみる。

1
pnpm wrangler --version
2

3
 ⛅️ wrangler 4.22.0
4
───────────────────

Drizzle ORMのインストール#

データベースを操作するためにDrizzle ORMに関係するパッケージのインストールを行う。

1
pnpm install drizzle-orm better-sqlite3

下記でインストールするdrizzle-kitは定義したスキーマファイルを利用してテーブルを作成/更新するために必要なマイグレーションファイルを作成するためのツール。

1
pnpm install -D drizzle-kit

Cloudflare D1のデータベース設定#

下記コマンドでデータベースを作成。

1
pnpm wrangler d1 create tarailife-post-comments
2

3
{
4
  "d1_databases": [
5
    {
6
      "binding": "DB",
7
      "database_name": "tarailife-post-comments",
8
      "database_id": "2df89c19-da66-4200-96a5-2ed03756185e"
9
    }
10
  ]
11
}

初実行時はブラウザが起動し認証画面が表示される。

認証画面が表示されている画像

認証を終えるとデータベースが作成されていることが確認できる。

テーブルが登録されていることが分かる画像

wrangler.tomlをプロジェクトルートに作成

1
[[d1_databases]]
2
binding = "DB" # i.e. available in your Worker on env.DB
3
database_name = "tarailife-post-comments"
4
database_id = "2df89c19-da66-4200-96a5-2ed03756185e"

Drizzleによる設定#

データベースのテーブルを作成する際に利用するsql文を作成するためにsrcフォルダの中にdbフォルダを作成しテーブルのスキーマ情報を記述したschema.tsファイルを作成。

今回は下記のような必要最低限のテーブルを取り敢えず作成。

1
import { text, integer, sqliteTable } from "drizzle-orm/sqlite-core";
2

3
export const comments = sqliteTable("comments", {
4
  id: integer("id", { mode: "number" }).primaryKey({ autoIncrement: true }),
5
  author: text("author"),
6
  content: text("content"),
7
  post_slug: text("post_slug"),
8
  post_date: text("post_date"),
9
});

プロジェクトルートにdrizzle.config.tsの作成

1
import { defineConfig } from "drizzle-kit";
2

3
export default defineConfig({
4
  schema: "./src/db/schema.ts",
5
  out: "./drizzle",
6
  driver: "d1-http",
7
  dialect: "sqlite",
8
});

下記コマンドでマイグレーションファイルを生成。

1
pnpm drizzle-kit generate

コマンドを実行するとプロジェクトルートにdrizzleフォルダが作成される。

drizzleフォルダが作成されたことがわかる画像

テーブルの生成（.sqlファイルのファイル名は適宜上の手順で生成されたものに変更）。

1
pnpm wrangler d1 execute tarailife-post-comments --file=./drizzle/0000_useful_skreet.sql

.wrangler\state\v3\d1\miniflare-D1DatabaseObject\にファイルが3つ作成されているので確認。

drizzle.config.tsを更新（dbCredentialsのurlを先程生成された.sqliteファイルのパスに変更）

1
import { defineConfig } from "drizzle-kit";
2

3
export default defineConfig({
4
  schema: "./src/db/schema.ts",
5
  out: "./drizzle",
6
  driver: "d1-http",
7
  dialect: "sqlite",
8
  dbCredentials: {
9
    url: ".wrangler\state\v3\d1\miniflare-D1DatabaseObject\a520e4684331132e883183950c13a4f9c830d371f45a1f10dfdf654b438f8857.sqlite",
10
  },
11
});

本番環境へテーブル作成（.sqlファイル名は生成されたものに変更）。

1
pnpm wrangler d1 execute tarailife-post-comments --remote --file=./drizzle/0000_useful_skreet.sql
2

3
 ⛅️ wrangler 4.22.0
4
───────────────────
5
? ⚠️ This process may take some time, during which your D1 database will be unavailable to serve queries.
6
  Ok to proceed? » (Y/n)

DB の Binding 設定#

Pages にアップしたファイルからデータベースへのアクセスを行うためにD1 database bindingsの設定行う。Workers&Pagesのプロジェクト設定画面を開きバインディングの追加を選択しD1データベースの情報を追加する。

バインディングが追加されている事がわかる画像

コメント表示用のコンポーネントを作成#

AstroではアイランドアーキテクチャでAstroファイル内にReactやSvelteなどの他フレームワークのコンポーネントを使用することができる他ページの一部を動的生成したり出来る。今回はSSRを行うコメント表示用のコンポーネントをSvelteで作成し、それをページ生成用のAstroコンポーネントで読み込むことで各投稿ページにコメント機能を実装する。表示している記事に投稿されているコメントだけ拾ってきたいのでリクエストパラメータでslugを渡しAPIを呼び出す。

src\components\widget\にCommentBox.svelteを新規作成。

1
<script>
2
export let slug;
3
let author = "";
4
let content = "";
5
let comments = [];
6

7
const loadComments = async () => {
8
  const res = await fetch(`/api/v1/comments/?slug=${slug}`, {
9
    method: "GET",
10
    headers: { "Content-Type": "application/json" },
11
  });
12
  comments = await res.json();
13
};
14

15
const submitComment = async () => {
16
  const res = await fetch("/api/v1/comments/", {
17
    method: "POST",
18
    body: JSON.stringify({ post_slug: slug, author: author, content: content }),
19
    headers: { "Content-Type": "application/json" },
20
  });
21
  author = content = "";
22
  await loadComments();
23
};
24

25
import { onMount } from "svelte";
26
onMount(loadComments);
27
</script>
28

29
  <div class="grid grid-cols-1 gap-8">
30
  <h3>コメント</h3>
31
  {#each comments?.body?.comments as comment, i}
32
    <div class="row-span-2 grid grid-rows-subgrid grid-rows-2 grid-cols-1 gap-2">
33
      <div>
34
        <strong>{`${i + 1}: ${comment.author || "no name"}`}</strong>
35
        <small>{new Date(comment.post_date).toLocaleString()}</small>
36
      </div>
37
      <p>{comment.content}</p>
38
    </div>
39
  {/each}
40
  </div>
41
<div class="grid grid-cols-1 gap-4 mt-8">
42
    <h3>コメントを書く</h3>
43
    <form on:submit|preventDefault={submitComment} class="row-span-4 grid grid-rows-subgrid grid-rows-2 grid-cols-1 gap-4 md:w-4/4">
44
      <input bind:value={author} placeholder="名前" class="bg-[var(--license-block-bg)] rounded-md">
45
      <textarea bind:value={content} placeholder="コメント内容" required class="h-24 bg-[var(--license-block-bg)] rounded-md field-sizing-content"></textarea>
46
      <button type="submit" class="btn-regular h-8 text-sm px-3 rounded-lg">投稿</button>
47
    </form>
48
</div>

作成したコンポーネントをコメント機能を追加したいページのコンポーネントに設置#

当ブログではAstroのブログテンプレートであるFuwariを使用しているためブログの各ポストを生成しているファイルはsrc\pages\posts\[...slug].astroになる。ここは各自でコメント機能を追加したいファイルに置き換えてコンポーネントを設置してほしい。

1
import CommentBox from "src/components/widget/CommentBox.svelte"; //先ほど作成したコメント表示コンポーネントをインポート
2

3
    //コンポーネントを好きな箇所（といってもおそらくページ下部だと思うが）に設置
4
    <div id="comments-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",{}]}>
5
        <CommentBox slug={entry.slug} client:load />
6
    </div>

コンポーネントのpropsentry.slugで渡された値でどの記事に投稿されたコメントなのか判別している。

API用のページを作成#

今回はAstroのAPIエンドポイントとして、src\pages\api\v1\comments.tsのような配置でディレクトリを作成しAPIエンドポイント用のAstroファイルを作成している。

1
export const prerender = false;
2
import { drizzle } from "drizzle-orm/d1";
3
import { like } from "drizzle-orm"
4
import { comments } from "../../../db/schema";
5
import type { Runtime } from "@astrojs/cloudflare";
6
import type { D1Database } from "@cloudflare/workers-types";
7

8
export async function GET(context: { request: Request; locals: Runtime }) {
9
  const { request, locals } = context;
10
  const envDB = locals.runtime.env.DB as D1Database;
11
  const db = drizzle(envDB);
12
  const url = new URL(request.url);
13
  const slug = url.searchParams.get("slug");
14

15
let comment = await db.select().from(comments).where(like(comments.post_slug, `${slug}`));
16

17
  return new Response(
18
    JSON.stringify({
19
      body: {
20
        comments: comment,
21
        request: request,
22
      },
23
    }),
24
    { status: 200 },
25
  );
26
}
27

28
export async function POST(context: { request: Request; locals: Runtime }) {
29
  const { request, locals } = context;
30

31
  if (!locals.runtime.env.DB) {
32
    throw new Error("Database connection is missing");
33
  }
34
  const envDB = locals.runtime.env.DB as D1Database;
35
  const db = drizzle(envDB);
36

37
  const body = await request.json();
38
  const comment = {
39
    author: body.author,
40
    content: body.content,
41
    post_slug: body.post_slug,
42
    post_date: new Date().toISOString(),
43
  };
44

45
  await db.insert(comments).values(comment);
46

47
  return new Response(
48
    JSON.stringify({
49
      body: { request: request },
50
    }),
51
    { status: 200 },
52
  );
53
}