Cloudflare Pages + Functions + Workers KVでちょっとしたWebアプリを作る
今回作ったページは下記。
元ネタ
リポジトリ
https://github.com/YuheiNakasaka/haropuro-shuffle
簡単なルーレットアプリ。
ルーレットで出た結果をKVに保存。保存された文字を都度更新して表示(リアルタイムではない)。
結果が1000件を超えるとクリアされる。
開発の流れ
Workers KVの設定
vite + preactのアプリ開発
Cloudflare Pages/Functionsにデプロイ
Workers KVの設定
Workers KVとは
PagesやFunctionsから呼び出せるKey-Valuesストア。ここ見るとわかるけど容量制限など結構厳しいのでDBとして本格的に使える感じではない。
設定方法
まずGUIからだとWorkersのページからnamespace(database名みたいなやつ)を設定する
PagesからKVにアクセスするにはnamespaceを紐付ける設定もしないといけない(忘れがち)
namespaceの設定方法(GUI)
このときに設定するVariable nameを使って後ほどアプリ内からKVへアクセスする
これでPagesのコードからKVを呼べる
使い方(ざっくり)
KV · Cloudflare Workers docsに細かいことは書いてるが実際に使ってみた方が早いかも。
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して格納するとかもいける
images.pages.dev/upload.ts at main · cloudflare/images.pages.dev
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
haropuro-shuffle/app.tsx at main · YuheiNakasaka/haropuro-shuffle
APIに関してはfunctions/api/shuffle_data.ts
haropuro-shuffle/shuffle_data.ts at main · YuheiNakasaka/haropuro-shuffle
アプリの配下にfunctionsというディレクトリを作るだけでCloudflare側でAPIにしてくれる
このAPIの中からWorkers KVへアクセスして、get/postしている
Pagesと同じURL配下にAPIが生えてくれるおかげでCORSの設定をしなくてもPOST出来る
Cloudflare Pages/Functionsにデプロイ
Cloudflare Pages/Functionsへのデプロイに関しては基本的に初期設定だけして後はGitHubへデプロイするだけで良い。
Cloudflare Pagesの設定
Cloudflare Pagesとは?
静的ページのホスティングサービス。vercelやFirebase HostingのようにGitHubにpushするとデプロイされる感じのやつ。
設定方法
Pagesのサイトに行ってGitHubと連携する。
project nameはhttps://<project name>.pages.dev/という形で使われる注意
build settingsは各自環境のものを選ぶ
自分はVite + preactを使ったのでBuild output directoryにdistを選ぶようにした。
あとは3分くらい待つだけ
Functionsの設定
Functionsとは?
Pagesから呼び出せるエンドポイントを生やせるやつ。
設定方法
アプリのルートディレクトリにfunctions/というディレクトリを生やしてその配下に作成したファイルやディレクトリ名がそのままエンドポイントになる。Next.jsなどと同じ。特にGUIからすることはない。
使い方
基本は下記の関数を適当に作成してResponseオブジェクトを返すだけ。
onRequestPost
onRequestPut
onRequestPatch
onRequestDelete
onRequestHead
onRequestOptions
他にもarrayにハンドラをまとめて定義したりなどいくつか設定方法がある。詳しくはここを読むとサンプルコードと共に書いてある。
Functions · Cloudflare Pages docs
その他
ローカル開発
ローカル環境でPages,KV,Functionsの挙動をインクリメンタルに再現したい時にwrangler2が役に立つ。アプリ内のpackageとして入れているとCloudflareへのデプロイ時にエラーが出るのでglobalにインストールした。
code:txt
yarn global add wrangler@beta
セキュリティ
今のままだと誰でもAPIを叩いてWorkers KVにPUT出来てしまうので本番とかで使うなら対策が必要そう。
デプロイ
package.jsonのyarn buildのtsc & vite buildの部分をvite buildに変更した。@cloudflare/wrangler-typedを使っているときにtscをするとビルドエラーが起きたため。
便利リンク
このリポジトリがCloudflare Pages, Functions, Workers KVの使い方を概ねカバーしてるので読むのがおすすめ。
https://github.com/cloudflare/images.pages.dev
cloudflare