目次

はじめに

最後の記事投稿から2年くらい経っていますが、先日このブログで行ったマイグレーションについてのまとめ記事です。

記事タイトルにもあるようにAstroとVueをメインに次の表のようマイグレーションを行っています。

Before After
Framework Nuxt.js v2 (Vue.js v2) Astro v3, Vue.js v3
Testing Jest, Cypress Vitest, Playwrite
Server Netlify AWS S3, CloudFront
CMS microCMS microCMS
Repository kimulaco/kimulaco-blog kimulaco/blog

ちなみに今回デザインは変えておらず、実装のみの更新を行っています。

カテゴリごとに軽く振り返ろうと思います。

マイグレーション方法

今回kimulaco.comからblog.kimulaco.devへのドメイン移管もしたかったので新しいリポジトリで開発を進め、ある程度動作するようになってきたらクロールされないようにしつつ新ドメインで動作確認をできるようにしていました。

そして移行実施時に旧ドメインから新ドメインへのリダイレクトを行う形でマイグレーションしています。なので検索結果では旧ドメインが表示されているページもあると思いますが、順次新ドメインに切り替わると思っています。

CMSは一旦変更無し

CMSはmicroCMSを引き続き使用しています。

ただ無料プランだともうこれ以上拡張できない状態なので、今後移行を考えています。最近Xで見かけたOSSのヘッドレスCMSソフトウェアであるCollectionsが気になっているので近々触ってみようと思っています。

Nuxt v2 から Astro v3 への移行

元々Nuxt.js v2で作っていましたが、Vue v2は2023年12月31日、Nuxt v2は2024年06月30日でサポートが終了することもあり、今回Astroに移行しました。

https://v2.nuxt.com/ja/lts/

Nuxt.js v3へのアップデートでも良かったのですが、個人的に静的サイト制作ではAstroを推していて、私のブログではリアクティブな状態管理を必要とするような機能を実装する予定も無かったのでAstroへの移行を決めました。

Astro と Vue の併用

タイトルや冒頭にも記載した通り、Vue.jsも合わせて使用しています。既存がNuxt製なので全てのUIコンポーネントがVueで作られており、デザインを変えるわけでもないので既存のコンポーネントをある程度使いまわせると思い併用することにしました。

ただ使いまわせるもののVue v2からVue v3へのアップデートは必要でついでにsetup構文への書き換えを行なったので、結局.astroに移行してもそんなコストは変わらないのではとも途中で思いましたが、これを機にAstroと他フレームワークの併用を試してみようというモチベーションもあったのでとりあえず併用を続行しました。

公式のインテグレーションを使用することで、.vueファイルも扱えるようになるので、併用自体はとても簡単です。

https://docs.astro.build/ja/guides/integrations-guide/vue/

実際に併用してみて少し不便だったのが、

  • classやstyle属性をコンポーネントに渡す場合、コンポーネント側でpropsから渡す実装が必要
    • astroはJSXベースなので、当たり前と言えば当たり前
  • .vue内ではastro:assetsの<Image />が使えない

など若干の扱いにくさはありました。このブログではリアクティブな機能があるわけではないので、いずれは全て.astroに書き換えようと考えています。

Astroのテスト

今回は公式の Testing にも記載されているVitestとPlaywrightを使用しています。

ごく一部のユーティリティ関数のユニットテストと、必要なページが生成されているか程度をテストするE2Eテストがあるだけの状態で、ほとんどのテストを後回しにしていることもあり、苦労話などはまだないです。

そして今回で知ったのですが、.astroファイルのテストをするための公式ツールがまだありません。公式のロードマップで提案はされていますが、実装するかどうかからまだ目処は立っていないようです。

https://github.com/withastro/roadmap/blob/main/proposals/0003-add-test-tool-for-astro-components.md

無心でcodecov入れてしまいましたがユニットテスト実装できずにどうしよう状態になっているので、公式テストツール出ないかなと期待しています。

Netlify から AWS への移行

既存サイトではNuxtでSSGした静的リソースをNetlifyでホスティングしていました。

移行後もNetlifyなどのホスティングサービスで問題ない上にコスパも最強だったのですが、最近AWSを扱う会社に転職したこともあり、少しでもAWSに触れる機会を増やそうと思いひとまずS3とCloudFrontで配信することにしました。SSGしているのは以前と変わらず、静的リソースをS3にアップロードし、CloudFront経由で配信するというスタンダードな構成です。

ドメインのリダイレクト

Netlifyでは_redirectsファイルまたはnetlify.tomlファイルでHTTPリダイレクトの設定が可能なので、この機能で旧ドメインから新ドメインへのリダイレクトを行っています。

https://docs.netlify.com/routing/redirects/

実はドメインだけではなく一部URLも変更しているため、netlify.tomlで次のように設定して、下層ページも含めたリダイレクトを設定しています。

[[redirects]]
  from = "/post/*"
  to = "https://blog.kimulaco.dev/article/:splat"
  status = 301
  force = true

[[redirects]]
  from = "/*"
  to = "https://blog.kimulaco.dev/:splat"
  status = 301
  force = true

今後実装したいもの

  • 以前一時的に実装していた、よく読まれている記事などの動的コンテンツ
  • AstroのView Transitions APIを使ってみる
  • そろそろデザインをいい感じにしたい

などなど

まとめ

  • Astroで他フレームワークと併用が合いそうだなと思った場面
    • 全体は静的サイトだけど、特定部分だけアプリケーション的な振る舞いをさせたい時
    • 初期コストを抑えながら他フレームワークからAstroに移行したい時
  • 絶妙に制約は生まれるので、Astroだけで完結できるなら併用しないに越したことはなさそうです
  • .astroファイルの公式テストツールが欲しい
  • 最近のホスティングサービスはリダイレクト機能も用意してあって便利

せっかく技術マイグレーションを行ったのでちゃんとブログ記事も更新したい。