窓を作っては壊していた人のブログ

この謎のブログタイトルの由来を知るものはもういないだろう

既存の Azure Static Web Apps の Next.js hybrid mode アプリケーションのデプロイがバージョンアップによって失敗してしまったのを修正した

1年ほど前から Next.js v13 と Azure Static Web Apps を使って Hybrid rendering を行う Next.js アプリケーションをデプロイしていました。

v14 にアップデートしたタイミングでビルドに失敗するようになってしまいました。 直し方が Microsoft Learn にあったのでメモがてら載せておきます。

learn.microsoft.com

ビルドに使用する Node.js のバージョンの指定

私はデプロイに GitHub Actions の Azure/static-web-apps-deploy@v1 を使用しています。 デプロイの他にもビルドも行ってくれる Actions で、内部的にはビルドに Oryx が利用されているようです。

どうもこの Orxy、Node.js アプリケーションを渡すと、特に指定がないと Node.js v16 を使用してビルドを行うようで、この挙動が問題でした。

そのことが分かる GitHub Actions のログを以下に載せておきます。 v16 が使われていることがわかります。

Using Node version:
v16.20.2

Using Npm version:
8.19.4

Running 'npm install'...

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'next@14.1.4',
npm WARN EBADENGINE   required: { node: '>=18.17.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }

added 325 packages, and audited 326 packages in 11s

129 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

Running 'npm run build'...


> ******@0.1.0 build
> next build

You are using Node.js 16.20.2. For Next.js, Node.js version >= v18.17.0 is required.

であれば、Node.js のバージョンを上げることで対処できそうなことがわかります。 それではどの様に Node.js のバージョンを上げる、もしくは指定するのでしょうか?

それが前述した Learn に記載されていました。

Tutorial: Deploy hybrid Next.js websites on Azure Static Web Apps | Microsoft Learn

上記のドキュメント記載のように、package.json の engines フィールドに指定します。 これは、当該 package の動作するバージョンを明確にするために使用されるものですが、Oryx はこちらのフィールドを参照しているようです。

github.com

指定してみると、以下のようなログに変わりました。

Using Node version:
v18.17.1

Using Npm version:
9.6.7

Running 'npm install'...

これでビルド問題は解決しました。

終わりに

最新のドキュメントを読めば解決するという簡単な問題でした。 Microsoft のサービスを使う場合はだいたいのケースが Learn で解決するので、とりあえずハマったら見るようにしましょう…

また Azure Static Web Apps へのデプロイじゃなくて、Next.js 文脈でハマった箇所があったので、備忘録として以下にリンクを載せておきます。

lef237.hatenablog.com