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

Web関連情報・技術

当サイトにはプロモーション・広告が含まれています。

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

しかし、今ちょうど連休で時間もあるので、意を決して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のバージョンは、v18.17.1 または v20.3.0 またはそれ以上である。

ちなみに、Astroではv19系はサポートしていない（Install Astro with the Automatic CLI | Docs）

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

volta install node@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月頃に全バージョン対応になったそうだ。これからも対応してくれると思ってよいのだよね？？

☕コーヒーをおごる

Buy Me A Coffee

このブログについて

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

記事トップに戻る

広告