静的サイトジェネレーターAstroをv3からv4へアップグレード

アップグレード…何と怖い響きだろう。もしアップグレードで通常通り動作しなかったら、と考えるとつい二の足を踏んでしまう。

しかし、今ちょうど連休で時間もあるので、意を決してAstroのアップグレードを行うことにした。2024年5月現在の最新バージョンはv4.7.1、当ブログのバージョンはv3.4.3（2023年11月版）である。

アップグレード方法

何はともあれ、公式ページを見ましょう。

Astro v4へのアップグレード | Docs

npm、pnpm、Yarnによるアップグレード方法が紹介されている。古いバージョンは手動アップグレードも必要かもしれないが、半年以内のバージョンであれば恐らく不要だろう。

# npmの場合
npx @astrojs/upgrade

上記コマンドをAstroのローカルリポジトリで実行すると、依存パッケージも含めてアップグレードしてくれる。

Need to install the following packages:
  @astrojs/[email protected]
Ok to proceed? (y)

メッセージが出るので、yで進む。

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@astrojs/[email protected]',
npm WARN EBADENGINE   required: { node: '^18.17.1 || ^20.3.0 || >=21.0.0' },
npm WARN EBADENGINE   current: { node: 'v18.15.0', npm: '9.5.0' }
npm WARN EBADENGINE }

 astro   Integration upgrade in progress.

      ●  @astrojs/partytown will be updated to v2.1.0
      ●  @astrojs/rss will be updated to v4.0.5
      ●  @astrojs/tailwind will be updated to v5.1.0
      ▲  astro will be updated to  v4.7.1 

  wait   One package has breaking changes. Continue?
        ● Yes  ○ No

何か怖いやつが連発した。どうやらNode.jsのバージョンが古いらしい。

一旦▶キーでNoを選択して終了した。

Node.jsをバージョンアップ

エラーメッセージによると、当ブログのNode.jsのバージョンはv18.15.0（npmはv9.5.0）、Astro v4.7.1で必要なNode.jsのバージョンは、18系の場合はv18.17.1である。

私のローカルPCでは、VoltaでNode.jsの管理を行っている。管理者権限でコマンドプロンプトを立ち上げ、以下コマンドでv20の最新版をインストールした。

volta install node@v20

バージョンをv20にしたのは、これくらいがちょうどいいのではないかという個人的な判断による。

ツールマネージャーVoltaについてはこちら

Node.jsのバージョン管理にVoltaを推したい

インストールが完了すると、あっさりしたメッセージが出る。

⠁ Fetching public registry: https://nodejs.org/dist/index.json

念のため、Node.jsとnpmのバージョンを確認。

node -v
v20.12.2

npm -v
10.5.0

Node.jsとnpm両方がバージョンアップされた。

再度Astroのアップグレード

再度リポジトリでnpx @astrojs/upgradeする。

astro   Integration upgrade in progress.

      ●  @astrojs/partytown will be updated to v2.1.0
      ●  @astrojs/rss will be updated to v4.0.5
      ●  @astrojs/tailwind will be updated to v5.1.0
      ▲  astro will be updated to  v4.7.1 

  wait   One package has breaking changes. Continue?
         ● Yes  ○ No

EnterキーでYesを選択。breaking changesって響きが怖いな。公式サイトにも「Astro v4.0は、破壊的な可能性のある変更や、以前に非推奨となっていた機能の削除を含んでいます。」とある。v3からv4へのメジャーアップグレードだから当然か。

 check   Be sure to follow the CHANGELOG.
         astro https://docs.astro.build/en/guides/upgrade-to/v4/

      ✔  Installed dependencies!

+—————+  Houston:
| ^ u ^  Have fun building!
+—————+

かわいい絵文字とともに、アップグレードが完了した。

ローカルでサイトを起動してみる。

$ npm run dev

> [email protected] dev
> astro dev

13:02:30 [vite] Re-optimizing dependencies because lockfile has changed

 astro  v4.7.1 ready in 5338 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

13:02:31 watching for file changes...

非推奨の機能は使っていなかったので修正する箇所はなく、無事バージョンを移行することができた。

アップグレードによる主な変更点

v4.5から新機能「Dev Audit UI」が追加された。ローカルでサイトを立ち上げると、ページ下部にバーが隠れて見えているので、クリックするとコードの問題部分を指摘してくれる。

具体的な内容は、バーの右から2番目の「Audit」ボタンをクリックすると見ることができる。

「Dev Audit UI」の「Audit」で具体的なエラーが見られる

遅延ライブラリ「Partytown」とシンタックスハイライター「Shiki」が吐き出しているコードでエラーが出ていた。エラーは出来るだけ潰したいが、インテグレーション由来のエラーではどうすることもできない。

追記

アップグレードする前に確認しておけというかんじだが、Cloudflare PagesのNode.jsはv20にも対応していた。ビルドエラーを起こしたらどうしようと思ったので、安心した。

Node.jsのバージョンが古いことで有名だったCloudflare Pagesだが、2023年4月頃に全バージョン対応になったそうだ。これからも対応してくれると思ってよいのだよね？？

Suzunatsu

このブログについて

コーディングやWeb関連技術の記事と、買い物など日々のメモから成り立っています。 →少しだけ詳しく

この記事がお役に立ちましたら、サポートをお願いします。

記事トップに戻る

広告