Statische Site von Amazon S3 mit Angular JS konfigurieren ui.router html5Mode (true) auf Seitenaktualisierung

Question

Wie kann ich eine statische Web-Site von Amazon S3 konfigurieren, um Angular ui.router html5Mode-Routen ordnungsgemäß zu routen? Bei einer Seitenaktualisierung wird eine Datei angefordert, die nicht existiert, und angular kann sie nicht verarbeiten. In den Dokumenten wird empfohlen, die URL-Umschreibungen auf dem Server zu ändern.

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

ist jedoch S3 Speicher und bieten nicht die gleichen Umleitungsoptionen Ich habe versucht, die in Umleitungsregeln gebaut zu verwenden, wie

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

Doch diese gerade führt zu einer Umleitungsschleife.

Irgendwelche Vorschläge?

Answer 1

Grundsätzlich gibt es 3 Optionen, verwenden Sie eine EC2-Instanz, um die tatsächlichen Server-Umschreibungen auf die konfigurierten HTML5-Routen durchzuführen, oder, wie von dnozay vorgeschlagen, den Fallback-Modus zu verwenden und die Anforderungen neu zu schreiben. Hashbang. Schließlich könnten Sie einfach die Standard-Winkelrouten verwenden, mit denen ich die Option gewählt habe. Weniger Ärger, und wenn Angular 2.0 rollt, können Sie darauf aktualisieren.

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

Genügt hier nicht wirklich das Routing-Problem.

Answer 2

In der Frequently Asked Questions, schreiben sie fast alles um die index.html Seite zu dienen. Für HTML5 fallback mode müssen Sie #!/ (Hashbang) verwenden.

Sie könnten dies ändern:

<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith> 

mit

<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith> 

Weitere Details zu dieser Antwort: https://stackoverflow.com/a/16877231/1733117

Sie auch Ihre App konfigurieren müssen, dass Präfix für die Anwendung:

angular.module(...) 

... 

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

Answer 3

hier ist eine weitere Option mit nginx proxy_pass, sondern ermöglicht auch Sie mehrere Projekte in Unterordner und verwenden Subdomains

S3 Static Website Hosting Route All Paths to Index.html

Answer 4

Vergewissern Sie sich, den Index Route für Ihre Website konfiguriert haben. Meistens ist es index.html Entfernen Routing-Regeln von S3-Konfigurationen Setzen Sie eine Cloudfront vor Ihrem S3-Bucket. Konfigurieren Sie die Regeln für die Fehlerseite für Ihre Cloudfront-Instanz.

In den Fehlerregeln geben:

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