Remix v2の調査
chimameはじめに
とりあえず、Remix v2がリリースされたので、v1との違いを調べていく
前提条件
Cloudflare PagesでRemixを使っているのでそれ前提となる
調べる方法
- v2で初期インストールしてみる
- v1(1.19.3)で作っているアプリケーションとの違いを見てみる
なので、自分が使ってない機能とかの比較が漏れる可能性は大いにある。
chimameドキュメントの違い
ドキュメントから結構違う。v1の時にはなかったチュートリアルのメニューなどが追加されてる。
-
v1
-
v2
正直初見でパッと見で気になるのはRuntimes, Adapters, Templates and Deployment。Cloudflare Pages(Workers)前提なので、基本的に影響を受けるから。
chimame初期インストールしてみる
v2でも create-remixは提供されてるので、Remixを初期インストールしてみる
$ npx create-remix@latest
動くには動いたのだが、v1の時はこれ以降は対話型でランタイムとかを選択出来たが、v2になってからそれがなくなった。
出来上がったのは、Node.jsで動作するRemixが作られた。
v1の時と動作が違うのでcliのコードを調べてみるとどうやら、v2からはtemplateオプションを付けないとデフォルトのRemixプロジェクトで作られるコードになっている。
IssueとかPRを漁る時間がないのだが、CLIの開発コストを抑えるのが狙い？ともあれ、Cloudflare PagesなどでRemixを使って初期インストールする場合はテンプレートの指定が絶対に必要となった。
なので、テンプレートを指定して作るとよい。
$ npx create-remix@latest --template https://github.com/remix-run/remix/tree/main/templates/cloudflare-pages
これで、Cloudflare Pagesで動作するRemixの初期インストールが完了。
追記:
教えてもらった。
公式と外部のテンプレートに公平性を持たせるためとか書いてる。
chimamepackage.jsonの違い
v1から追加したくらいで、初期インストールしたものをアップデートしてないので、違いはこうなるはず。
もちろんRemixのライブラリは 2.0.0 に上がる。注目すべくはCloudflare Workersの型定義がv4にあがっていること。Remix v1まではv3だったので、最新のCloudflare Workersの機能を使おうとすると型エラーが出て頭を抱えていたが、v4になったことでそれが解消されると思う。
他はReactの型定義やTypeScriptのバージョンなんで特に気にする必要はないかと思う。
chimameremix.config.jsの違い
自身の設定が入っているがv2向けに先行して設定可能だった設定が入ったのでそれを消す形になっている。
この辺を見ながら設定が何がどう変わったのか見るとよい。
chimameserver.tsの違い
ほぼ、違いはない。ちょっとv2向けの記述になっているがそのままでも問題ないと思われる。
ちなみに本内容とは脱線するが、私はCloudflare WorkersでTCPを使っているので、リクエスト毎に接続を作成するためにContextにデータベースの接続を詰め込んで、各処理でこのContextを参照してデータベースへの接続を行っている。
chimametsconfig.jsonの違い
最新の記述方法に変更されたくらい。特に意識する必要はない。
chimame.gitignoreの違い
これはどっちかというと以前のバグ修正。ビルドするとmetafileが出力されているが、ignoreされていなかっただけ。私は違う定義でignoreしていたので、標準設定に変更。
ついでにビルドすると functions/version.txt っていうのが出力された。
変更理由はこの辺
要は開発中にビルドした結果を関して、即座に反映したいってことかな？Cloudflareならwranlger側の世界。
なのでこの functions/version.txt もgitignoreにあるべきだと思うので追加しておく。
追記:
マージされるかわからないけど、一応PRは出しておいた。
chimame.node-versionの違い
初期では 16系から 18.0.0 に変更になっている。ただ、私の場合は元々 18.16.0 になっているので、この変更は取り込まない（そもそもNode.jsで動くのはローカルだけ）
chimame
routes および public は変化無し
実際の初期プログラムが配置される routes などは変化はない。
chimameコード（型定義）の変更
LoaderArgs と ActionArgs は名称が変更になっている。LoaderFunctionArgs と ActionFunctionArgs に変換して型エラーが出ないか確かめる必要がある。
chimameremix-esbuild-overrideは動く？
動く。Remix自体がesbuildからビルドツールを変更したわけではないので動作する。
念のためビルドしたものをStaging環境下にデプロイしてみたが、問題なく動作している。
蛇足: remix-esbuild-overrideはesbuild自体にパッチを当ててるので
自分の場合はなんでRemixのビルド設定をカスタマイズする必要があるとかというとCloudflare Pages用にビルドされるCloudflare WorkersにTCP接続できるようにする設定を入れたいため。