Zenn
Closed10

Remix メモ

Remix
voluntasvoluntas

前提

  • JavaScript や TypeScript や React などの知識なし
  • Cloudflare Workers 上でのみ動作させる
  • UI などの知識もなし

モチベーション

  • Cloudflare Workers で動作するフレームワークを学んでおきたい

サンプル

ライブラリ

YouTube

  • Remix - YouTube
    • 公式が良い動画をたくさんだしてくれている

日本語ドキュメント

自分向けに翻訳して公開しているだけ

voluntasvoluntas

なぜ Remix か

  • 色々なフレームワークを見ていたが Cloudflare Workers を綺麗に使ってるのが Remix だった
  • ドキュメントが大変充実していた
    • ここまでしっかり書いてあるドキュメントは久々に見た
  • Cloudfalre Workers の KV を利用したセッションをうまく提供していた
  • 組織で開発されておりメンテナンスが継続されそう
    • 実際 React Router チームが開発しておりメンテナンス力はありそう
  • クライアントと中間で HTML をレンダリングするという仕組みがわかりやすかった
voluntasvoluntas

Remix の Cloudflare Workers 対応

  • Cloudflare Workers が推奨している Module Worker 形式に非対応
  • env を引き回せずグローバルに KV や vars が出てしまっている
    • bindings.d.ts を作る必要ある
  • TypeScript 4.5 から対応した mts に非対応
voluntasvoluntas

Route

  • マッチルートとレイアウトルートがあり、挙動が異なる
  • ルートモジュールという意味では共通

Root Layout Route

app/root.tsx に置くルートレイアウトルート。

Basic Routes

  • app/spam/index/tsx がある場合 /spam へアクセスしたときのマッチルートは app/spam/index.tsx
  • 無い場合は app/spam.tsx っがマッチルート

Layout Routes

  • app/spam/index.tsx がある場合はレイアウトルートが app/spam.tsx になる。
voluntasvoluntas

Cloudflare Worker

良さそうな構成

  • worker/ の中でセッション管理はしてしまう
    • adapter.ts を用意する
      • Remix の Wokrer 対応が甘いので、それを補完する
      • Remix は ESModule の Worker に対応していない
    • context/index.ts
    • context/session.ts
      • cookie と kv を利用した session 作る
      • remix の App からは
        • loader: LoaderFunciton = async ({ context }) =>
        • context.session という感じで呼び出す
  • worker/ の中で DO を利用しユーザ管理してしまってもいいかもしれない
voluntasvoluntas

Remix + Cloudflare Workers の現時点での問題点

Cloudflare Workers の ES Module に対応していない

参考

ビルド関連

miniflare は wrangler.toml の [build] を見てしまうので、 npm run build が production build だと、npm run dev をしても production ビルドされてしまう。

このスクラップは2022/12/22にクローズされました