ブログのリプレイスについて
旧ブログ は VuePress 1.x で構築していました。
VuePress 1.x は Vue.js 2.x に依存しているフレームワークであり、ブログやドキュメントサイトの構築に特化しています。
Vue.js 2.x は 2023/12/31 に非推奨となる予定であり、現在は Vue.js 3.x がデフォルトバージョンとなっています。
Vue.js 2.x の EOL に伴い、VuePress 1.x もメンテナンスされなくなっていくことは用意に予測できました。現に、"VuePress v1 is not actively maintained now." とアナウンスされている通りです。
すなわち、何かしらにブログを移行する必要がありました。
移行の目的
ここで、移行にあたって移行プロジェクトの目的を整理することにしました。
現状
目的を整理するためには現状の理解が必要です。まず現状についての問題点を列挙します。
- Vue.js 2.x の非推奨に伴い、移行が必要であること。
- VuePress は拡張性に乏しく、大胆な改造は難しくなってしまうということ。
- 特にデザインの変更はより面倒です。
- VuePress を使用しているため様々な技術を試す場として不適切であり、メンテナンス意欲が落ちるということ。
- VuePress 製アプリケーションは SPA として振る舞うため、重めの処理をさせにくかった。
- Netlify にデプロイしたが、コールドスタート時の応答速度が遅い気がする。
- 新しくブログを投稿したときなど、コンテンツを更新したときに新しいコンテンツを検知するまでに 10 秒以上かかる。
- フロントエンドに markdown ファイルを置いてレンダリングしているため、新しいコンテンツの検知はフロントエンドで解決する必要があった(cache busting など)。cache の更新は VuePress のコンテキストに依存しており、改修が面倒であった。
技術選択
以上を踏まえて今回の migration プロジェクトでは、以下の点を必須項目としました。
- 移植性を考慮したブログを構築すること。
- 自前の機能を沢山載せやすい、比較的プレーンなフレームワークとライブラリを用いること。
- 自分の技術領域に近い技術を使うことで、普段遣いのお砂場にすることができること。
- SSR で build して、CDN から配信すること。
ここで技術選択として、いくつかの選択肢が考えられました。
- Vue 3.x 依存の Vue 系フレームワークで構築する。
- Next.js などの React 系フレームワークで構築する。
- 自前でのブログ構築を諦めてブログサービスを使う。
私は Vue.js(Nuxt.js)を普段使用しており、React.js には精通していません。 目の前で使用している技術に注力するならば 1 を選択し、React にも精通したい意志が今強いなら 2 を選択、もうどうでもいいなら 3 を選択するでしょう。
以上の選択肢のうち、私は 1 を選択しました。Nuxt.js の 3 系を SSR で使い、Cloudflare workers を使って CDN から配信することにしました。Netlify から Cloudflare workers にしたことで表示速度が速くなったかどうかは実際はわかりませんが、体感的には 30%ほどレスポンス速度が向上したような気がします。
また、コンテンツの配信も考えなければなりません。以前は VuePress の機能を使い、フロントエンドに Markdown ファイルを置いてフロントエンドでレンダリングをしていました。
しかし、できればコンテンツはフロントエンドから分離したいものです。その理由としては以下があります。
- フロントエンドにコンテンツが存在すると、下書き状態のコンテンツの管理が面倒で、その管理方法はリリース方法に影響する。
- フロントエンドにコンテンツが存在すると、フロントエンドのソースがその分重くなる。
- フロントエンドにコンテンツが存在すると、cache によって新しいコンテンツの検知がされないことがある。
- フロントエンドからコンテンツを分離することで、フロントエンド PJ の依存が減り、移植性が上がる。
このような悩みから、コンテンツは分離することにしました。また今回はフロントエンドのブログアプリケーションの移植がメインテーマなので、手軽さから headless CMS の micro CMS を利用することにしました。
設計
また移植性を高めるため、設計の段階から JavaScript の世界と Vue の世界を切り離すような設計にもチャレンジしました。
このようにすることで移植コストが下がり、今回のような大掛かりな作り直しをしなくても良くなったように見えます。
最初は Nuxt.js のデフォの設定に従って書いていたのですが、副次的な効果としてこのようなアーキテクチャに従うことでよりリーダブルになったように思います。
おわりに
これからも改善を続けていきます。
参考
#blog