Astro v3にアップデートした

本サイトで使っているAstroのバージョンをv3にあげた。 既にv4がリリースされているが、そちらは追々。

手順や変更点はアップグレードガイドに丁寧に書かれている。

アップデート後にうまく動かなくなった箇所があったため、備忘録を残す。

ソースコードのdiffはこちら

画面遷移が動かなくなった

本ブログは/portfolioのサブディレクトリにデプロイしているのだが、アップデート後に<a href='./resume'></a>のリンクをクリックすると、本来であれば/portfolio/resumeに遷移してほしいのに、/resumeに遷移してしまい、404: Not foundになってしまう現象が発生した。

原因は、デフォルトの変更: import.meta.env.BASE_URLのtrailingSlashだった。

baseの末尾にスラッシュを追加して解決。

export default defineConfig({
  site: "https://nishitaku.github.io",
- base: "/portfolio",
+ base: "portfolio/",
});

本番環境でプロフィール画像が表示されなくなった

デプロイ先が/portfolio/public/icon.jpgからportfolio/icon.jpgになっていた。

参照先を変更してもよかったが、v3.0の画像アップグレードアドバイスに

ローカル画像は、Astroが変換、最適化、バンドルできるように、可能な限りsrc/に保存することをおすすめします。

とあったため、icon.jpgをpublicディレクトリからsrc/imagesに移動して、.astroファイルでimportするようにした。

---
import iconImage from '../images/icon.jpg';
---

<Image src={iconImage} />

なお、OGP画像も同じ原因で表示されなくなっていたため、そちらは参照先を変更して対応した。