プログラミング素人のはてなブログ

プログラミングも電気回路も専門外の技術屋の末端が勉強したことや作品をアウトプットするブログ。コードに間違いなど見つけられたら、気軽にコメントください。 C#、Python3、ラズパイなど。

Hello Cloudflare world

無料でSQLまで使えるクラウドサービス

以下で紹介されていて、まさに「1円も払いたくないマン」である私はとても興味を持っていました。
無料で色々使えそうなので、ハンズオンをトレースしてみたのちSQLが使えるところまで試してみました。
zenn.dev

ハンズオン

以下を参考にHello worldしておきます。
zenn.dev
reffect.co.jp

まずは、環境構築を行いますが、環境構築を要約すると、
・Nodeをインストール
・NodeのCloudflare WorkersのCLIツールであるwranglerをインストール
wranglerにlogin(Cloudflareと紐づけ)
・プロジェクトの作成(wrangler init XXX)
ソースコードの作成
・デプロイ
といった感じになります。

Hello worldであれば小一時間でできるかと思います。

D1というSQLを使ってみる

次の段階として、SQLを使ったwebページを作ってみました。
この先はJavaScriptでWebアプリのデプロイをやったことがあるか、このレベルにないと、
いくら無料で使えるからと言っても「チョットナニイッテイルカワカンネ」となる可能性があります。

私はWebアプリはあまり作ったことがない(過去にはFirebaseで買い物リストを作ったり、N予備校の基礎コースをやったぐらい)のでソースについては生成AIに全力で依存して作成しました。
今回はGoogle AI studioを使いました。
このソースコードは公開しますので、SQLアクセスの基礎的なところまでは、これでできるかと思います。
あとは、これを改造すれば好きなことができるでしょう。
github.com

自分で記述するソースコードとしては、src/index.tspublic/index.htmlwrangler.tomlです。
src/index.tsはTypeScriptですが、JavaScriptしか触ったことがない私ですが、ほぼ問題なく読むことはできる感じです。

しかしこの中で、悩んだのが(結局解決までいって原因はわかるのだが)wrangler.tomlに記述する設定でした。
ここがAIに聞いても全く正解にたどり着けず試行錯誤の末、という感じでした。

まとめ

できあがったものは以下のように、検索ボックスにキーワードを入力すると、DBからそれに一致するものを抽出するものです。

ここでは、SQLSELECTしか使っていませんが、SELECTが使えればどんなSQLも使えるはずなので、CloudflareでSQLを使いこなせたといってもよいでしょう。