не работает в aws s3 bucket

Я развернул build/ папку веб-сайта React в ведро AWS S3.

Если я иду в www.mywebsite.com, это работает, и если я нажимаю на a теге, чтобы перейти к Project и о страницах, это приводит меня к правой странице. Однако, если я копирую и отправляю URL-адрес страницы или перехожу прямо к ссылке, например: www.mywebsite.com/projects, она возвращает 404.

Вот мой код App.js:

const App = () => (
    <Router>
        <div>
            <NavBar/>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/projects" component={Projects}/>
                <Route exact path="/about" component={About}/>
                <Route component={NoMatch}/>
            </Switch>
        </div>
    </Router>
);

Ответ 1

Ответьте, чтобы закрыть вопрос. Я решил эту проблему благодаря вышеприведенному замечанию Алана Фридмана:

Вам нужно перенаправить ошибки (404 в этом случае) в корень index.html - 7 июля в 0:34

Ответ 2

Я не уверен, что вы уже решили это. Я была такая же проблема.

Это потому, что AWS S3 ищет ту папку (проекты) для обслуживания, которой у вас нет.

Просто укажите документ об ошибке на index.html.

Это сработало для меня. Вы можете обрабатывать страницы ошибок в реакции-маршрутизаторе.

Ответ 3

Почему так происходит

Ваша проблема в том, что вы хотите передать ответственность за маршрутизацию на свое реагирующее приложение /javascript. Ссылка будет работать, потому что реакция может прослушивать ссылку и просто обновлять маршрут в строке URL браузера. Однако, если вы отправитесь туда, где ваш скрипт (index.html и bundle.js или где бы вы ни находились) не загружен, JavaScript никогда не загружается и не имеет возможности обработать запрос. Вместо этого, независимо от того, на каком сервере ваш сервер позаботится об этом запросе, посмотрите, есть ли в этом месте ресурс, и возвратите ошибку 404 или что-то еще, что она обнаружила.

Решение

Как упоминалось в комментариях, именно по этой причине вам необходимо перенаправить 404-ошибки в точное место размещения вашего приложения. Это ничего особенного для Amazon, это общее требование, чтобы настроить ваше приложение для реагирования.

Чтобы решить эту проблему, вам нужно выяснить, что обрабатывает маршрутизацию на вашем сервере и как ее настроить. Например, если у вас есть сервер Apache, файл.htaccess может позаботиться об этом так:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Этот файл позволяет серверу перенаправлять не найденные ошибки в index.html. Имейте в виду, что это может повлиять на другие правила маршрутизации, которые находятся на вашем сервере, поэтому эта конфигурация проще всего, если ваше приложение для реагирования имеет свое место, не мешая другим вещам.

Ответ 4

Я столкнулся с этой проблемой, несмотря на использование конфигурации, как описано в принятом ответе, но если вы все еще получаете 403 ошибки, и вы используете AWS Cloudflare Manager, вы можете создать страницу ошибок на вкладке "Страницы ошибок" в настройках распространения. со следующей конфигурацией:

Error Code: 404,
Customize Error Response: Yes, 
Response Page Path: /index.html, 
HTTP Response Code: 200

Рис страницы конфигурации ошибки для передачи обработки маршрута на маршрутизатор браузера

Это сработало для меня, хотя я ни в коем случае не осведомлен о правильном администрировании сервера, надеюсь, кто-то скажет мне, если это серьезная проблема, если она была случайной.

Ответ 5

Случай использования Cloudfront для S3:

https://hackernoon.com/hosting-static-react-websites-on-aws-s3-cloudfront-with-ssl-924e5c134455

3b) AWS CloudFront - страницы ошибок После создания дистрибутива CloudFront, когда он находится в состоянии "В процессе", перейдите на вкладку "Страницы ошибок". Обработайте коды ответов 404 и 403 с помощью настройки ответа об ошибке.

Google рекомендует 1 неделю или 604800 секунд кэширования. Здесь мы настраиваем CloudFront для обработки пропущенных HTML-страниц, что обычно происходит, когда пользователь вводит неверный путь или, в частности, когда он обновляет путь, отличный от корневого пути.

Когда это произойдет:

CloudFront будет искать файл, которого нет в корзине S3; в корзине есть только 1 html файл, и это index.html для случая одностраничного приложения, такого как этот пример проекта. Будет возвращен ответ 404, и наша пользовательская настройка ответа на ошибку перехватит его. Вместо этого мы вернем код ответа 200 и страницу index.html. React router, который будет загружен вместе с файлом index.html, просмотрит URL и отобразит правильную страницу вместо корневого пути. Эта страница будет кэшироваться на время TTL для всех запросов к запрашиваемому пути. Почему мы должны обрабатывать 403, а? Это связано с тем, что этот код ответа вместо 404 возвращается Amazon S3 для активов, которых нет. Например, URL-адрес https://yourdomain.com/somewhere будет искать файл, называемый где-то (без расширения), который не существует.

PS. Раньше он возвращал 404, но, похоже, теперь возвращает 403; В любом случае лучше всего обрабатывать оба кода ответа).