Nuxt3でSSGを生成するとindexが404になる問題

備忘録として

環境

ホスティングサービス

• AWS Amplify(S3)

フォルダ構成

/src
  +--.nuxt
  +--.output
  +--...

現象

ローカル開発下では問題なかったのに、Amplifyにデプロイするとトップページのみ404が帰ってきて真っ白な画面が表示される現象があった。
どうもこの現象はglobalなmiddlewareを作成した時ときのみ発生する模様。

Amplifyのビルドコマンドは以下：

version: 1
backend:
  phases:
    build:
      commands:
        - echo "********* IGNORE BACKEND CHECK/PUSH **********"
frontend:
  phases:
    preBuild:
      commands:
        - cd src
        - npm ci
    build:
      commands:
        - echo ${env}
        - npm run generate:${env}
  artifacts:
    baseDirectory: src/dist/
    files:
      - '**/*'
  cache:
    paths: []

対応

ビルド設定のデプロイファイルパスをsrc/dist/からsrc/.output/public/に変更すると解決した

version: 1
backend:
  phases:
    build:
      commands:
        - echo "********* IGNORE BACKEND CHECK/PUSH **********"
frontend:
  phases:
    preBuild:
      commands:
        - cd src
        - npm ci
    build:
      commands:
        - echo ${env}
        - npm run generate:${env}
  artifacts:
    baseDirectory: src/.output/public/
    files:
      - '**/*'
  cache:
    paths: []

メモ

Amplifyでバックエンドを使用していない場合、ビルドコマンドに適当なechoを入れるとデプロイ速度が若干改善する

backend:
  phases:
    build:
      commands:
        - echo "********* IGNORE BACKEND CHECK/PUSH **********"

バックエンドを使わないのはAmplifyの良さを潰しているような気もしなくもない。