目的
データベース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コンポーネントの連携についても書く予定です