Remix と microCMS でブログを作って、Vercel にデプロイしてみた
2022/03/21
どういう流れか気がついたら、Remix のチュートリアル（ブログを作るやつ）を始めてた
以下のコマンドを叩いて、対話形式で TypeScript か JavaScript とか、どの環境にデプロイするのかを選ぶだけで必要なものは全てセットアップされる
設定ファイルを何も弄らずに開発からデプロイまで進められるのは個人的に最高だなって思った（自分が知らないだけど、いまどき普通のことなのかもしれないけれど）
$ npx create-remix@latestハマったところ
Cloudflare Workers で fs/promises が使えない
チュートリアルではデプロイ先に Remix App Server を選ぶようにと書いてあったが、なにそれ？だったので最初は Cloudflare Workers を選んで進めていた
しかし、 Cloudflare Workers でNodeの標準ライブラリ fs/promises が使えないらしく、Vercel に変更した
デプロイに必要な設定は最初に自動でセットアップされるので、最初からやり直し
cannot find module 'fs/promises'Vercel で posts ディレクトリが読み込めない
ローカルで動くことを確認して、Vercel にデプロイしたらエラーが出た
ENOENT: no such file or directory, scandir '/var/task/output/server/pages/api/posts'プロジェクトルートに posts ディレクトリをそこに記事を置いていくのだけど、それが Vercel では読み込めないらしい
いくつかissueやdiscussionが上がっていたが解決することができなかったので、以下の記事を参考に記事の管理を microCMS に任せることにした（記事を表示することができればよかったので、キャッシュのところは飛ばした）
RemixでmicroCMSを使ったブログサイトを構築してみた | DevelopersIO
microCMS はいつか触りたいと思っていたところだったのでちょうど良かった
記事をファイルシステムから読む方式ではなくなり、Cloudflare Workers にデプロイすることもできたが、またやり直す気力はなかったのでそのまま Vercel にデプロイ
成果物
https://remix-sample-blog.vercel.app/
https://github.com/ytkg/remix-sample-blog
おわり
今回は Remix の特徴をちゃんと理解して活かしたわけじゃなく、とりあえず動く状態のものを作ってデプロイしただけ
普段はバックエンドばかりで、フロントエンド何も知らないだけなのかもしれないけど、個人的には開発体験めちゃくちゃ良かったので積極的に使っていきたい
このブログも Remix で作り直すのも検討している
