データベースCloudflare D1とAstroサイトの連携（後半：リモート版）

## 目的

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

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

## 前提

https://qiita.com/fujino_tech/items/193acfd7a658a0530ad3

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

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

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`テーブルが追加されていることが確認できます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/c7c75176-729d-9f39-9207-42e717cf8dec.png)

### データの追加

```
npx wrangler d1 execute DB20240622 --remote --command="insert into memos (title,content) values('Learn D1','contentcontent')"
```
↓　実行結果
```> 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件データを追加します

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/145bf250-e60a-2ce1-4c1f-47c471a0f58a.png)

### デプロイ

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

#### Cloudflare Pagesでのデプロイ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/a4a99691-483d-8fce-75d0-14fbe672af88.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/eac9f653-5fbd-efd1-2666-8832b713cb57.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/fb738031-88aa-8c10-7d2d-e04606262d24.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/df5649df-0cc4-91da-fe68-c651c98dd256.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/068fa7ef-2ae5-a72c-f640-1c9b0db564c3.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/646fd1d9-360a-4114-fe9f-fec7bc3ae92b.png)

デプロイが始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/a17f65fe-1dbe-05e3-b848-6f527cc7a9c0.png)

デプロイに成功しました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/51b8d352-c044-65ba-aa47-1a754f6ea603.png)

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/1df983ab-8e67-6298-10cc-dab1b49ae7b3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/205f1c7d-0fbb-27ec-f014-bfc1921c9cc0.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821654/2defe102-b9be-1f59-f3b7-3c52ee5596e6.png)

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

## まとめ

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

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

## 今後の見通し

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

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