Zenn
Closed5

Remix on Hono on Cloudflare Pages 環境構築メモ

Cloudflare
Cloudflare Pages
Remix
Hono
hanetsukihanetsuki

C3でRemix on Cloudflare Pagesを立ち上げる

create-cloudflare-cli(C3) は Cloudflareへの新しいアプリケーションのセットアップとデプロイを支援するために設計されたコマンドラインツールです。

https://developers.cloudflare.com/pages/get-started/c3/

実行すると対話式で進んでいくので質問に答えていきます。
Step3のdeployだけnoと答えました。
GitHubリポジトリとCloudflare Pagesの繋ぎこみを後程行いCDを自動化したいからです。

npm create cloudflare@latest
実行ログ
npm create cloudflare@latest

----------------
Need to install the following packages:
create-cloudflare@2.9.0
Ok to proceed? (y) y

using create-cloudflare version 2.9.0

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./remix-hono-cloudflare
│
├ What type of application do you want to create?
│ type Website or web app
│
├ Which development framework do you want to use?
│ framework Remix
│
╰ Continue with Remix via `npx create-remix\@2.4.1 remix-hono-cloudflare --template https\://github.com/remix-run/remix/tree/main/templates/cloudflare-pages`

Need to install the following packages:
create-remix@2.4.1
Ok to proceed? (y) y

 remix   v2.4.1 💿 Let's build a better website...
      ◼  Directory: Using remix-hono-cloudflare as project directory

      ◼  Template: Using https://github.com/remix-run/remix/tree/main/templates/cloudflare-pages...
      ✔  Template copied

   git   Initialize a new git repository?
         Yes

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

      ✔  Git initialized

  done   That's it!

         Enter your project directory using cd ./remix-hono-cloudflare
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord


╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Adding command scripts for development and deployment
│ added commands to `package.json`
│
├ Committing new files
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run pages\:deploy`
│
├  APPLICATION CREATED  Deploy your application with npm run pages\:deploy
│
│ Navigate to the new directory cd remix-hono-cloudflare
│ Run the development server npm run dev
│ Deploy your application npm run pages\:deploy
│ Read the documentation https://developers.cloudflare.com/pages
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
╰ See you again soon!

ここまででプロジェクトルート上でnpm run devを実行すれば、Remixが立ち上がります。

hanetsukihanetsuki

RemixのエントリーポイントにHonoを仕込む

remix.config.jsをなんとなく眺めているとどうやらエントリーポイントとして./server.tsがご活躍しているのがわかってきます。（多分そうきっとそう）

狙いを定めてHonoをぶちこんでいきます。

npm install hono
./server.ts
-  import { logDevReady } from "@remix-run/cloudflare";
+  import { logDevReady, createRequestHandler } from "@remix-run/cloudflare";
-  import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
+  import { Hono } from "hono";
+  import { handle } from "hono/cloudflare-pages";
   import * as build from "@remix-run/dev/server-build";

   if (process.env.NODE_ENV === "development") {
     logDevReady(build);
   }

+  const app = new Hono();

+  app.get("/api/hono", (c) => {
+    return c.text("Created Hono API Route!!!");
+  });

+  const remixHandler = createRequestHandler(build, process.env.NODE_ENV);

+  app.mount("/", remixHandler, (c) => ({ env: c.env }));

+  export const onRequest = handle(app);
-  export const onRequest = createPagesFunctionHandler({
-    build,
-    getLoadContext: (context) => ({ env: context.env }),
-    mode: build.mode,
-  });
コピペ用 server.ts
./sever.ts
import * as build from "@remix-run/dev/server-build";
import { handle } from "hono/cloudflare-pages";
import { Hono } from "hono";
import { logDevReady, createRequestHandler } from "@remix-run/cloudflare";

if (process.env.NODE_ENV === "development") logDevReady(build);

const app = new Hono();

app.get("/api/hono", (c) => {
  return c.text("Created Hono API Route!!!");
});

const remixHandler = createRequestHandler(build, process.env.NODE_ENV);

app.mount("/", remixHandler, (c) => ({ env: c.env }));

export const onRequest = handle(app);

ローカルサーバーを立ち上げて http://localhost:8788/api/hono にアクセスすると「Created Hono API Route!!!」があなたを迎えてくれることでしょう。

hanetsukihanetsuki

終わりに

個人開発では、今回した以外にもD1 + drizzleやPrisma（accelerate）+ NeonやKVの利用などいろいろやってみましたが、この辺はまた気が向いたら別で書こうと思います。

また、Honoからremix-honoの紹介がありますが、middlewareをRemixが占拠してしまうので検討から外しました。

middlewareをRemixが占拠してしまうと、今回作成した/api/honoのルートに到達する前にRemixが404を返してしまいます。
ですので、.mount()を利用することで、middleware層を占拠せずに拡張する形でRemixを載せることができます。

このスクラップは4ヶ月前にクローズされました