【Astro】メジャーアップデート 2.0 が来たのでアップデートしてみた
当サイトでも使用している静的サイトジェネレータ Astro のバージョン2.0 が 2023年01月25日(日本時間) に正式リリースされたのでアップデートをしてみました。
アップデート内容について
公式ブログで解説されています。
Astro 2.0 | Astro
Astro 2.0 is here! Astro 2.0 is the first major web framework to deliver complete type-safety for Markdown and MDX. Other release highlights include: Hybrid Rendering • Redesigned Error Overlays • Improved Dev Server and HMR • Vite 4.0 • A New Public Roadmap
日本語でまとめられている記事もありました。
静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に
オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 2.0」が正式にリリースされました。 Astro 2.0 – our most exciting release yet!https://...
アップデート内容の中で特に関係しそうなところでいくと、
- Redesigned Error Overlays
- Vite 4.0
この2つでしょうか？
Redesigned Error Overlays
Astro で記述ミスなどしてエラーが発生すると下記の画像のような画面が表示されます。
ダークテーマに切り替えが可能なほか、公式ドキュメントへの参照リンクが挿入されるなど、よりデバッグが行いやすくなっています。
Vite 4.0
サイトビルドエンジンがアップデートされました。ビルド時間に劇的な差は今のところ感じていませんが、3.0と比べるとインストールサイズや実行速度またビルド時のバグなどに対応されているようです。
アップデートの方法について
公式ドキュメントに手順が書いてあります。
Upgrade to Astro v2
How to upgrade your project to the latest version of Astro.
私の環境では npm を使用しているので
npm install astro@latestでアップデートが行えました。 2023-01-29現在で、バージョン2.0.2 となるようです。アップデート自体は数十秒程度で終了します。
アップデート終了後早速
npm startで Astro を実行してみたところ、下記のようなエラーが発生しました。
Cannot read properties of undefined (reading 'postcss')...
File:
C:\***\node_modules\@astrojs\svelte\dist\index.js:66:41
File:
C:\***\node_modules\@astrojs\tailwind\dist\index.js:78:22どうやら @astrojs/svelte や @astrojs/tailwind のアップデートも必要なようです。 先程のAstro 同様に下記の様に記述してアップデートを行ってください。 (ライブラリの使用状況に応じて適切なアップデートを行います)
@astrojs/Svelte
npm install @astrojs/svelte@latest@astrojs/Tailwind
npm install tailwindcss@latestアップデート完了！
npm start でエラー発生せず実行できたら完了です。HTML ソース上でBuild Version が2.x.x になっていればおそらく問題ありません。意図的にエラーを発生させ2.0の新機能 Redesigned Error Overlays を試してみましょう。
おわりに
当サイトでは Astro を1.6.10 → 2.0.2 へアップデートしてみましたが今のところ表示の崩れやバグなどは起きていません。アップデートする際は必ずアップデート前のデータを控え問題が起きたら直ちに戻すことができるよう作業しましょう。
