最近、個人サービスを完全リニューアルしたので、諸々の所感をまとめてみました。
リニューアルしようと思ったきっかけ
約1年ほど前から運営している個人サービスがありがたいことに徐々にアクセス数を伸ばし、8月には初めて10万PVを超え、その後も継続的に伸びています。
今後も長くかつ機能を増やして多くの人に愛されるサービスにしていきたいと思い、古い技術やごちゃっているコードなどを綺麗にして保守性・運用性の高いものにしたいと思いリニューアルをすることに決めました。
具体的にはNuxt2 + JavaScriptで書かれたコードをNuxt3 + TypeScriptにしました。特にJSからTSはずっとやりたかったけどなかなか手をつけられなかったところでした。
TSにしたことで型を定義することができ、グッと開発体験が向上しました。やはり静的型付けでないと気持ちよく開発できない感があり、リニューアルして本当に良かったなと思う点でした。
他にはリニューアル前だとビルド時間が長くなっており、Nuxt3で導入されたViteでビルド時間が短縮されました。またNitroによる開発時のホットリロードがかなり早くなり開発体験が向上しました。
ざっくりアーキテクチャ
サービスとしてはJamstack構成でつくられています。他にスクレイピングするためのジョブなどがありますが、ここでは割愛しています。
Jamstack構成として、ヘッドレスCMSはContentful、ホスティングサービスはNetlify、静的サイトジェネレーターはNuxt3です。
厳密に言うと一部クライアントサイドで動的にデータを取得しており、SSG + CSRのSPA構成のページがあるため、完全に全てのページが静的化してAPI通信がないわけではないです。
基本的にGitでmainブランチにPushされた時とContentfulのコンテンツが更新された時にビルドを走らせています。Netlifyの無料枠だとビルド時間が月に300分で今ちょっとギリなので、近々有料プランに移行することになりそうです。
その点Contentfulは無料で結構使えるので助かってます。コンテンツが膨大にならない限りは無料枠でなんとかなりそうです。
今後、動的な機能の開発を増やしたいと考えており、アーキテクチャをどうするか検討中です。サブドメインを取って別のサービスとして切り分けて出そうかと考えています。
いずれにせよ静的コンテンツ中心の現状では、この構成がパフォーマンス的にもコスト的にもSEO的にも良いのではないかと考えています。
リニューアルまでの苦労や困難
技術的なところではSSGできなかったりSVGが読み込めない、動的サイトマップが上手くできないなど色々ありました。
何度かもうリニューアルを諦めようとも思いましたが、粘りに粘ってなんとかリニューアルに漕ぎ着けることができました。
その場で焦って何とかしようとしても上手くいかないことが多く、ちょっと時間を置いてみると意外とサクッと解決したり別の角度からの解決策が浮かんだりしました。
今となって振り返れば大したことないと思うことでも、当時は結構心折れてたりしていたので、精神的に色々思い詰めない方がいいのかなと思っています。
Dependabotの導入
技術的負債を残さないためにも新しくリニューアルしたリポジトリにDependabotを導入しました。
ライブラリがメジャーまたはマイナーバージョンのアップデートされた時に自動的にプルリクエストを作成してくれます。
プルリクエストをマージしてローカル環境でgenerateしてみて問題なければ本番に適用する流れでいい感じにバージョンアップデートに対応できそうです。
実際にdevelopに対してプルリクエストをしてもらうように設定し、開発環境で動かしたりgenerateしてみて動作確認しています。週一で対応していく予定です。
リニューアル終わってみて
リニューアル直後はアクセスが微減したりして注視していましたが、2週間くらいして前の水準に戻り安定してきましたので、一旦リニューアル関連の作業は落ち着いた感じです。
リニューアルが終わってみて一安心といった感じで、終わってみてやってほんと良かったなーと思います。開発体験が向上し、運用性・拡張性が増して更なる進化へ積極的に取り組めそうです。
ゼロから作り直すのはパワーが入りますが、その分の達成感はひとしおです。