EC2 で amplify publish したらビルドエラーになったので解決してみた

ちょっとした検証のために、EC2 で amplify publish コマンドを実行したら、以下のエラーが発生したので、解決方法を紹介します。

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

結論

メモリ不足が原因のようなので、インスタンスタイプをメモリ最適化インスタンスに変更することで解決しました。

環境

・OS: Windows Server 2019
・インスタンスタイプ: t2.nano

使用したツールなど

EC2 内に、以下のツールをインストールしました。
インストール方法は各公式ドキュメントをご覧ください。
・Google Chrome
・Node.js
・Vue CLI
・AWS CLI
・Amplify CLI

前提

AWS CLI および、Amplify CLI で使用する IAM ユーザー認証情報は、事前に作成済みです。
権限は、AdministratorAccess を付与しています。

再現手順

1. Vue プロジェクトを作成

vue create <project name> で Vue プロジェクトを作成しました。
今回は、hello-world というプロジェクト名にしました。
その他の設定はデフォルトのままです。

vue create hello-world

2. Amplify プロジェクトを作成

1 で作成した Vue プロジェクトのフォルダに移動し、amplify init コマンドで Amplify プロジェクトを作成しました。

amplify init

基本的な設定はすべてデフォルトのままです。
使用する AWS プロファイルは、作成済みの AdministratorAccess のプロファイルを選択しました。

3. Amplify でホスティングを設定

2 で作成した Amplify プロジェクト内で、amplify add hosting コマンドを実行し、ホスティングの設定を行いました。

amplify add hosting

こちらも、すべてデフォルト設定のままです。

4. amplify publish を実行

最後に、amplify publish コマンドを実行しました。

amplify publish

ビルドエラー発生

Vue プロジェクトをビルドする段階で、以下のエラーが発生しました。

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

heap out of memory なので、メモリ領域が不足している旨のエラーのようです。
調べてみると、node --max-old-space-size=3000 <file name> というコマンドで、メモリの最大値設定を変更すればうまくいくという記事もありましたが、今回の環境では上記コマンドを実行しても、エラーは解消されませんでした。

解決方法

解決方法として、EC2 のメモリを増やす方法があります。
なので、今回はインスタンスタイプを t2.nano から、メモリ最適化の r5.large に変更しました。
※今回は検証で一時的に作成するだけなので、大きな課金はありませんが、長時間使用する場合は、t2.nano と r5.large では課金額が変わるので、注意して下さい。

r5.large で amplify publish を実行してみる

インスタンスを停止してから、インスタンスタイプを変更します。
変更後、再度インスタンスを起動し、amplify publish コマンドを実行したところ、今度はビルドに成功し、amplify publich コマンドも成功しました。

補足

AWS 公式の、Amplify のハンズオン の中でも、Cloud9 のインスタンスタイプを少し大きめに設定することで、エラーを回避するよう説明されています。

まとめ

今回は、EC2 で amplify publish したらビルドエラーになったので、解決方法を紹介しました。
ローカルの PC では発生しませんでしたが、小さいサイズのインスタンスを選択すると発生する可能性があります。
EC2 で Amplify を使用して、同様のエラーになった際に、参考にして頂ければ幸いです。