Azure Static Web AppsのデプロイでGitHub ActionsのNode.jsのバージョンを指定する

# はじめに

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

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

## Azure Static Web Appsとは

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

https://learn.microsoft.com/ja-jp/azure/static-web-apps/overview

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

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

# エラーが起きたポイント

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/927adac1-6976-6a8b-41ba-31198a750144.png)

以下のようなログで、動作中の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に、以下のような記述を追加します。

```json:Client/package.json
{
  "engines": {
   "node": ">=18.0.0"
  }
}
```

https://learn.microsoft.com/ja-jp/azure/static-web-apps/languages-runtimes#front-end


# バックエンド

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

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

```json:Client/staticwebapp.config.json
{
  "platform": {
    "apiRuntime": "node:18"
  }
}
```

https://learn.microsoft.com/ja-jp/azure/static-web-apps/languages-runtimes#nodejs


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

https://learn.microsoft.com/ja-jp/azure/azure-functions/supported-languages?tabs=isolated-process%2Cv4&pivots=programming-language-javascript

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

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

https://learn.microsoft.com/ja-jp/azure/static-web-apps/configuration#file-location

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`はリポジトリのルートとなるでしょう。

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

https://learn.microsoft.com/ja-jp/azure/static-web-apps/build-configuration?tabs=github-actions

# エラー修正後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/a57f2cce-adbb-2f96-b179-e84845e2c0ce.png)

```
Using Node version:
v18.19.1

Using Yarn version:
1.22.15
```

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

# おわりに

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

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