Cloudflare Pages + Functions + Workers KVでちょっとしたWebアプリを作る
今回作ったページは下記。
リポジトリ
簡単なルーレットアプリ。
ルーレットで出た結果をKVに保存。保存された文字を都度更新して表示(リアルタイムではない)。
結果が1000件を超えるとクリアされる。
開発の流れ
Workers KVの設定
vite + preactのアプリ開発
Cloudflare Pages/Functionsにデプロイ
Workers KVの設定
PagesやFunctionsから呼び出せるKey-Valuesストア。ここ見るとわかるけど容量制限など結構厳しいのでDBとして本格的に使える感じではない。 設定方法
まずGUIからだとWorkersのページからnamespace(database名みたいなやつ)を設定する
PagesからKVにアクセスするにはnamespaceを紐付ける設定もしないといけない(忘れがち)
このときに設定するVariable nameを使って後ほどアプリ内からKVへアクセスする
これでPagesのコードからKVを呼べる
使い方(ざっくり)
get
NAMESPACE.get(key, {type: "text|json|arrayBuffer|stream", cacheTtl: 3600})
key以外はoption
put
NAMESPACE.put(key, value, {expirationTtl: 60})
expirationTtlは60以上じゃないとだめ
こんな感じでobjectをJSON.stringifyして格納するとかもいける
delete
NAMESPACE.delete(key)
list
NAMESPACE.list({prefix?: string, limit?: number, cursor?: string})
keyをlistで取得できる。一度に1000個まで。
list_completedがfalseだとcursorを使ってさらにリクエストできる。
vite + preactのアプリ開発
プロジェクト作成
code:txt
yarn create vite haropuro-shuffle --template preact-ts
とりあえず起動
code:txt
cd <your-app-name>
yarn install
yarn dev
コード
基本的なフロントエンドのコードはsrc/app.tsx
APIに関してはfunctions/api/shuffle_data.ts
アプリの配下にfunctionsというディレクトリを作るだけでCloudflare側でAPIにしてくれる
このAPIの中からWorkers KVへアクセスして、get/postしている
Pagesと同じURL配下にAPIが生えてくれるおかげでCORSの設定をしなくてもPOST出来る
Cloudflare Pages/Functionsにデプロイ
Cloudflare Pages/Functionsへのデプロイに関しては基本的に初期設定だけして後はGitHubへデプロイするだけで良い。
Cloudflare Pagesとは？
静的ページのホスティングサービス。vercelやFirebase HostingのようにGitHubにpushするとデプロイされる感じのやつ。
設定方法
project nameはhttps://<project name>.pages.dev/という形で使われる注意
build settingsは各自環境のものを選ぶ
自分はVite + preactを使ったのでBuild output directoryにdistを選ぶようにした。
あとは3分くらい待つだけ
Functionsとは？
Pagesから呼び出せるエンドポイントを生やせるやつ。
設定方法
アプリのルートディレクトリにfunctions/というディレクトリを生やしてその配下に作成したファイルやディレクトリ名がそのままエンドポイントになる。Next.jsなどと同じ。特にGUIからすることはない。
使い方
基本は下記の関数を適当に作成してResponseオブジェクトを返すだけ。
onRequestPost
onRequestPut
onRequestPatch
onRequestDelete
onRequestHead
onRequestOptions
他にもarrayにハンドラをまとめて定義したりなどいくつか設定方法がある。詳しくはここを読むとサンプルコードと共に書いてある。
その他
ローカル開発
ローカル環境でPages,KV,Functionsの挙動をインクリメンタルに再現したい時にwrangler2が役に立つ。アプリ内のpackageとして入れているとCloudflareへのデプロイ時にエラーが出るのでglobalにインストールした。 code:txt
yarn global add wrangler@beta
セキュリティ
今のままだと誰でもAPIを叩いてWorkers KVにPUT出来てしまうので本番とかで使うなら対策が必要そう。
デプロイ
便利リンク
このリポジトリがCloudflare Pages, Functions, Workers KVの使い方を概ねカバーしてるので読むのがおすすめ。