статический веб-сайт, размещенный на s3: страницы возвращаются через 404 после обновления

Question

С этой политикой сегмента:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mypage.com/*"
        }
    ]
}

Я развертываю веб-сайт, созданный ResactJS v16 + (react-router-dom v5), и когда я открываю URL, он работает отлично, например, изmypage.com, который идет в / список работает нормально.URL-адрес загружается как mypage.com/list, и отображается содержимое страницы.

Однако на любой дочерней странице, которая не является домашней страницей, например mypage.com/list, после обновления страницы браузером она возвращаетS3's 404:

404 Not Found

    Code: NoSuchKey
    Message: The specified key does not exist.
    Key: list

Я даже не знаю, как отладить это ... есть идеи?

Answer 1

Как упомянул @Panther в комментарии, правильный путь - добавить резервную копию ошибки к index.html в конфигурации статического веб-хостинга корзины S3.

Причина этого заключается в том, что URL-адреспри ударе (либо ручным вводом в браузере, либо обновлением), он отправляет запрос / list на корневой сервер S3 (тот, которым управляет AWS), прежде чем попадет в наш сегмент.Этот сервер S3 понятия не имеет, является ли это приложениемactjs или нет, поэтому он идет в корзину, чтобы найти / list в корне моего контейнера, который не существует, поэтому он возвращает ошибку 404.

Однако, добавив откат ошибки, теперь, когда он получает 404, он перенаправляет запрос в index.html, где приложение реакции определено и загружено в.В этом случае / list будет проходить через нормальный поток для достижения правильного маршрутизатора, который обрабатывает рендеринг страницы, проблема решена.