Q. Remix Cloudflareで404 not matchエラーが出る

状況#

Remix + Cloudflare の環境で、あるタイミングから、トップページの Outlet 内部のコンテンツが表示されず、他のページでは 404 Not match エラーが発生するようになったと相談を受けた。

原因#

public ファイルに favicon.ico 以外のファイルを追加すると、Not match エラーが発生する。

解決策#

この Issue に紐づいた

No match URL error occurs. (CloudFlare Pages)

この PR の内容で解決した。

https://github.com/remix-run/remix/pull/8722/files

次の 2 つのファイルを public ディレクトリに配置する。

/public/_headers

1
/favicon.ico
2
  Cache-Control: public, max-age=3600, s-maxage=3600
3
/assets/*
4
  Cache-Control: public, max-age=31536000, immutable

/public/_routes.json

1
{
2
  "version": 1,
3
  "include": ["/*"],
4
  "exclude": ["/favicon.ico", "/assets/*"]
5
}

余談#

この PR は 2024 年 2 月からマージされておらず、cloudflare の提供している crearte コマンドも内部的には remix の提供している template を利用しているため、2024 年 4 月現在では remix + cloudflare の環境のほとんどがこの問題を抱えている可能性がある。