Young Leaves

Azure Static Web Apps でNext.js をビルドする時のNode.js バージョンを指定する

今回はAzure Static Web Apps でNext.js のアプリケーションをビルドする際、Node.js のバージョンを特定のバージョンでビルドするよう設定する方法について説明します。

若葉 香月
18 December, 2022

実行環境

React

18.2.0

Next.js

13.0.7

デプロイのソース

GitHub

Azure Static Web Apps のCI/CD について

Azure Static Web Apps のビルド、デプロイ

Azure Static Web Apps はアプリケーション作成時に、ビルド、デプロイ用のGitHub Actions 用のyml ファイルまたはAzure Pipeline 用のyml ファイルが自動的に追加されます。GitHub を指定した際、指定したリポジトリにGitHub Actions 用の「azure-static-web-apps-XXXX-XXXXXX-XXXXXXXXX.yml」ファイルが追加されます。追加されるyml ファイルは以下内容となっております。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
      branches:
        - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
          id: builddeploy
          uses: Azure/static-web-apps-deploy@v1
          with:
            azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_DUNE_0F25AB700 }}
            repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
            action: "upload"
            ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
            # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
            app_location: "/" # App source code path
            api_location: "" # Api source code path - optional
            output_location: "" # Built app content directory - optional
            ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_DUNE_0F25AB700 }}
          action: "close"

今回は取り扱いませんがAzure DevOps を指定すると、Azure Repos のリポジトリに以下のazure-static-web-apps-XXXX-XXXXXX-XXXXXXXXX.yml を追加します。

name: Azure Static Web Apps CI/CD

pr:
  branches:
    include:
      - master
trigger:
  branches:
    include:
      - master

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: Azure-Static-Web-Apps-blue-beach-0e44ab100-variable-group
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_BEACH_0E44AB100)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######

GitHub Actions のDockerfile を見ると、ACR からコンテナイメージを取得、実行しデプロイなどを行っています。詳細の実行は以下GitHub ページを参照してください。

Azure Static Web Apps のビルド時のバージョン指定方法

Azure Static Web Apps でNode.js のバージョンを指定したい場合、package.json のengines を使用します。以下の例ではNode.js のバージョンを14.20.1 に指定します。

{
  [省略]
  "engines": {
    "node": "14.20.1"
  },
  "scripts": {
    [省略]
  },
  "dependencies": {
    [省略]
  }
}

Azure Static Web Apps で自動的に追加されるビルド用コンテナの場合Node.js のバージョンはLTS のみ使用できます。LTS 以外のバージョンをengines に指定するとビルド時にNode.js のバージョンでエラーとなります。

バージョン未指定時のNode.js のバージョン

package.json でengines を指定しない場合、Azure Static Web Apps で作成されたビルド・デプロイ用コンテナのNode.js が使用されます。2022/12/17 現在、Node.js 16.18.0 が使用されます。

Using Node version:
v16.18.0

Using Npm version:
8.19.2

特定のバージョンを指定したい場合

ビルド時に特定のメジャーバージョンを指定したい場合、package.json のengines でバージョンを指定します。以下の例ではNode.js のバージョンを「18.0.0」に指定します。

{
  "engines": {
    "node": "18.0.0"
  }
}

GitHub Actions で実行すると以下の結果となります。

Using Node version:
v18.0.0

Using Npm version:
8.6.0

package.json でバージョンを指定した場合、ビルド時のNode.js バージョンは指定されますが、Oryx ビルド時のNode.js はメジャーバージョンの最新バージョンが使用されるため、バージョンによってはデプロイ等で不都合が発生する可能性があります。

一定のバージョン以上を指定したい場合

ビルド時に一定のバージョン以上を指定したい場合、package.json のengines で「>=」を使用します。以下の例ではNode.js のバージョンを18 系以上に指定します。

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

GitHub Actions で実行すると以下の結果となります。18.0.0 以上を指定しているため、18 系の最新バージョンの18.12.1 でビルドします。

Using Node version:
v18.12.1

Using Npm version:
8.19.2

一定のバージョン以下を指定したい場合

ビルド時に一定のバージョン以下を指定したい場合、package.json のengines で「<=」を使用します。以下の例ではNode.js のバージョンを14.21.2 以下に指定します。

{
  "engines": {
    "node": "<= 14.21.2"
  }
}

GitHub Actions で実行すると以下の結果となります。14.21.2 以下を指定しているため、14 系の最新バージョンの14.21.2 でビルドします。

Using Node version:
v14.21.2

Using Npm version:
6.14.17

一定の範囲内のバージョンを指定したい場合

ビルド時に一定の範囲内のバージョンを指定したい場合、package.json のengines で「>=」と「<=」を使用します。以下の例ではNode.js のバージョンを14 系以上、16 系未満に指定します。

{
  "engines": {
    "node": ">= 14.0.0 < 16"
  }
}

GitHub Actions で実行すると以下の結果となります。16 系未満でLTS を選択するため14 系の最新バージョンを選択します。

sh;Using Node version
v14.21.2

Using Npm version:
6.14.17

まとめ

  • Azure Static Web Apps で自動追加されるGitHub Actions は専用のコンテナを使用してビルド・デプロイを行っている。
  • Azure Static Web Apps でNode.js のバージョンを指定するにはpackage.json でengines を追加する、
  • Azure Static Web Apps のビルド時のバージョンはLTS バージョンのみ使用している。

参考資料