目的

データベースCloudflare D1とAstroのサイトを連携します
前回の投稿の「前半」ではローカルのDBと接続しました
今回の投稿の「後半」ではリモートのDB、つまりCloudflareのサーバー上のDBと接続します

また、Cloudflare Pagesへのデプロイもします

前提

こちらの内容の続きから、リモート用の設定をおこないます

データベースの作成まではおこなわれている状態です
今回は、テーブルの追加、データの追加をおこないます

CloudflareへのデプロイはGitHubにソースコードを置いて、連携するようにします

本編

テーブルの追加

前回作成したSQLファイルを利用して、データベースにテーブルを追加します
--localだったフラグを、--remoteフラグに変更して、コマンドを実行します

ログインを促されたら、npx wrangler loginとかでログインします

npx wrangler d1 execute DB20240622 --remote --file=./drizzle/0000_flippant_sprite.sql

↓　実行結果

> npx wrangler d1 execute DB20240622 --remote --file=./drizzle/0000_flippant_sprite.sql

 ⛅️ wrangler 3.61.0
-------------------

√ ⚠️ This process may take some time, during which your D1 database will be unav
ailable to serve queries.
  Ok to proceed? ... yes
🌀 Executing on remote database DB20240622 (xxxx-xxxx-xxxx-xxxx-xxxx):
🌀 To execute on your local development database, remove the --remote flag from 
your wrangler command.
Note: if the execution fails to complete, your DB will return to its original state and you can safely retry.
├ 🌀 Uploading xxxx-xxxx-xxxx-xxxx-xxxx.xxxxx.sql 
│ 🌀 Uploading complete.
│
🌀 Starting import...
🌀 Processed 1 queries.
🚣 Executed 1 queries in 0.00 seconds (2 rows read, 4 rows written)
   Database is currently at bookmark 00000001-00000000-xxxxxxx-xxxxxxxxxxxxx.
┌────────────────────────┬───────────┬──────────────┬────────────────────┐
│ Total queries executed │ Rows read │ Rows written │ Database size (MB) │      
├────────────────────────┼───────────┼──────────────┼────────────────────┤      
│ 1                      │ 2         │ 4            │ 0.02               │      
└────────────────────────┴───────────┴──────────────┴────────────────────┘

Cloudflare D1のダッシュボードから確認すると、memosテーブルが追加されていることが確認できます

データの追加

npx wrangler d1 execute DB20240622 --remote --command="insert into memos (title,content) values('Learn D1','contentcontent')"

↓　実行結果


⛅️ wrangler 3.61.0
-------------------

🌀 Executing on remote database DB20240622 (xxx-xx-xx-xx-xxxxxxx):
🌀 To execute on your local development database, remove the --remote flag from your wrangler command.
🚣 Executed 1 commands in 0.3964ms

同じように、もう1件データを追加します

ダッシュボードで確認すると、データが追加されています

デプロイ

続いて、デプロイをします
CLIからできることが多いと思いますが、今回はダッシュボードからおこないます

Cloudflare Pagesでのデプロイ

GitHubへのアクセスをリポジトリごとに制限しているため、リポジトリへCloudflareからのアクセス許可を追加します

アクセスできるようになったため、デプロイを進めます

Build settingsはAstroを選択すると、npm run buildと/distが自動的に入力されます

デプロイが始まります

デプロイに成功しました

ここでデプロイしたサイトにアクセスしてみると、データベースのデータが表示されないことを確認できます

ダミーデータを仕込んでいるはずですが、表示されませんので、その近辺の記述が間違えていそうです

ですが、そこは放っておき、デプロイした場合は、データベースのBindingsが必要ですので、設定します

PagesのSettingsのFunctionsからD1の設定ができます

この設定をした上で、再度デプロイします

サイトにデータベースのデータが表示されました

まとめ

これでリモートでのCloudflare D1へのアクセスができました

ツール諸々が整備されているため、やり方さえわかればとても簡単に実装できるという印象でした

今後の見通し

次はメモをWebブラウザから入力して、データベースへ保存するという処理をVueコンポーネント、Astro Endpointで実装したいと思います

その後は、新しいメモを入力すると、リスト表示が自動的に更新されるようにするためのAstroコンポーネントとVueコンポーネントの連携についても書く予定です