RemixをVercelで動かすときにファイルを読む方法

2021/11/23に公開約2,300字

前提

以下、2022年4月12日追記

vercel.json
{
  "build": {
    "env": {
      "ENABLE_FILE_SYSTEM_API": "1"
    }
  }
}

create-remix@1.3.5現在、Vercelを選ぶと上記のvercel.jsonが生成される。

今回はこれを大胆に書き換えてしまう。

対処しないとどうなるか

https://docs.remix.run/v1/tutorials/blog/

このチュートリアルでは、fs/promisesでMarkdownファイルを読んでいる。

が、Vercelで動かすには追加の設定が必要。

でないと、デプロイ結果に外部のファイルが含まれない。ローカルでは普通に動くので、デプロイするまで気づかなかった。

設定

レポジトリ/
  L api/
    L index.js
  L app/
    L routes
      L index.tsx
      L ...
    L root.tsx
    L ...
  L data/
    L entries/
      L hoge.md
      L ...
  L public/
    L favicon.ico
    L ...
  L ...

こんな感じで、リポジトリ/data/**にMarkdownを置いているとする。

vercel.json
{
  "builds": [
    {
      "src": "public/**/*",
      "use": "@vercel/static"
    },
    {
      "src": "api/index.js",
      "use": "@vercel/node",
      "config": {
        "includeFiles": "{node_modules/@ryanflorence,node_modules/shiki,public,data}/**"
      }
    }
  ],
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/public/$1"
    },
    {
      "source": "/(.*)",
      "destination": "/api"
    }
  ],
  "headers": [
    {
      "source": "/build/(.*)",
      "headers": [
        {
          "key": "cache-control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

その場合、api/index.jsincludeFilesに無理やり全ファイルをぶち込むという応急処置を取っている。

なお、rewritesheadersはVercel本体のリポジトリから取ってきている。(ソース)

そもそもfsを使うべきでない

チュートリアルでは@ryanflorence/mdが使われているが、このパッケージそのものをincludeFilesに含めないといけないというダサい状況に陥った。

そもそもRemixはnodeに依存しないフレームワークだから、チュートリアルはあくまでローカルで体験するための手段としてfsを使っただけだと考えるべきだろう。

https://github.com/vercel/community/discussions/229

上記のDiscussionで言及されている通り、Closed Beta時代からのユーザーであるKent C. Doddsさんのサイトでは、GitHub APIでMDXをfetchするという解決がなされている。

デプロイ用にCIを用意しないといけない

Vercel CLIでデプロイする限りは問題がないのだが、api/index.jsはビルド結果なんだから、普通gitignoreしているはずである。

https://zenn.dev/nikaera/articles/vercel-github-actions

自動でデプロイするなら、こちらを参考に環境を用意すること。

Discussion

ログインするとコメントできます