🦆

【AWS】amplifyでreactアプリをデプロイしたが404エラー

2024/06/26に公開

概要

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

エラーが再現する手順

  1. gihubリポジトリを作成
  2. 作ったリポジトリをgit clone
  3. cloneしたリポジトリ内で以下のコマンドを実行
npx create-react-app amplifyapp
  1. git add .
  2. git commit -m "コメント"
  3. git push origin main
  4. 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アプリが見れるようになった。

GitHubで編集を提案

Discussion