RemixでのWebSite構築

remix

ブログを書くためのサイトを自分で構築しました。既存のメディアを使ってもよかったのですが、以下の理由から自分で構築することにしました。

自分の知見をアウトプットしたい
子どもが産まれて育休状態に入ったことで多少時間ができた
日本人向けだけでなく英語でも記事を書きたい
業務でフロントエンドのコードを書くことになっても困らないようになっておきたい
Webサイトを自分で構築してリリースする経験をしておきたい

これまで何度かWebサイトの構築にトライしたことがありましたがまともにリリースには至っていないので、今回とりあえずリリースにたどり着けてよかったです。

構成

Remix/React + Typescript + TailwindCSS
SQLite
Fly.io

Remixを選んだ理由はShopifyにいるKen Wagatsumaさんにおすすめいただいたからです。同様のReactのFrameworkとしてNext.jsと比較されることが多いと思いますが、Remixはこのページのような小さいサイトに向いていると言われているようなので Remixで進めてみてよかったなと思います。Next.jsの経験もほぼないので個人として比較はできません。

ホスティングは公式サンプル同様Fly.ioを利用しています。本当は最近話題になっているCloudflare Pagesなども試してみたかったのですが、いろいろ罠を踏みそうだったのでとりあえずはFlyで最速でのDeployを目指しました。

進め方

公式のBlog Tutorialを参考に2,3度作って壊してをしながら感覚を掴みました。また、要所要所でKent C. DoddsさんによるUp and Running with Remixのポイントを取り入れました。これらTutorialではIndie Stackという公式サンプルサイトを元にBlogを構築していきますが、私は最終的にnpx create-remix@latestで一から構築しつつ必要なファイルをサンプルから補ったり自分で実装したりしました。結果として罠もいくつか踏んだのでその一部を紹介したいと思います。

はまった箇所

Remix V2による変更

Remix V2 APIでは多くの変更点があります。

詳しく理解していないですが手元の環境ではFuture FlagなしにV2の機能が使える状態になっていました。 remix.config.jsにて以下のような設定にしているからだと思います。

  future: {
    v2_dev: true,
    v2_errorBoundary: true,
    v2_headers: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },

それによってサンプルサイト通りでは動かない箇所が多数ありました。

Nested Routing でDirectoryが使えない

DirectoryベースのNested RoutingがV2ではdot区切りでのRoutingになっています。

特に困るわけではないですが、Kentさんの動画ではDirectoryベースのままだったので多少混乱しました。

CatchBoundaryが使えない

Kentさんの動画で紹介されていたCatchBoundaryは、V2ではErrorBoundaryに統合されているようです。

余談ですが、ErrorBoundary という概念は面白いなと思いました。Try/Catchを描かなくていい分読み書きしやすいですね。以下注意点です。

ErrorBoundary is the last line of difference so there shouldn’t be any errors

FlyでのDeploy

Flyはインフラ知識がほとんどなくてもDeployできるため非常に便利ですが、一方でまだ新しいツールということもあっていくつか問題に当たりました。

Region問題

構築時点で日本に住んでいるのでTokyoリージョンを利用しました。 fly.tomlに記載しているリージョンとVolumeのリージョンを一致させないと動作しません。自分は以下でVolume作成する際にリージョンを記載するのを忘れていました。
fly volumes create data --size 1 --app tommyasai -r nrt

OOM

無料プランのメモリが256MBなためか、Prisma関連のコマンドが失敗しました。 Communityのスレッドを参考に、Swapfileを追加することで実行できました。

コマンド実行方法

サーバー上でコマンドを実行する方法を見つけるのに時間がかかりました。
flyctl console -a <app ID> --machine <machine ID> を実行することで特定マシンのConsoleに入ることができました。

Buildエラー

tsc実行時に以下のようなエラーが発生します。

error TS2420: Class 'NodeOnDiskFile' incorrectly implements interface 'File'.

これは既に修正済みで、Remix V2のリリースで修正されるようなので気長に待とうと思います。V2楽しみですね。

今後の展望

見ての通り発展途上の状態で公開してしまったので、ブログも含めたポートフォリオサイトにすべく引き続き改善を続けて行きたいと思います。妻にグラフィックデザイナーとしてUI改善を助けてもらうつもりです。

Co-HostをしているLondon Tech TalkのWebサイトを作ろうして作れていないので、この経験をPodcastのサイト構築にも活かしたいと思います。

Tommyasai