Amplifyで発生したビルドエラーの原因と解決案（Jamstack＆Nuxt.js）

概要

Nuxt.jsでSSGしたものをAmplify上でhostingするJamstack構成
GitHubにPushされるとAmplify上でSSGされる流れ
Amplifyプロジェクトを新規に構築していく中で、3件連続ビルドエラーを経験したのでまとめる

前提

node.js：v14.17.0
amplify-cli：4.51.1
nuxt：2.15.6

結論

aws-exports.jsはフロントエンド側でimportが必要になるので、amplify.ymlでfrontendのビルド前にbackendのビルドでamplify pushを実行し、aws-exports.jsを生成する。（aws-exports.jsのgitignoreはデフォルトのままgit管理しない。他のブログとかを見ているとgitignoreから外してしまっている人もいるが複数人での開発を考慮すると含めないで解決した方が良い認識）
amplify-cliのバージョンがAmplifyビルドで動作しているものと、ローカルで使用しているものが一致しているか確認する。
Amplifyビルド用のロール作成が必要

エラーNo.1

背景

AmplifyとGitHub連携して、Nuxt.jsでSSGしたものをhostingするところまでは問題なかった
その後、amplify add authして、プロジェクトにaws-amplifyと@aws-amplify/ui-vueモジュールをインストールし、aws-amplifyを利用するための、pluginクラスを新規作成。pluginのクラスは下記。

import Vue from 'vue'
import Amplify from 'aws-amplify'
import '@aws-amplify/ui-vue'
import awsExports from '../aws-exports'
    
export default ({ isHMR }) => {
  if (isHMR) return
  if (process.client) {
    Amplify.configure(awsExports)
    Vue.use(Amplify)
  }
}

Amplify上のSSGするタイミングでエラーが発生

エラー内容

[fatal] Nuxt build error
ERROR in ./plugins/amplify.client.js
Module not found: Error: Can't resolve '../aws-exports' in 'plugins'

../aws-exports.jsが見つからないとのこと

原因

amplifyコマンドでプロジェクト構築すると、aws-exports.jsはgitignoreに含まれている
Amplify上のビルドフローは、ルートディレクトリにamplify.ymlを配置しておくとで設定可能
最初はhostingだけ試していたので、amplify.ymlを下記のようにしていた

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

解決策

amplify.ymlのfrontendのビルド処理の前に、backendでamplifyPush -simpleを差し込む
frontendの前にamplify pushが走り、これによりaws-exports.jsがAmplify上で作成され、その後のfrontendのソースからも参照が可能となる

version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

エラーNo.2

背景

エラーNo.1の解決策をGitHubにPushして再びAmplify上でビルドしたら別のエラーが発生

エラー内容

# Executing command: amplifyPush --simple
# Getting Amplify CLI Cloud-Formation stack info from environment cache
# Start initializing Amplify environment: main
# Initializing new Amplify environment: main (amplify init)
File project: data should NOT have additional properties: 'graphqltransformer'
JSONValidationError: File project: data should NOT have additional properties: 'graphqltransformer'

原因

以下のissueが参考になった
- https://github.com/aws-amplify/amplify-cli/issues/6117
- https://github.com/aws-amplify/amplify-console/issues/1340
amplify-cliのバージョンがローカルとAmplify上で違うため、ローカルで生成したファイルが正しく扱えないっぽい

解決策

ローカルでは、その時点の最新版4.51.1を使っていたので、Amplify上も以下のように合わせた。
初期段階はPackageには何も指定されていなかった。
latestを指定しているが、ローカルに明示的に合わせたほうが良いかもしれない。暫く経過観察予定。

f:id:yasug:20210521002243p:plain

f:id:yasug:20210521002333p:plain

エラーNo.3

背景

エラーNo.2の解決策を保存して、再びAmplify上でビルドしたら別のエラーが発生

エラー内容

Amplifyコンソール上で以下のエラーが発生

Your app does not have a role and you're attempting to interact with AWS resources
In order for you to interact with AWS resources you need to attach a role to your app. This can be done in the General Settings page in the console

f:id:yasug:20210521002837p:plain

原因

Amplifyビルドするのに必要なロールがあたっていないという感じ

解決案

https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/how-to-service-role-amplify-console.html
上記の公式ドキュメントに沿ってロール作成と割当をすれば解決

yasutomogのブログ

Software Engineerの雑記

Amplifyで発生したビルドエラーの原因と解決案（Jamstack＆Nuxt.js）

概要

前提

結論

エラーNo.1

背景

エラー内容

原因

解決策

エラーNo.2

背景

エラー内容

原因

解決策

エラーNo.3

背景

エラー内容

原因

解決案