概要

掲題の通りamplifyを使ってreactをデプロイしたが実際にアクセスすると404エラーになる。

エラーが再現する手順

gihubリポジトリを作成
作ったリポジトリをgit clone
cloneしたリポジトリ内で以下のコマンドを実行

npx create-react-app amplifyapp

git add .
git commit -m "コメント"
git push origin main
AWSコンソールからamplifyを開いてgithubからデプロイ

その際のamplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - cd amplifyapp
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

原因

baseDirectory: build となっておりamplifyapp/buildと階層構造で指定してなくてbuildしたリソースが使われてなかった。

修正後のamplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - cd amplifyapp
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: amplifyapp/build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

これでURLからreactアプリが見れるようになった。