Cloudflare や Astro などに移行した

Netlify や Vercel に散らばっているアプリケーションを Cloudflare に移行したり、古いまま放置しすぎてアップグレードが難しくなったものを Astro や Nuxt で作り直したりした記録です。

ためになる話はありません。

このブログの移行

まず、この技術ブログを Gatsby v2 から v5 にアップグレードした。 https://kyabe.net/blog/update-gatsby-from-v2-to-v5/ が大変参考になった。

必須じゃない機能やライブラリを消しまくった。 Node.js v12 ぐらいから v22 にアップグレードした。

ライブラリとランタイムが最新に追いついたところで Vercel から Cloudflare Pages へデプロイ先を切り替えた。 その後まもなく Pages から Workers への移行の案内がきて悲しくなった（2025年初夏の話）。

カスタムドメインを設定するためには DNS の管理を Route 53 から Cloudflare 側に寄せる必要があり、その設定の説明がドメイン移管っぽく読めてヒヤッとした。

他のブログの移行

他にも同じ技術スタックを採用するブログがあるので、同様に移行した。 これは最初から Cloudflare Workers にデプロイした。

ポートフォリオの移行

移行前、ポートフォリオ（4423.ch）は Node.js v10 かつ Ubuntu 16 という古すぎる構成の Netlify で動いてた。 しかも、前述のブログとは異なる Gatsby Starter を元に実装されており、依存も多くて、より難易度が高い感じになっていた。

なので、窓から投げ捨てて、Astro で書き直すことにした。

Astro は JSX に近い構文を持つので、Gatsby からの移植はしやすかった。

jQuery + FlexSlider で実装されていた画像ビューアは Swiper に置き換えた。 画面遷移時に Swiper が動かなくなる問題でハマったが、astro:page-load で Swiper のインスタンスを生成し、astro:before-swap で destroy することで解消した。 https://docs.astro.build/en/guides/view-transitions/#script-order

Puniket Circle Viewer の移行

流石に6年前とはサークル配置リストの形式も変わって動かないだろう……と思ったら動いたので、Netlify から引き上げた。 ついでに、Vue 2 → Nuxt v4 に書き直した。 SSR で検索に引っ掛けたいのと、移植しやすそうだったため。

元々使っていた vue-good-table やその Nuxt バージョンである vue-good-table-next はメンテが止まっている気配を感じたため、TanStack Table に乗り換えた。 列ごとの検索と並び替え、一部の列だけドロップダウンで絞り込み、行選択、といった要件を満たすライブラリとしては、これが一番よさそうだった（というか他に見つからなかった）。

とりあえず移植した、という状態で、Tailwindcss と素の CSS が混在していたりする。 見た目は既存を維持しているが変えてもよさそうだし、そのうち機能を追加したい気もする。

おしまい

Renovate の Pull Request が溜まりがち問題。 自動マージしたいけど、流石に E2E テストを入れておかないと不安だなぁというところで止まっている。