Come posso ottimizzare CloudFront per servire la mia applicazione a pagina singola?

Risoluzione

Nota: nella seguente risoluzione, l'esempio di server di origine è un bucket Amazon Simple Storage (Amazon S3).

Configura una comunicazione sicura tra i visualizzatori e CloudFront

Esegui queste azioni:

• Richiedi HTTPS per le comunicazioni tra i visualizzatori e CloudFront. Configura CloudFront per reindirizzare automaticamente le richieste HTTP a HTTPS o rifiutare le richieste HTTP.
• Per connessioni sicure con il nome di dominio, ottieni un certificato SSL/TLS da Gestione certificati AWS (ACM) o da una terza parte.
• Scegli una policy di sicurezza con cifrari e protocolli supportati dalle connessioni dei visualizzatori.

Limita l'accesso all'origine AWS

Se utilizzi Amazon S3 come origine AWS, limita l'accesso pubblico al bucket S3.

Nota: è consigliabile utilizzare l'impostazione OAC (Origin Access Control) per proteggere l'origine.

Per limitare l'accesso ad altre origini, consulta Limita l'accesso a un'origine AWS.

Risolvi i problemi con il routing lato client SPA

Si verifica un errore del codice di stato HTTP 403 o 404 quando segui una route diversa da index.html, ad esempio https://example.com/about-us, e aggiorni la pagina. I bucket S3 non hanno un percorso o un prefisso per /about-us.

Nota: quando la policy di bucket per OAC non include l'autorizzazione s3:ListBucket, Amazon S3 restituisce un errore 403.

Quando Amazon S3 restituisce un errore 403 o 404, CloudFront fornisce il file index.html che è una route valida per la SPA. Per risolvere questi problemi, configura una risposta di errore per entrambi gli errori (403 e 404).

Completa i seguenti passaggi:

1. Apri la console CloudFront.
2. Nel pannello di navigazione, scegli Distributions (Distribuzioni), quindi seleziona la distribuzione.
3. Scegli la scheda Error pages (Pagine di errore).
4. Scegli Create custom error response (Crea risposta di errore personalizzata).
5. Per il codice di errore HTTP, seleziona 403: Forbidden o 404: Not Found.
6. Per Error caching minimum TTL (TTL minimo caching errore), puoi inserire 0 o il valore che preferisci.
7. Per Customize error response (Personalizza risposta di errore), scegli Yes (Sì).
8. Per Response page path (Percorso della pagina di risposta), inserisci /index.html.
9. Per HTTP Response code (Codice di risposta HTTP), scegli 200: OK.
10. Scegli Create custom error response (Crea risposta di errore personalizzata).
11. Scegli la scheda General (Generale), quindi attendi il completamento della distribuzione.

Implementa strategie di caching

Per bilanciare l'aggiornamento dei contenuti e la velocità di consegna della SPA, intraprendi le seguenti azioni:

• Implementa una durata lunga della cache per le risorse immutabili, come i file JavaScript e CSS. Ad esempio, per memorizzare nella cache le risorse per 1 anno, utilizza un'intestazione Cache-Control nei metadati dell'oggetto S3 con il valore public, max-age = 31536000.
• Per il file index.html, utilizza un TTL (Time to Live) breve, ad esempio public, max-age = 60 per memorizzare i file nella cache per 60 secondi. Utilizza il TTL breve con stale-while-revalidate = 2592000 in modo che CloudFront possa fornire versioni scadute memorizzate nella cache per un massimo di 30 giorni durante la riconvalida in background.
• Utilizza una policy di cache di CloudFront appropriata che includa sia TTL brevi per i contenuti aggiornati di frequente sia TTL lunghi per le risorse statiche. Ad esempio, puoi utilizzare la policy Managed-CachingOptimized.

Per ulteriori informazioni, consulta Host Single Page Applications (SPA) with Tiered TTLs on CloudFront and S3 (Come ospitare applicazioni a pagina singola (SPA) con TTL a più livelli in CloudFront e S3).

Scegli una categoria di prezzo di CloudFront appropriata

Per ridurre i costi di distribuzione dei contenuti, seleziona una categoria di prezzo in linea con la posizione degli utenti. Per stabilire dove si trova la maggior parte degli utenti, consulta il report sull'utilizzo di CloudFront. Se gli utenti risiedono principalmente in una Regione AWS, scegli la categoria di prezzo 200 o 100. Tuttavia, se le prestazioni sono importanti, mantieni la categoria di prezzo predefinita "Tutti" per distribuire i contenuti a un pubblico globale. Per informazioni sulle Regioni servite da ogni categoria di prezzo, consulta Categoria di prezzo.

Informazioni correlate

Implementa un'applicazione a pagina singola basata su React su Amazon S3 e CloudFront