はじめに

Amplify Gen2 を使用して React + Vite のプロジェクトを開発する際、本番環境へのデプロイ時に amplify_outputs.json が見つからずエラーが発生しました。
本記事では、このエラーを解消する方法について解説します。

発生したエラー

npx ampx sandbox を使用したローカル環境での動作確認が完了したので、本番環境へデプロイしようとしたところ、
ビルドフェーズの npm run build にて、以下のエラーが発生しました。

Cannot find module '../amplify_outputs.json' or its corresponding type declarations.

エラーメッセージから、本番環境用の amplify_outputs.json が存在しないため、デプロイが失敗していると判断しました。

原因の考察

エラー内容より、本番環境のリソースがデプロイされていないことによって、amplify_outputs.jsonが出力されなかった。
その結果、amplify_outputs.jsonが出力されていないのでは、と考えました。
そのため、リソースを作成するデプロイコマンドを実行することによって、本事象を解決することができると考えました。

解決策

本番環境のリソースをデプロイし、amplify_outputs.json を生成するよう、
npx ampx pipeline-deploy --branch $BRANCH --app-id $APP_IDのデプロイコマンドを
npm run build の前に実行するよう amplify.yml を修正しました。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx pipeline-deploy --branch $BRANCH --app-id $APP_ID
    build:
      commands:
        - npm run build

結果

上記の設定を行ったことで、本番環境のリソースが正常に作成され、
かつamplify_outputs.jsonも生成され、正常にデプロイすることができました!

備考

$APP_IDについては、ブランチ間で同一の値でも問題ありませんが
Branch ごとにリソースは作成してほしいので、ブランチ毎に$BRANCHは変更するようにしましょう。