Реагировать на проблему маршрутов приложения при развертывании в AWS - PullRequest
Новая
       26

Реагировать на проблему маршрутов приложения при развертывании в AWS

0 голосов
/ 06 июня 2018

Я работаю над приложением React (с помощью приложения Create React) с React Router 4. Локально все работает нормально, но когда я развертываю его в AWS (помещаю его в корзину S3 и затем обслуживаю его через Cloudfront), он работает, но есть проблема с маршрутами.

Это проблемный вариант использования на AWS:

  • вместо root myapp.com, пользователь вводит другой маршрут,например myapp.com/login, а затем пытается перейти на сайт (не находясь на сайте в данный момент)
  • пользователь получает NoSuchKey login ошибка

Если я попробую то же самоелокально работает нормально.Кроме того, если я сначала захожу в root на AWS, а затем перехожу на любой другой маршрут, он также работает нормально.Таким образом, проблема - это только первый маршрут, который должен быть корневым на AWS для загрузки сайта.Я предполагаю, что что-то не так с моим приложением, но я не уверен, что.

Это часть моего кода для маршрутов из метода рендеринга верхнего компонента, который рендерится: 

return (
  <Router>
    <Fragment>
      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/forgot-password" component={ForgotPassword} />
      <Route path="/signup" component={SignUp} />
      <Route path="/help" component={Help} />
    </Fragment>
  </Router>
);

Есть идеи?

1 Ответ

0 голосов
/ 06 июня 2018

Ошибка NoSuchKey на самом деле является ошибкой S3, а не самого вашего приложения, поэтому я думаю, что происходит то, что пользователь перемещается по этому пути, а S3 пытается найти файл HTML по этому пути (/login) но не может - таким образом, ошибка.

Проблема, с которой, я полагаю, вы сталкиваетесь, заключается в том, что реагирующий маршрутизатор выполняет всю обработку и маршрутизацию на стороне клиента - на сервере нет физического ресурса (или, в вашем случае, S3), который имеет фактические маршруты.

Таким образом, начальная загрузка индекса и последующая навигация будут работать, потому что в этот момент ваш браузер загрузил JavaScript, который обрабатывает маршрутизацию на стороне клиента.Прямой переход к маршруту (что угодно, кроме индекса) заставит S3 попытаться найти этот физический файл и потерпит неудачу - если это имеет смысл.

Я считаю, что вам нужно изменить настройки в S3 на всегда загружайте ваш индексный файл - даже если есть ошибка.Вы можете сделать это, перейдя в Свойства вашего сегмента S3, перейдите на сайт Static Website Hosting и сделайте ваш файл index.html индексным документом и Документ об ошибке.

Таким образом, когда S3 встречаетNoSuchKey ошибка, это откат к вашему файлу index.html - в этот момент реагирующий маршрутизатор вступит во владение и выяснит, по какому маршруту должно быть приложение.

Марк Гарро имеет отличную статью здесь по теме, которая может вам помочь.

...