Remix+CloudflareでWebサイトを作る 8（DBクライアントツール・Cloudflareのデフォルトのデプロイ機能を使う・開発環境におけるDBはどこか）
saneatsu【2024-02-18】DBクライアントツールを少し調べた
Drizzle Studio
PrismaみたいにDBの値をブラウザでみたいなぁと思っていたが、どうやらDrizzle Studioというものがあるらしい。
基本的にはリモートのD1に接続できるっぽいが以下の記事ではローカルのDBへの接続方法が解説されている（ローカルでの接続では driver: "better-sqlite" にする）。
TablePlus
このブログではDrizzle Studioを使ったうえでTablePlusが良いかなということが書かれている。
機能もりもりだ。
一旦はテーブル見れてCRUD操作できれば良いんだよな。
saneatsu【2023-02-19】PRでStaging環境にデプロイ時Cloudflare PagesのGithub Appにコメントを残してもらう
背景
1つ前のスクラップで、PRを作成した時にStaging環境に自動でデプロイされるようにした。
そういえば、前にNext.jsで作ったアプリをCloudflareにつなぎこんだ時に、Cloudflare Pagesの
GitHub App を使って以下のようなコメントを作ってくれていたな、ということを思い出した（画像はここから拝借）。
あと「All checks have passed」のところでCloudflareのアイコン使いたい⛅️
↑ ネットで拾ってきた画像
設定してみる（これじゃできない）
このページの「Configure」をクリックしてアカウント・リポジトリを選択して連携
すると選択したリポジトリの「GitHub Apps」で追加されていることが確認できる。
適当にPR作ってみるが、botがコメントしてくれない。
公式ドキュメントながら思ったけど、アプリを作成する時にCLIで作成したがもしかしてWebから作成しなくちゃなのか？？
アプリを作り直す
1. アプリをCloudflareのWebサイトから作成
https://dash.cloudflare.com/<ACCOUNT_ID>/workers-and-pages にアクセスしてGitHubと連携してアプリを作成
今まで「設定」タブに「ビルド&デプロイ」がないのはUIが変更されたからだと思ってたからだが、Webからアプリを作成するのとCLIで作成するので違うっぽい。Webから作成すると出てきた。
また、CLIから作成した場合はサイドバーの「Workers & Pages」を選択してアプリの詳細ページにいった時に右上に「Web Analitics」しか表示されていないが、Webから作成するとこの右側に連携しているリポジトリ名が出てくる。
2. 諸設定
サイドバーの「Workers & Pages」から今までにやった設定を新しいアプリにも適用する。
これだけでOK。
- カスタムドメインタブ
- カスタムドメインを登録
- 設定タブ
- アプリを選択して「設定」タブを選択
- 「環境変数」を選択して前に登録してたものを再登録
- 「Functions」を選択して「D1 データベース バインディング」でバインディング
- アプリを選択して「設定」タブを選択
結論
Cloudflareでアプリを作るときにはCLIじゃなく、Webから作る！！（泣）
saneatsu【2023-02-19】PRでCloudflareが自動的にStaging環境にデプロイするのをやめさせる
「プレビュー環境のデプロイを構成する」を「なし」にすればいいっぽい。
アプリをWebから作れば、mainにマージした時にProduction環境にデプロイしてくれるし、PRからStaging環境にデプロイしてくれるならここでやったこと丸々無意味になったのでは？と思ったけど勉強になったしいいか。
追記
Cloudflareがデプロイしてくれた場合、GitHubのActionではないので「Actions」タブの一覧に表示されないことに注意。
CloudflareのPagesのデプロイのログを見ることになる。
saneatsu【2023-02-19】GitHub Marketplace
とは？
色々ググってるとでてきた。
アプリの GitHub Marketplace について - GitHub Docs
GitHub ワークフローの拡張および改善を望んでいる開発者とあなたをつなぎます。 GitHub Marketplaceで利用する、開発者のための無料及び有料のツールをリストできます。
というのが公式の説明
見てみる
野生のGitHub Actionsだ。
saneatsu【2024-02-19】Cloudflare PagesのPreview環境のデプロイ先の固定URLが欲しい
背景
Cloudflare PagesではProduction/Preview環境どちらにデプロイした場合も https://xxxxxxxxxx.appName.pages.dev/ ような形式でハッシュがURLに含まれたページが作成される
Production環境の場合は最新のデプロイが、ドメインのページに採用されるので良いとして、Preview環境でも固定のURLが欲しい。
調べた
調べたところ、デプロイの詳細見ればエイリアスあるよと言われている。
ただこれは作成したブランチ名毎に変わってしまうやつだからちょっと違うんだよな。
saneatsuこっちで対応した
saneatsu【2023-02-20】開発環境でのDBの参照の仕方
背景
wranger.toml に書く内容が本番用のdatabase_idでもローカルで動いている理由がよくわかってないまま進めていた。
偶然見つけた記事
ここにこの問いに対するヒントになるようなものがあったのでメモ。
作る前にMiniflareとWranglerのソースを見るんですが
あ、できる人だ...（Honoの作者）。
俺もこういうことできるようになりたい。
やればできるようになるのか？
Wranglerの本番モードではAPIを叩いているのですが、ローカルモードでは後述する、とあるディレクトリに置いたxxx.sqlite3といったSQLite3のバイナリを読んでいます。
最後にwrangler.tomlにD1の設定を書き込みます。
つまり、binding dabatase_name あれば database_id は空文字でも --experimental-enable-local-persistence オプションつけて立ち上げればローカルのSQLiteを参照しに行くのかな？
違った
これは2022-07と古いものだったので今は違うっぽい。
ここらへんのオプションはもうDeprecated。
やっぱ公式ドキュメントよ
（ここの文章はあとから追記している）
Configuration - Wrangler · Cloudflare Workers docs
When using Wrangler in the default local development mode, files will be written to local storage instead of the preview or production database. Refer to Local development and testing for more details.
Wrangler をデフォルトのローカル開発モードで使用すると、ファイルはプレビュー データベースや運用データベースではなくローカル ストレージに書き込まれます。詳細については、「ローカル開発とテスト」を参照してください。
D1の方ではなくWorkersのwrangler.tomlの書き方のところに記述されていた。
詳細を知りたいのでLocal development and testing · Cloudflare Workers docsを覗いてみる
In addition to testing Workers locally with wrangler dev, the use of Miniflare allows you to test other Developer Platform products locally, such as R2, KV, D1, and Durable Objects.
という記述が。
度々登場しているこの「Mniflare」ってのはこういうことか。
便利だ〜すげ〜。
まとめると
- D1に限らずMniflareを使うことでローカルでも本番環境と変わらないような状態で開発できる
- 開発時はローカルの
.wrangler/ディレクトリににDBの値を書き込んでいる -
wrangler.tomlにpreview_database_id（Optional） を書くと開発環境からプレビュー環境のDBを参照しにいくこともできる- その場合
wrangler dev --remoteで立ち上げる
- その場合
感想
Commit数が少なくて小さいプロダクトなまだしも、こういうでかくてちゃんとしたプロダクトを触るか〜ってなったときに公式ドキュメント見に行くことはするけど「コード見るかぁ」とはならない。
ここで調べたminuteとか読みながら人が書いたオープンソースを読む癖みたいなのをつけたい。
「読めない（読んでもわからない）と思っているから読まない」、になっているんだけどCopilotとかもあるし頑張ってみようかな。読まなきゃ読めるようにならないと思うし。
あとCloudflareのドキュメント本当に助かる。
公式ドキュメントしか勝たん。