<p><img src="https://storage.googleapis.com/zenn-user-upload/e6e5e4454787-20211129.gif" alt loading="lazy" class="md-img"></p>
<p>今回作ったページは下記。</p>
<ul>
<li>
<a href="https://haropuro-shuffle.pages.dev/" target="_blank" rel="nofollow noopener noreferrer">https://haropuro-shuffle.pages.dev/</a>
<ul>
<li><a href="https://hpupdate.info/?p=293889" target="_blank" rel="nofollow noopener noreferrer">元ネタ</a></li>
</ul>
</li>
<li>リポジトリ
<ul>
<li><a href="https://github.com/YuheiNakasaka/haropuro-shuffle" target="_blank" rel="nofollow noopener noreferrer">YuheiNakasaka/haropuro-shuffle</a></li>
</ul>
</li>
</ul>
<p>簡単なルーレットアプリ。ルーレットで出た結果をWorkers KVに保存。保存された文字を都度更新して表示(リアルタイムではない)。結果が1000件を超えるとクリアされる。</p>
<h2 id="%E9%96%8B%E7%99%BA%E3%81%AE%E6%B5%81%E3%82%8C">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E3%81%AE%E6%B5%81%E3%82%8C" aria-hidden="true"></a> 開発の流れ</h2>
<ul>
<li>Workers KVの設定</li>
<li>vite + preactのアプリ開発</li>
<li>Cloudflare Pages/Functionsにデプロイ</li>
</ul>
<h2 id="workers-kv%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#workers-kv%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Workers KVの設定</h2>
<h4 id="workers-kv%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#workers-kv%E3%81%A8%E3%81%AF" aria-hidden="true"></a> <a href="https://developers.cloudflare.com/workers/runtime-apis/kv" target="_blank" rel="nofollow noopener noreferrer">Workers KV</a>とは</h4>
<p>PagesやFunctionsから呼び出せるKey-Valuesストア。<a href="https://developers.cloudflare.com/workers/platform/limits#kv-limits" target="_blank" rel="nofollow noopener noreferrer">ここ</a>見るとわかるけど容量制限など結構厳しいのでDBとして本格的に使える感じではない。</p>
<h4 id="%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 設定方法</h4>
<ul>
<li>まずGUIからだとWorkersのページから<code>namespace</code>(database名みたいなやつ)を設定する</li>
<li>PagesからKVにアクセスするには<code>namespace</code>を紐付ける設定もしないといけない(忘れがち)
<ul>
<li><a href="https://developers.cloudflare.com/pages/platform/functions#kv-namespace" target="_blank" rel="nofollow noopener noreferrer">namespaceの設定方法(GUI)</a></li>
<li>このときに設定する<code>Variable name</code>を使って後ほどアプリ内からKVへアクセスする</li>
</ul>
</li>
<li>これでPagesのコードからKVを呼べる</li>
</ul>
<h4 id="%E4%BD%BF%E3%81%84%E6%96%B9(%E3%81%96%E3%81%A3%E3%81%8F%E3%82%8A)">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9(%E3%81%96%E3%81%A3%E3%81%8F%E3%82%8A)" aria-hidden="true"></a> 使い方(ざっくり)</h4>
<p><a href="https://developers.cloudflare.com/workers/runtime-apis/kv" target="_blank" rel="nofollow noopener noreferrer">KV · Cloudflare Workers docs</a>に細かいことは書いてるが実際に使ってみた方が早いかも。</p>
<ul>
<li>get
<ul>
<li><code>NAMESPACE.get(key, {type: "text|json|arrayBuffer|stream", cacheTtl: 3600})</code></li>
<li>key以外はoption</li>
</ul>
</li>
<li>put
<ul>
<li><code>NAMESPACE.put(key, value, {expirationTtl: 60})</code></li>
<li>
<code>expirationTtl</code>は60以上じゃないとだめ</li>
<li>こんな感じでobjectをJSON.stringifyして格納するとかもいける
<ul>
<li><a href="https://github.com/cloudflare/images.pages.dev/blob/main/functions/admin/api/upload.ts#L68" target="_blank" rel="nofollow noopener noreferrer">images.pages.dev/upload.ts at main · cloudflare/images.pages.dev</a></li>
</ul>
</li>
</ul>
</li>
<li>delete
<ul>
<li><code>NAMESPACE.delete(key)</code></li>
</ul>
</li>
<li>list
<ul>
<li><code>NAMESPACE.list({prefix?: string, limit?: number, cursor?: string})</code></li>
<li>keyをlistで取得できる。一度に1000個まで。</li>
<li>
<code>list_completed</code>が<code>false</code>だとcursorを使ってさらにリクエストできる。</li>
<li>
<a href="https://developers.cloudflare.com/workers/runtime-apis/kv#listing-keys" target="_blank" rel="nofollow noopener noreferrer">ここ</a>に<code>Changes may take up to 60 seconds to be visible when listing keys.</code>とあるのでputしてからKVがrefreshに反映されるまで最大60秒くらいかかる。putしたら即表示するみたいなことはあんまり向いてないかも。</li>
</ul>
</li>
</ul>
<h2 id="vite-%2B-preact%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA">
<a class="header-anchor-link" href="#vite-%2B-preact%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA" aria-hidden="true"></a> vite + preactのアプリ開発</h2>
<h4 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90" aria-hidden="true"></a> プロジェクト作成</h4>
<div class="code-block-container"><pre><code>yarn create vite haropuro-shuffle --template preact-ts
</code></pre></div><h4 id="%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E8%B5%B7%E5%8B%95">
<a class="header-anchor-link" href="#%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E8%B5%B7%E5%8B%95" aria-hidden="true"></a> とりあえず起動</h4>
<div class="code-block-container"><pre><code>cd haropuro-shuffle
yarn install
yarn dev
</code></pre></div><h4 id="%E3%82%B3%E3%83%BC%E3%83%89">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%BC%E3%83%89" aria-hidden="true"></a> コード</h4>
<p>基本的なフロントエンドのコードは<code>src/app.tsx</code></p>
<ul>
<li><a href="https://github.com/YuheiNakasaka/haropuro-shuffle/blob/main/src/app.tsx" target="_blank" rel="nofollow noopener noreferrer">haropuro-shuffle/app.tsx at main · YuheiNakasaka/haropuro-shuffle</a></li>
</ul>
<p>APIに関しては<code>functions/api/shuffle_data.ts</code></p>
<ul>
<li><a href="https://github.com/YuheiNakasaka/haropuro-shuffle/blob/main/functions/api/shuffle_data.ts" target="_blank" rel="nofollow noopener noreferrer">haropuro-shuffle/shuffle_data.ts at main · YuheiNakasaka/haropuro-shuffle</a></li>
</ul>
<p>アプリの配下に<code>functions</code>というディレクトリを作るだけでCloudflare側でAPIにしてくれる。このAPIの中からWorkers KVへアクセスして、get/postしている。Pagesと同じURL配下にAPIが生えてくれるおかげでCORSの設定をしなくてもPOST出来る。</p>
<h2 id="cloudflare-pages%2Ffunctions%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">
<a class="header-anchor-link" href="#cloudflare-pages%2Ffunctions%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4" aria-hidden="true"></a> Cloudflare Pages/Functionsにデプロイ</h2>
<p>Cloudflare Pages/Functionsへのデプロイに関しては基本的に初期設定だけして後はGitHubへデプロイするだけで良い。</p>
<h3 id="cloudflare-pages%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#cloudflare-pages%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> <a href="https://developers.cloudflare.com/pages/get-started" target="_blank" rel="nofollow noopener noreferrer">Cloudflare Pages</a>の設定</h3>
<h4 id="cloudflare-pages%E3%81%A8%E3%81%AF%EF%BC%9F">
<a class="header-anchor-link" href="#cloudflare-pages%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> Cloudflare Pagesとは？</h4>
<p>静的ページのホスティングサービス。vercelやFirebase HostingのようにGitHubにpushするとデプロイされる感じのやつ。</p>
<h4 id="%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95-1">
<a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95-1" aria-hidden="true"></a> 設定方法</h4>
<ul>
<li>
<a href="https://pages.dev/" target="_blank" rel="nofollow noopener noreferrer">Pagesのサイト</a>に行ってGitHubと連携する。
<ul>
<li>
<code>project name</code>は<code>https://&lt;project name&gt;.pages.dev/</code>という形で使われる注意</li>
</ul>
</li>
<li>build settingsは各自環境のものを選ぶ
<ul>
<li>自分はVite + preactを使ったので<code>Build output directory</code>に<code>dist</code>を選ぶようにした。</li>
</ul>
</li>
<li>あとは3分くらい待つだけ</li>
</ul>
<h3 id="functions%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#functions%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> <a href="https://developers.cloudflare.com/pages/platform/functions" target="_blank" rel="nofollow noopener noreferrer">Functions</a>の設定</h3>
<h4 id="functions%E3%81%A8%E3%81%AF%EF%BC%9F">
<a class="header-anchor-link" href="#functions%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> Functionsとは？</h4>
<p>Pagesから呼び出せるエンドポイントを生やせるやつ。</p>
<h4 id="%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95-2">
<a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95-2" aria-hidden="true"></a> 設定方法</h4>
<p>アプリのルートディレクトリに<code>functions/</code>というディレクトリを生やしてその配下に作成したファイルやディレクトリ名がそのままエンドポイントになる。Next.jsなどと同じ。特にGUIからすることはない。</p>
<h4 id="%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 使い方</h4>
<p>基本は下記の関数を適当に作成して<code>Response</code>オブジェクトを返すだけ。</p>
<ul>
<li><code>onRequestPost</code></li>
<li><code>onRequestPut</code></li>
<li><code>onRequestPatch</code></li>
<li><code>onRequestDelete</code></li>
<li><code>onRequestHead</code></li>
<li><code>onRequestOptions</code></li>
</ul>
<p>他にもarrayにハンドラをまとめて定義したりなどいくつか設定方法がある。詳しくはここを読むとサンプルコードと共に書いてある。</p>
<ul>
<li><a href="https://developers.cloudflare.com/pages/platform/functions" target="_blank" rel="nofollow noopener noreferrer">Functions · Cloudflare Pages docs</a></li>
</ul>
<h2 id="%E3%81%9D%E3%81%AE%E4%BB%96">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96" aria-hidden="true"></a> その他</h2>
<h4 id="%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E9%96%8B%E7%99%BA">
<a class="header-anchor-link" href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E9%96%8B%E7%99%BA" aria-hidden="true"></a> ローカル開発</h4>
<p><img src="https://storage.googleapis.com/zenn-user-upload/d64c40f0012b-20211129.gif" alt loading="lazy" class="md-img"></p>
<p>ローカル環境でPages,KV,Functionsの挙動をインクリメンタルに再現したい時に<a href="https://github.com/cloudflare/wrangler2" target="_blank" rel="nofollow noopener noreferrer">wrangler2</a>が役に立つ。↓のようなコマンドでpages,functions,KVの全ての環境がローカルに立ち上がる。</p>
<div class="code-block-container"><pre><code>$ wrangler pages dev --kv HAROPURO_SHUFFLE -- npx vite
</code></pre></div><p>ちなみにアプリ内のpackageとして入れているとCloudflareへのデプロイ時にエラーが出るのでglobalにインストールした。</p>
<div class="code-block-container"><pre><code>yarn global add wrangler@beta
</code></pre></div><h4 id="%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3">
<a class="header-anchor-link" href="#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3" aria-hidden="true"></a> セキュリティ</h4>
<p>今のままだと誰でもAPIを叩いてWorkers KVにPUT出来てしまうので本番とかで使うなら対策が必要そう。</p>
<h4 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4" aria-hidden="true"></a> デプロイ</h4>
<p>package.jsonの<code>yarn build</code>の<code>tsc &amp; vite build</code>の部分を<code>vite build</code>に変更した。<a href="https://github.com/cloudflare/workers-types" target="_blank" rel="nofollow noopener noreferrer">@cloudflare/wrangler-typed</a>を使っているときに<code>tsc</code>をするとビルドエラーが起きたため。</p>
<h4 id="%E4%BE%BF%E5%88%A9%E3%83%AA%E3%83%B3%E3%82%AF">
<a class="header-anchor-link" href="#%E4%BE%BF%E5%88%A9%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> 便利リンク</h4>
<p>このリポジトリがCloudflare Pages, Functions, Workers KVの使い方を概ねカバーしてるので読むのがおすすめ。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5c4f3c992a19e" src="https://embed.zenn.studio/card#zenn-embedded__5c4f3c992a19e" data-content="https%3A%2F%2Fgithub.com%2Fcloudflare%2Fimages.pages.dev" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/cloudflare/images.pages.dev" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/cloudflare/images.pages.dev</a></p>


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

Cloudflare Pages/Functionsにデプロイ

Discussion