開いたままの SPA が、消えたファイルを要求して白くなる
数日開いたままのページでリンクをタップすると 'text/html' is not a valid JavaScript MIME type で白画面になった。内容ハッシュ付きのファイル名、Cloudflare Pages が古いデプロイのアセットを外すこと、SPA の catch-all リダイレクトの 3 つが重なって起きる。Service Worker がいると更新ボタンでも直らない。再現条件と対処を書く。
Blog
開発の中で下した判断と、その理由を書いています。
数日開いたままのページでリンクをタップすると 'text/html' is not a valid JavaScript MIME type で白画面になった。内容ハッシュ付きのファイル名、Cloudflare Pages が古いデプロイのアセットを外すこと、SPA の catch-all リダイレクトの 3 つが重なって起きる。Service Worker がいると更新ボタンでも直らない。再現条件と対処を書く。
SQLite の制約変更はテーブルの再構築を要求するが、D1 では PRAGMA foreign_keys=OFF が使えないため、外部キーで参照されているテーブルは再構築できない。回避手順と、orm-d1 での検知方法をまとめる。
複数の Cloudflare アカウントにまたがるプロダクトの設定を Pulumi + TypeScript で持ち、秘密は SOPS で暗号化したままコミットする構成。API トークンの発行方法と、API が無く手作業に残った箇所まで書く。
D1 固有の性質(プランごとの上限、バインドパラメータ 100 個の制限、batch の原子性、Sessions API)を API の表面に出すために、D1 と Workers だけを対象にした ORM orm-d1 を書いた。設計判断と、esbuild でバンドルしたサイズの比較をまとめる。
Cloudflare の従量課金と Stripe の決済手数料以外に固定費が発生しない構成。Astro + Workers + D1 + R2 + Stripe の役割分担と、静的生成と SPA の使い分けを書く。
ナミスマート合同会社の技術ブログを開設しました。何を作っている会社で、どんな技術判断を採っているかを書きます。