高木のブログ

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 で作り直すのも検討している


SNS でシェアする


ytkg

Written by ytkg, Twitter, GitHub