Skonfiguruj witrynę statyczną Amazon S3 za pomocą Angular JS ui.router html5Mode (true) na stronie refresh

Question

Jak skonfigurować statyczną stronę Amazon S3, aby właściwie trasować trasy Angular ui.router html5Mode? Po odświeżeniu strony będzie żądanie dla pliku, który nie istnieje, a kątowy nie może go obsłużyć. W dokumentach zalecają zmianę przepisanych adresów URL na serwerze.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

Jednak S3 jest przechowywanie i nie oferują te same opcje przekierowania staram się korzystać z wbudowanych reguł przekierowania takich jak

<RoutingRules> 
    <RoutingRule> 
     <Condition> 
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals > 
     </Condition> 
     <Redirect> 
      <HostName>[[ your application's domain name ]]</HostName> 
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith> 
     </Redirect> 
    </RoutingRule> 
</RoutingRules> 

Jednak to tylko potencjalnych klientów do pętli przekierowania.

Wszelkie sugestie?

Answer 1

Zasadniczo istnieją 3 opcje, użyj instancji EC2, aby dokonać rzeczywistego przepisania serwera na skonfigurowane trasy HTML5 lub, jak sugeruje dnozay, użyj trybu awaryjnego i ponownie zapisz żądania, aby użyć znaku #! hashbang. Na koniec możesz użyć standardowych tras kątowych, z którymi wybrałam opcję. Mniej kłopotów, a gdy Angular 2.0 się rozejdzie, możesz go zaktualizować.

https://stackoverflow.com/a/16877231/1733117

naprawdę nie ma rozwiązania problemu routingu tutaj.

Answer 2

W wersji Frequently Asked Questions przepisują prawie wszystko, aby wyświetlić stronę index.html. Dla HTML5 fallback mode należy użyć #!/ (hashbang).

Można to zmienić:

<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith> 

z

<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith> 

Więcej szczegółów na temat tej odpowiedzi: https://stackoverflow.com/a/16877231/1733117

Być może trzeba skonfigurować aplikację do korzystania ten prefiks:

angular.module(...) 

... 

.config(function($locationProvider) { 
    $locationProvider.html5Mode(true).hashPrefix('!'); 
}) 

Answer 3

tutaj jest inna możliwość korzystania nginx proxy_pass, ale również pozwala mieć wiele projektów w podfolderów i użyć subdomen

S3 Static Website Hosting Route All Paths to Index.html

Answer 4

Upewnij się, że trasę indeksu skonfigurowany na swojej stronie internetowej. Głównie jest to index.html Usuń reguły routingu z konfiguracji S3 Umieść Cloudfront przed swoim kubełkiem S3. Skonfiguruj reguły strony błędów dla swojej instancji Cloudfront.

W przepisach o błędach podać:

Http error code: 404 (and 403 or other errors as per need) 
Error Caching Minimum TTL (seconds) : 0 
Customize response: Yes 
Response Page Path : /index.html 
HTTP Response Code: 200