AWS Amplify で Node.js 20 を使ってビルドする [2023年12月情報] [2024年7月更新]

こんにちは、広野です。

いつの間にか Node.js 16 が EoL になってしまい、最新のサポートバージョンは 20 になっていました。AWS Amplify のビルド環境がどう追随しているかというと、今時点 18 が最新のようです。

Fix support for node 18 · Issue #3109 · aws-amplify/amplify-hosting

Before opening, please confirm: I have checked to see if my question is addressed in the FAQ. I have searched for duplic...

github.com

とは言え AWS Cloud9 (Amazon Linux 2023) にはデフォルトで Node.js 20 がインストールされていました。ですのでわざわざ EoL が見えている 18 を使用したくありません。今回、AWS Amplify でも試しにやってみたら Node.js 20 でビルドできたので、そのやり方を紹介します。公式ドキュメントもいずれ更新されると思います。

試したこと

Amazon Linux 2023 の AWS Cloud9 には Node.js 20 が入っていたので、そのままにします。

AWS マネジメントコンソールで AWS Amplify の画面を開いたら、以下のように「ビルドの設定」の中に「Build image settings」という項目が追加されていました。

これを、以下のようにビルド環境に Amazon Linux 2023 を、インストールするパッケージとして Node.js 20 を使用するように変更したところ、ビルドが通るようになりました。デフォルト設定のままでは、ビルドは失敗しました。

ビルドログを見ると、以下のように Node.js 20 を使用した形跡が残っていました。

2023-12-17T04:11:53.451Z [INFO]: # Node version 20 is available for installation
2023-12-17T04:11:53.557Z [INFO]: # Installing Node version 20
2023-12-17T04:13:38.677Z [INFO]: # Now using Node version 20

私は AWS Amplify を AWS CloudFormation でデプロイしているのですが、執筆時点ではこの設定をデプロイするためのテンプレート記述方法は見つけられませんでした。そのため、とりあえずマネジメントコンソールから手作業で変更しています。いずれ AWS CloudFormation でサポートされたらテンプレートに反映しようと思います。

カスタムビルドイメージとライブパッケージのアップデート - AWS Amplify ホスティング

カスタムビルドイメージを使用すると、カスタマイズされた Amplify アプリのビルド環境を提供できます。Amplifyのデフォルトのコンテナを使用して、ビルド中に特定の依存関係をインストールするのに長い時間がかかる場合は、独自の Dock...

docs.aws.amazon.com

• AWS マネジメントコンソールの環境変数画面

AWS CloudFormation テンプレートだと以下のように書きます。(抜粋)

  AmplifyConsole:
    Type: AWS::Amplify::App
    Properties:
      Name: test
      Repository: test
      Platform: WEB
      BuildSpec: |-
        version: 1
        frontend:
          phases:
            preBuild:
              commands:
                - npm ci
            build:
              commands:
                - npm run build
                - echo "VITE_REGION=$VITE_REGION" >> .env
          artifacts:
            baseDirectory: /dist
            files:
              - '**/*'
          cache:
            paths:
              - node_modules/**/*
      CustomRules:
        - Source: /<*>
          Status: 404-200
          Target: /index.html
        - Source: 
          Status: 200
          Target: /index.html
      EnvironmentVariables:
        - Name: VITE_REGION
          Value: !Ref AWS::Region
        - Name: _LIVE_UPDATES
          Value: !Sub '[{"name":"Node.js version","pkg":"node","type":"nvm","version":"v20.15.1"}]'

まとめ

いかがでしたでしょうか。

簡単な内容でしたが、なにげに今時点では有用と思いまして紹介いたしました。

本記事が皆様のお役に立てれば幸いです。