Zenn
🍖

Cloudflare Pages + Functions + Workers KV + vite + preactで簡単なページを作った

2021/11/29に公開
Cloudflare
Vite
Preact
workerskv
tech

今回作ったページは下記。

簡単なルーレットアプリ。ルーレットで出た結果をWorkers 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を紐付ける設定もしないといけない(忘れがち)
  • これでPagesのコードからKVを呼べる

使い方(ざっくり)

KV · Cloudflare Workers docsに細かいことは書いてるが実際に使ってみた方が早いかも。

  • get
    • NAMESPACE.get(key, {type: "text|json|arrayBuffer|stream", cacheTtl: 3600})
    • key以外はoption
  • put
  • delete
    • NAMESPACE.delete(key)
  • list
    • NAMESPACE.list({prefix?: string, limit?: number, cursor?: string})
    • keyをlistで取得できる。一度に1000個まで。
    • list_completedがfalseだとcursorを使ってさらにリクエストできる。
    • ここにChanges may take up to 60 seconds to be visible when listing keys.とあるのでputしてからKVがrefreshに反映されるまで最大60秒くらいかかる。putしたら即表示するみたいなことはあんまり向いてないかも。

vite + preactのアプリ開発

プロジェクト作成

yarn create vite haropuro-shuffle --template preact-ts

とりあえず起動

cd haropuro-shuffle
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の設定

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にハンドラをまとめて定義したりなどいくつか設定方法がある。詳しくはここを読むとサンプルコードと共に書いてある。

その他

ローカル開発

ローカル環境でPages,KV,Functionsの挙動をインクリメンタルに再現したい時にwrangler2が役に立つ。↓のようなコマンドでpages,functions,KVの全ての環境がローカルに立ち上がる。

$ wrangler pages dev --kv HAROPURO_SHUFFLE -- npx vite

ちなみにアプリ内のpackageとして入れているとCloudflareへのデプロイ時にエラーが出るのでglobalにインストールした。

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

Discussion