はじめに

今回は、AzureのStatic Web Appsにおいて、GitHub Actionsによるデプロイ時のNode.jsのバージョンを指定する方法について書いていきます。

とある依存ライブラリが、Node.jsがv18以上でないと動かないようになってましたが、これをGitHub Actionsでビルド＆デプロイしようとしたときに、v16が使われてしまい失敗するということが起きたので調査しました。

Azure Static Web Appsとは

Azure Static Web Appsとは、GitHubとの連携が強力なWebホスティングサービスです。

GitHub Actionsを利用して、プッシュしたら自動デプロイ、みたいなフローが簡単に構築できます。

また、Azure Functionsが組み込まれており、バックエンド処理を記述することも可能です。

エラーが起きたポイント

これは、GitHub Actionsのログ画面です。

以下のようなログで、動作中のNode.jsがv16であることが表示されています。

Using Node version:
v16.20.2

Using Yarn version:
1.22.15

さらにログを進めると、エラーで止まっていることがわかります。Node.jsをv18以上にせよ、というメッセージが出ています。

[2/4] Fetching packages...
error @azure/functions@4.3.0: The engine "node" is incompatible with this module. Expected version ">=18.0". Got "16.20.2"

というわけで、Node.jsのバージョンを指定する方法を調べてみます。

今回の構成

以下のようなディレクトリ構成を考えます。

│
├── Client/
│   ├── src
│   ├── index.html
│   ├── package.json
│   └── yarn.lock
│
└── Functions/
    ├── src
    ├── host.json
    ├── package.json
    └── yarn.lock

細かいファイルは省いていますが、Clientにはフロントエンドのコード、Functionsにはバックエンドのコードがあります。

フロントエンド

こちらはシンプルです。Client/package.jsonに、以下のような記述を追加します。

Client/package.json

{
  "engines": {
   "node": ">=18.0.0"
  }
}

バックエンド

こちらは少し複雑になります。まずは結論から言うと、Client/staticwebapp.config.jsonに以下のような記述を追加します。

Functionsフォルダ配下でない点に注意してください。

Client/staticwebapp.config.json

{
  "platform": {
    "apiRuntime": "node:18"
  }
}

ちなみに、functionsで使用できるNode.jsのバージョンは以下に載っています。

staticwebapp.config.jsonファイルの場所について

ドキュメントを見ると、staticwebapp.config.jsonの配置場所は、以下のようになっています。

GitHub Actionsのワークフローファイルで指定しているapp_locationか、そのサブディレクトリです。リポジトリのルートやFunctionsのディレクトリ、api_locationではないことに注意してください。

なのでこういうことになります。

│
├── Client/
│   ├── src
│   ├── index.html
│   ├── package.json
│   ├── yarn.lock
│   └── staticwebapp.config.json
│
└── Functions/
    ├── src
    ├── host.json
    ├── package.json
    └── yarn.lock

ほかにも、例えば以下のような構成の場合、app_locationは/となり、staticwebapp.config.jsonはリポジトリのルートに配置されることになります。

│
├── index.html
├── package.json
├── package-lock.json
├── staticwebapp.config.json
│
└── Functions/
    ├── src
    ├── host.json
    ├── package.json
    └── package-lock.json

同じように、Next.jsやNuxt.jsの場合でも、app_locationは/となることが多いと思いますので、staticwebapp.config.jsonはリポジトリのルートとなるでしょう。

ワークフローファイルの詳細は以下に載っています

エラー修正後

Using Node version:
v18.19.1

Using Yarn version:
1.22.15

無事にv18が指定され、エラーは解消されました。

おわりに

今回は、Azure Static Web AppsのデプロイでGitHub ActionsのNode.jsのバージョンを指定する方法について調べていきました。

staticwebapp.config.jsonの配置個所については、わからなくて少し戸惑いましたが、無事解決したので、他の方の助けにでもなれば幸いです。