<p><a href="https://zenn.dev/mizchi/scraps/fda07433250e82" target="_blank">このスクラップ</a> で試行錯誤していたまとめ。</p>
<p>最終形はここにアップロードした。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f5045cb719a6b" src="https://embed.zenn.studio/card#zenn-embedded__f5045cb719a6b" data-content="https%3A%2F%2Fgithub.com%2Fmizchi%2Fremix-d1-bullets" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/mizchi/remix-d1-bullets" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/mizchi/remix-d1-bullets</a></p>
<p><a href="https://github.com/mizchi/remix-d1-bullets/tree/main/docs" target="_blank" rel="nofollow noopener noreferrer">docs</a> の下に、このリポジトリを生成した手順、セットアップ方法、リリース方法を書いてある。</p>
<p>(remix-validated-form や vitest のテストの追加でもうちょっといじるとは思う)</p>
<h2 id="%E3%81%AA%E3%81%9C">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%9C" aria-hidden="true"></a> なぜ</h2>
<p>cloudflare-workers + d1 のポテンシャルは最強で、近い未来、開発者|個人開発者の銀の弾丸になると思っているのだが、それを活かす開発スタックが知られていない(要出典)。この記事では GW の間に自分で周辺ライブラリを使い倒しながら選定していった。</p>
<p><a href="https://zenn.dev/mizchi/articles/b53f539ade1f42" target="_blank">2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した</a> の cloudflare-workers + d1 版とも言える。</p>
<h2 id="tl%3Bdr">
<a class="header-anchor-link" href="#tl%3Bdr" aria-hidden="true"></a> tl;dr</h2>
<ul>
<li>cloudflare-pages-functions</li>
<li>remix | <code>@remix-run/cloudflare-pages</code>
</li>
<li>remix-auth | Google OAuth</li>
<li>D1 | DrizzleORM</li>
<li>GitHub Actions CI and Release</li>
</ul>
<h2 id="%E9%81%B8%E5%AE%9A%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC">
<a class="header-anchor-link" href="#%E9%81%B8%E5%AE%9A%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC" aria-hidden="true"></a> 選定ポリシー</h2>
<ul>
<li>初期コスト0円(or cloudflare bundled プランで $5)からで、段階的にスケールする</li>
<li>現時点で枯れてる必要はないので、ポテンシャル重視
<ul>
<li>d1 の open alpha が終わるまでに、下記の残タスクを潰していく。</li>
</ul>
</li>
<li>パフォーマンス: 薄く、フレームワーク自体がオーバーヘッドにならないように。 プレーンなページでLighthouse 100点はマスト。</li>
<li>開発体験
<ul>
<li>宣言的マイグレーション</li>
<li>TypeScript との親和性</li>
</ul>
</li>
<li>ビルドが軽量で高速
<ul>
<li>開発環境のリロード速度に直結</li>
<li>cloudflare-workers の 1MB 制限に引っかからない</li>
</ul>
</li>
<li>フルスタック≒Rails相当
<ul>
<li>ただし scaffold は不要。スタックが固まってない段階の scaffold は負債の高速生産。</li>
</ul>
</li>
<li>誰でも使えるというより、個人のパフォーマンスを最大化するスタック</li>
</ul>
<p>念頭にあるもの</p>
<ul>
<li><a href="https://laiso.hatenablog.com/entry/nope-sql" target="_blank" rel="nofollow noopener noreferrer">個人開発のコストはDB次第 - laiso</a></li>
<li><a href="https://github.com/remix-run/indie-stack" target="_blank" rel="nofollow noopener noreferrer">remix-run/indie-stack: The Remix Stack for deploying to Fly with SQLite, authentication, testing, linting, formatting, etc.</a></li>
</ul>
<h2 id="%E9%81%B8%E5%AE%9A%E7%B5%90%E6%9E%9C">
<a class="header-anchor-link" href="#%E9%81%B8%E5%AE%9A%E7%B5%90%E6%9E%9C" aria-hidden="true"></a> 選定結果</h2>
<ul>
<li>プラットフォーム: cloudflare pages functions
<ul>
<li>静的サイトホスティング + 部分的な worker の構成が柔軟に取れる</li>
<li>ただし各種環境の binding に難あり(後述)</li>
</ul>
</li>
<li>フレームワーク: remix + <code>@remix-run/cloudflare-pages</code>
<ul>
<li>他のフレームワークと開発ワークフローが大きく変わらない</li>
</ul>
</li>
<li>DB: D1 + drizzle-orm
<ul>
<li>drizzle は癖があるが現状一択。prisma が D1 対応したら要検討</li>
</ul>
</li>
<li>認証: remix-auth + Google OAuth
<ul>
<li>Session 永続化は Workers KV</li>
</ul>
</li>
<li>エラーメトリクス: sentry を使いたかったが...(後述)</li>
<li>テスト: vitest + vitest-environment-miniflare
<ul>
<li>ローカル環境で cloudflare stack をモックしてテストできる</li>
</ul>
</li>
<li>CI: GitHub Actions</li>
</ul>
<h3 id="remix-%E3%82%92%E9%81%B8%E3%82%93%E3%81%A0%E7%90%86%E7%94%B1%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#remix-%E3%82%92%E9%81%B8%E3%82%93%E3%81%A0%E7%90%86%E7%94%B1%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> remix を選んだ理由について</h3>
<p>SSR するかどうかは後で選べばいいとして、どっちでも使えるものを選んでおくのは生存戦略上有効。SSR するフレームワークをスクラッチで作るのは大変で、かつ選定後に各位がググりながら自走するためにある程度ノウハウが普及する程度のシェアが必要で、 実質 Next vs Remix になる。API エンドポイントを作るだけなら Hono でいいと思う。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6593d2dca51db" src="https://embed.zenn.studio/card#zenn-embedded__6593d2dca51db" data-content="https%3A%2F%2Fgithub.com%2Fhonojs%2Fhono" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/honojs/hono" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/honojs/hono</a></p>
<p>Next.js を cloudflare 上で動かす <a href="https://github.com/cloudflare/next-on-pages" target="_blank" rel="nofollow noopener noreferrer">https://github.com/cloudflare/next-on-pages</a> を試しに動かしてみたが、開発環境でちょっとした変更のたびに10秒以上のフルビルドを待つ必要があり、かなり厳しく感じた。 やはり Next は Vercel Stack で動かしたほうがよい。</p>
<p>Remix は最初から cloudflare-workers(-pages) に対応している。</p>
<p>Remix はSPA遷移してるうちは Next と同じような肌感なのだが、 組み込みの <code>@remix-run/react</code> の Form と組み合わせて使うと不思議な開発体験で、やってることは Form を作って POST を受けて結果を返して表示、という古のワークフローなのに、それが SPA上で動いている。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4630efad4e532" src="https://embed.zenn.studio/card#zenn-embedded__4630efad4e532" data-content="https%3A%2F%2Fremix.run%2Fdocs%2Fen%2Fmain%2Fguides%2Fdata-writes" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://remix.run/docs/en/main/guides/data-writes" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://remix.run/docs/en/main/guides/data-writes</a></p>
<p>React の「サーバーサイドと同じく完成形のHTMLを常に宣言する」というのが広く刺さったように、 Remix の 「サーバーサイドと同じく form と CRUD エンドポイントで実装できる」というのが刺さるのではないか、という予感がある。</p>
<p>Remix は API エンドポイントと View の JSON の受け渡しが(Blitz.jsのように)フレームワーク内に隠蔽されてるので、自身に閉じてる限り tprc や graphql が不要なのもポイントが高い。</p>
<h3 id="orm">
<a class="header-anchor-link" href="#orm" aria-hidden="true"></a> ORM</h3>
<p>別記事に選定過程を書いたのでここで詳述しないが、奇しくも同じ時期に同じ内容を書いた @chimame さんと同じ結論に至っている。drizzle か kysely。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1a5d3a73fc2d8" src="https://embed.zenn.studio/card#zenn-embedded__1a5d3a73fc2d8" data-content="https%3A%2F%2Fzenn.dev%2Fmizchi%2Farticles%2Fd1-drizzle-orm" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/mizchi/articles/d1-drizzle-orm" style="display:none" target="_blank">https://zenn.dev/mizchi/articles/d1-drizzle-orm</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7c1a9840eec75" src="https://embed.zenn.studio/card#zenn-embedded__7c1a9840eec75" data-content="https%3A%2F%2Fzenn.dev%2Fchimame%2Farticles%2F60e2824a42fec0" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/chimame/articles/60e2824a42fec0" style="display:none" target="_blank">https://zenn.dev/chimame/articles/60e2824a42fec0</a></p>
<p>ただし、両者ともに prisma があったらそれを選びたい気持ちは一緒。今後の prisma 次第だが、prisma はビルドした際のサイズが結構大きいので、 cloudflare-workers 環境だとそれが問題になる可能性がある。</p>
<p>他に考えたこととして、drizzle, kyzery, prisma はいずれも ORM というより、クエリビルダといった趣が強いので、 ActiveRecord パターンで抽象するのは難しい気がしていて、 GraphQL や CQRS のように mutations | queries のようなディレクトリに分けたほうがよさそう。</p>
<div class="code-block-container"><pre><code>app/
  routes/... # remix の routing
  mutations/
    createPost.ts
  queries/
    getPostWithTags.ts
</code></pre></div><p>これも最近のプラクティスとしては一般的な部類ではありそう。</p>
<h3 id="%E8%AA%8D%E8%A8%BC%E5%91%A8%E3%82%8A">
<a class="header-anchor-link" href="#%E8%AA%8D%E8%A8%BC%E5%91%A8%E3%82%8A" aria-hidden="true"></a> 認証周り</h3>
<p>最初は IDaaS に Firebase Authentication の JWT Token を使おうと思ったが、 Remix のマインドセットに合わせるなら Session 認証したほうがいいだろうと思い、素朴な Google OAuth の認証を実装した。</p>
<p>現代の小規模サービスなんて email/password は脆弱なだけで、 OAuth さえあればいい。Twitter 認証が使い物にならなくなり、GitHub 認証は開発者しか通じないといった今、 最小限のテンプレートには Google OAuth だけあればよいと判断した。ちゃんとした IDaaS がほしければ、Auth0 を使えば良い。</p>
<p>ただし、Session の永続化に WorkersKV を使った。認証バックエンドはサービス全体のオーバーヘッドになるので可能な限り高速な必要があるが、WorkersKV なら簡単な RW が5~ms で終わるので。</p>
<h2 id="%E6%AE%8B%E3%82%BF%E3%82%B9%E3%82%AF">
<a class="header-anchor-link" href="#%E6%AE%8B%E3%82%BF%E3%82%B9%E3%82%AF" aria-hidden="true"></a> 残タスク</h2>
<p>ここは触った過程で問題になった箇所を列挙している。</p>
<ul class="contains-task-list">
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> drizzle-orm + d1 で同名のカラムがある状態で join すると壊れる <a href="https://github.com/drizzle-team/drizzle-orm/issues/555" target="_blank" rel="nofollow noopener noreferrer">https://github.com/drizzle-team/drizzle-orm/issues/555</a>
</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> remix の server-side で Unhandle Error Rejection が出た時に server-side で捕捉する方法がない。これによって自分で補足する以外に sentry にデータを送る方法がない <a href="https://github.com/remix-run/remix/discussions/6313" target="_blank" rel="nofollow noopener noreferrer">https://github.com/remix-run/remix/discussions/6313</a>
</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> clouflare pages functions が <code>wrangler.toml</code> の binding (<code>[vars]</code>や <code>kv_namespaces</code>) を参照しない
<ul>
<li>cloudflare-developpers の discord で聞いたらバグとのこと。これは <code>wrangler pages</code> コマンド自体がβ版なので待てば治ると期待している。</li>
</ul>
</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> d1 の open alpha 終了</li>
</ul>
<h2 id="%E5%80%8B%E4%BA%BA%E3%82%BF%E3%82%B9%E3%82%AF">
<a class="header-anchor-link" href="#%E5%80%8B%E4%BA%BA%E3%82%BF%E3%82%B9%E3%82%AF" aria-hidden="true"></a> 個人タスク</h2>
<ul class="contains-task-list">
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> <a href="https://www.remix-validated-form.io/" target="_blank" rel="nofollow noopener noreferrer">https://www.remix-validated-form.io/</a> を試す</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> vitest-environment-miniflare のテストパターンを増やす</li>
<li class="task-list-item enabled">
<input class="task-list-item-checkbox" type="checkbox"> チュートリアルを書く</li>
</ul>
<h2 id="%E6%84%9F%E6%83%B3">
<a class="header-anchor-link" href="#%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 感想</h2>
<p>ここまで書いておいてなんだが、ボイラープレートを作ることは、他人に提供するものというより、自分自身のためのものだと思う。デッキビルディング型ローグライクで、自分の目指すビルドのためにカードをピックしていく感覚に近い。</p>
<p>自分が作ったボイラープレートを紹介して、「ここからいじっていくといい」と紹介するのもいいのだが、結局は自分で手を動かさないと腹落ちしないと感じた。特に今回のような寄せ集めスタックを活かす場合、自分と学んだ経路を整理して追体験して納得してもらう必要があり、それはたぶん一冊の本の形式を取ることになる。気が向いたら zenn の有料本で書くかもしれない。</p>
<p>いずれにせよ、そのような本で学習する場合、速習にはなるが自分でライブラリを漁る体験を飛ばすことになり、技術的な審美眼を鍛える機会が失われる。</p>
<p>Rails みたいなオールインワン環境はそれ自体が一種の権威みたいになっていて、そのチュートリアルを上からやっていくことに学習者は抵抗がないと思うが、寄せ集めスタックを紹介する場合はそうはいかないのが難しいと感じた。</p>
<p>あと一応、これを書いてる途中に vercel/kv とかも出たので、ちょっと vercel 側も調べたりしていたが、 Next は Vercel Stack or 静的サイトホスティングで、 Remix は Workers というのが安牌ではあると思う。</p>


Cloudflare Workers を活かしきるスタックを考えた(remix+d1 on pages-functions) + 残タスク

Discussion