<h2 id="h8d027c8ed3">はじめに</h2><p>ここ数週間で、当ブログも含めてRemix on Cloudflareなプロダクトを3つ構築した私です。</p><p>Remix on Cloudflareはテンプレートも用意されているのでコマンド一発ですぐにアプリケーションを起動・Cloudflareにデプロイすることができます。</p><p>しかし実際に開発を進めていくと、Remix on Cloudflare特有のつらみを感じてくることもあると思います…。</p><p>そんな時、RemixのAdapterとしてHonoを採用してみたところ開発体験もグッと向上して、Honoのmiddlewareも使えるのでいいことばかり、感動の嵐でした！</p><p>今回の記事では、Remix and Hono on Cloudflareなアプリケーションを構築するメリットデメリット、さらに手順についても軽く触れているので参考にしてみてください。</p><h2 id="h76841ca7d4">Remix on Cloudflareのつらみ</h2><p>Remix on Cloudflareなアプリケーションは、ローカル環境で開発する場合以下のような問題を抱えています。</p><ul><li>Wranglerで起動した場合にホットリロードが効かない</li><li>環境変数の扱いがCloudflareランタイム依存</li></ul><p>順番に深掘りしていきましょう。</p><h3 id="h7a0d1fa30a">Wranglerで起動した場合にホットリロードが効かない</h3><p>nodeランタイムで動作するRemixでは、<code>remix vite:dev</code>コマンドでRemixアプリケーションが起動します。</p><p>コードの修正は瞬時にホットリロードで反映され、快適な開発環境で開発できます。</p><p>Cloudflareランタイムで動くRemix on Cloudflareなアプリケーションは、<code>wrangler pages dev</code>コマンドでRemixアプリケーションを起動します。</p><p>起動する際は/build/clientを参照するため、ソースコードに変更が加わるたびに<code>remix vite:build</code>してから<code>wrangler pages dev /build/client</code>する必要があり、</p><p>変更するたびにビルドするのはかなり辛いです…。</p><p>常にremix vite:devすればいいかというとそういうわけでもなく、node依存でないライブラリを使っていた場合<code>remix vite:dev</code>だと起動できないためwranglerで起動する必要があります。</p><h3 id="h5f1fabbaa8">環境変数の扱いがCloudflareランタイム依存</h3><p>nodeランタイムのアプリケーションであれば、プロジェクトルートに<code>.env</code>ファイルを作成して環境変数を定義し、アプリケーションからは<code>process.env.ENV_NAME</code>で環境変数にアクセスできます。</p><p>Cloudflareランタイムの場合、<code>wrangler.toml</code>ファイルに下記のように環境変数を記述する必要があります。</p><div data-filename="wrangler.toml"><pre><code>[vars] BUN_VERSION = &quot;1.1.23&quot;</code></pre></div><p>また、セキュアな情報の場合<code>wrangler.toml</code>ファイルにおくとGitHubにあげなくてはならないため、<code>.dev.vars</code>ファイルを作成して環境変数を配置する必要があります。</p><h2 id="h301fe7069a">Honoとは</h2><p>上記で紹介したRemix on Cloudflareの開発体験の問題を解消するために、RemixのAdapterとしてHonoを採用していきます。</p><p>HonoはハイパフォーマンスなWEBアプリケーションフレームワークです。</p><p>様々なランタイムに対応しており、作者も日本人の<a href="https://x.com/yusukebe" target="_blank" rel="noopener noreferrer nofollow">Yusuke Wada</a>さんという方で、個人的に今最も気になっている技術です！</p><p>公式ドキュメントの内容も充実していて、Honoの素晴らしさが分かりやすく紹介されているので気になる方は見てみてください。</p><p><a href="https://hono.dev/docs/">https://hono.dev/docs/</a></p><p>また、作者様のブログもすごく勉強になるのでこちらも必読です！</p><p><a href="https://yusukebe.com/posts/2023/current-status-of-hono/">https://yusukebe.com/posts/2023/current-status-of-hono/</a></p><h2 id="h351ebbcadf">Remix and Hono on Cloudflareするメリット</h2><p>HonoをRemixのAdapterとして動作するようにすれば、先ほどご紹介したRemix on Cloudflareの問題点を解消することができました！</p><p>Viteでアプリケーションを立ち上げつつもHonoがAdapterとしてCloudflareランタイムとやり取りをしてくれるので、問題なく本番のCloudflareと同じ環境で開発することができます。</p><p>また、Honoの<code>env()</code>を使用することで、ランタイムに依存せずに環境変数を扱うことができます。</p><div data-filename="server.ts"><pre><code>import { env } from &apos;hono/adapter&apos; app.get(&apos;/env&apos;, (c) =&gt; { const { NAME } = env&lt;{ NAME: string }&gt;(c) return c.text(NAME) }</code></pre></div><h2 id="h35f3e8641f">Remix on Hono on Cloudflareするデメリット</h2><p>Cloudflare Pagesを使う場合は作者様のサンプルリポジトリがあるので特に躓かずに実装できたんですが、Cloudflare Workersで動作させたい場合は現状だと自分でカスタマイズする必要がありそうです。</p><p>私の場合はCloudflare Pagesを使う想定だったので試せていませんが、Cloudflare Workersを使う想定でカスタマイズしている方の記事も見かけたので貼っておきます。</p><p><a href="https://zenn.dev/watany/articles/651f39a0fa8966">https://zenn.dev/watany/articles/651f39a0fa8966</a></p><p><a href="https://qiita.com/ogadra/items/d049460c08791637ebaa">https://qiita.com/ogadra/items/d049460c08791637ebaa</a></p><h2 id="h905620f5a3">Remix and Hono on Cloudflareする方法</h2><p>上述した通り、作者様がRemix on HonoをViteで立ち上げるサンプルリポジトリを公開してくださっているので、こちらをクローンするなりフォークするなりすれば問題ないです！</p><p><a href="https://github.com/yusukebe/hono-and-remix-on-vite">https://github.com/yusukebe/hono-and-remix-on-vite</a></p><p>下記のリポジトリはViteを使わない古いバージョンのRemixのサンプルリポジトリなので、最新バージョンのRemixを使用する場合は注意してください。</p><p><a href="https://github.com/yusukebe/remix-on-hono">https://github.com/yusukebe/remix-on-hono</a></p><h2 id="h9be0c3393d">おわりに</h2><p>今回はAdapterとしてHonoを使ってみましたが、バックエンドもHonoで書いてみたい気持ちでいっぱいになりました。</p><p>その際は知見が溜まったらまた記事にできればと思います。</p><p>当ブログをRemix + microCMSで構築した記事も公開しているので、よろしければご覧ください。</p><p><a href="https://www.kissa-katada.com/technology/7r8781fn4ok0">https://www.kissa-katada.com/technology/7r8781fn4ok0</a></p>