Distribuzione di app ember-cli su S3 senza rompere gli URL

Question

Sto lavorando a un'app ember-cli che sto distribuendo in S3. Mi piacerebbe davvero poter usare questo approccio "senza server", dal momento che è estremamente semplice da configurare ed estremamente conveniente.

Ho un problema con gli URL. Se colpisco http://my-bucket.s3-website-us-east-1.amazonaws.com/ funziona perfettamente. Ma se provo a caricare direttamente una pagina diversa dalla radice dell'applicazione, come ad esempio http://my-bucket.s3-website-us-east-1.amazonaws.com/elephants/5, restituisce 403, in quanto non esiste alcuna risorsa in S3. (Posso passare a tali pagine sottili attraverso l'applicazione, e posso colpire direttamente in modalità dev sulla mia macchina, quindi l'applicazione brace sta lavorando bene.)

Alla ricerca di soluzioni, trovo suggestions aggiungere #! al mio sentiero. Questo sembra migliore, in quanto non restituisce un 403, ma quando ho colpito http://my-bucket.s3-website-us-east-1.amazonaws.com/#!/elephants/5, semplicemente reindirizza a http://my-bucket.s3-website-us-east-1.amazonaws.com, perdendo qualsiasi informazione specifica che il percorso conteneva.

Quali sono le mie opzioni? C'è un modo per usare S3 e avere URL funzionanti? Ho bisogno di un server? O c'è un altro approccio che mi è sfuggito?

Answer 1

OK, ero vicino. Risulta che il giusto approccio è stato:

http://my-bucket.s3-website-us-east-1.amazonaws.com/#/elephants/5

avevo provato vari approcci, ma nessuno di loro era stato proprio un # senza !, e circondato da /. lettura rilevante è la documentazione sul location

Vale la pena notare che sto usando:

App.Router.reopen({ 
    location: 'auto' 
}); 

Inoltre, sto utilizzando la seguente RoutingRules sotto Spazio Web

<RoutingRules> 
    <RoutingRule> 
     <Condition> 
      <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals> 
     </Condition> 
     <Redirect> 
      <HostName>my-bucket.s3-website-us-east-1.amazonaws.com</HostName> 
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith> 
     </Redirect> 
    </RoutingRule> 
</RoutingRules> 

Answer 2

Proprio Static crea la mappa del documento di errore su index.html & la tua localitàTipo deve essere impostato su automatico. http://i.stack.imgur.com/qbAov.png

Answer 3

Ci sono pochi problemi con l'approccio di avere solo un reindirizzamento # basato. Li ho elencati di seguito:

1. Mutliple reindirizza accadere come percorsi del vostro app sono risolti. Ad esempio: www.myapp.com/path/for/test viene reindirizzato come www.myapp.com/#/path/for/test
2. C'è uno sfarfallio nella barra degli indirizzi mentre "#" viene e va a scadenza l'azione della tua struttura SPA.
3. Il seo è influenzato perché - "Ehi! Il suo google sta forzando la sua mano sui reindirizzamenti
4. Il supporto Safari per la tua app è un gioco da ragazzi.

Un approccio mutato fuori dal approccio di distribuzione Lightening sostenuto con Ember-CLI-Deploy è la seguente:

1. Assicurarsi di avere il percorso dell'indice configurato per il tuo sito. Principalmente è index.html
2. Rimuovi le regole di instradamento dalle configurazioni S3
3. Metti un Cloudfront davanti al tuo secchio S3.
4. Configura le regole della pagina di errore per l'istanza di Cloudfront. Nelle regole di errore specificare:
   • Http codice di errore: 404 (e 403 o altri errori come per necessità)
   • errore caching TTL minimo (secondi): 0
   • personalizzazione delle risposte: Sì
   • Response Pagina percorso: /index.html
   • HTTP Response Code: 200

5.Per SEO esigenze + rendere sicuro il vostro index.h tml non memorizza nella cache, effettuare le seguenti operazioni:

• Configurare un'istanza EC2 e configurare un server nginx.
• Assegna un IP pubblico all'istanza EC2.
• Creare un ELB con l'istanza EC2 creata come istanza
• Dovresti essere in grado di assegnare l'ELB al tuo DNS.
• Ora, configura il tuo server nginx per fare quanto segue: Proxy_passare tutte le richieste al tuo CDN (solo per index.html, servire altre risorse direttamente dal tuo cloudfront) e per i motori di ricerca, reindirizzare il traffico come stabilito da servizi come Prerender. io

Posso aiutare in più dettagli rispetto all'impostazione di nginx, basta lasciare una nota. L'ho imparato nel modo più duro.

Dopo l'aggiornamento della distribuzione del front-cloud. Invalida la cache del cloudfront una volta in modalità pristine. Utilizza l'url nel browser e tutto dovrebbe essere buono.