0Pricing
React Academy · Lezione

Hosting di una SPA React su AWS S3 e CloudFront

Crei un'app React, la carichi su S3 e configuri la distribuzione CloudFront e l'invalidazione della cache.

Hosting di una SPA React su AWS S3 e CloudFront è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Panoramica dell'hosting statico su S3

AWS S3 può fornire file statici (HTML, JS, CSS e immagini) come sito web. In combinazione con CloudFront (CDN), offre distribuzione globale, HTTPS e bassa latenza per le SPA React.

Build della SPA

Compili l'app React in una directory di output statico.

# Vite:
npm run build  # outputs to dist/

# Create React App:
npm run build  # outputs to build/

# Next.js static export:
next build && next export  # outputs to out/

Creazione e configurazione del bucket S3

Crei un bucket S3, abiliti l'hosting di siti web statici e imposti i documenti index ed error.

# Create bucket (replace with your domain name):
aws s3 mb s3://my-react-app.com

# Enable static hosting:
aws s3 website s3://my-react-app.com --index-document index.html --error-document index.html
# Error doc = index.html handles client-side routing (React Router)

Caricamento dei file di build

Sincronizzi l'output della build con S3. Imposti header di cache aggressivi per gli asset con hash e no-cache per index.html.

# Upload hashed assets with long cache:
aws s3 sync dist/ s3://my-react-app.com/ \
  --exclude index.html \
  --cache-control "max-age=31536000,immutable"

# Upload index.html with no cache (always fresh):
aws s3 cp dist/index.html s3://my-react-app.com/index.html \
  --cache-control "no-cache,no-store"

Creazione di una distribuzione CloudFront

Crei una distribuzione CloudFront che punti al bucket S3. Utilizzi l'endpoint del sito web S3 (non l'endpoint REST) per supportare il routing delle SPA.

# In AWS console or CDK:
# Origin: my-react-app.com.s3-website-us-east-1.amazonaws.com
# Default root object: index.html
# Viewer protocol: Redirect HTTP to HTTPS
# Error pages: 403 → /index.html (200) for SPA routing

Correzione del routing della SPA

CloudFront restituisce 403 per i percorsi sconosciuti (S3 non conosce le route React). Configuri una risposta di errore personalizzata: 403 → /index.html con stato 200.

Dominio personalizzato e SSL

Richieda un certificato ACM per il dominio in us-east-1 (obbligatorio per CloudFront). Lo colleghi alla distribuzione e aggiunga un record DNS CNAME che punti al dominio CloudFront.

Invalidamento della cache al deployment

Dopo aver distribuito i nuovi file, invalidi la cache CloudFront per index.html (poiché su S3 è no-cache, ma potrebbe essere memorizzato nella cache da CloudFront).

aws cloudfront create-invalidation \
  --distribution-id EXXXXXXXXXXXXX \
  --paths "/*"

Deployment con GitHub Actions

Automatizzi il flusso di deployment nella CI: build → sincronizzazione con S3 → invalidamento della cache CloudFront.

- name: Deploy to S3
  run: aws s3 sync dist/ s3://my-react-app.com/ --delete
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET }}

- name: Invalidate CloudFront
  run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

Policy del bucket S3

Blocchi l'accesso pubblico al bucket e utilizzi una policy Origin Access Control (OAC), in modo che solo CloudFront possa leggere il bucket: è più sicuro rispetto all'hosting con bucket pubblico.

Stima dei costi

L'hosting statico su S3 è molto economico: circa 0,023 USD/GB di archiviazione e circa 0,0004 USD/1.000 richieste. I costi di CloudFront variano in base alla regione e al trasferimento dei dati, ma il piano gratuito offre 1 TB/mese gratuitamente.

Verifica rapida

Perché il documento di errore S3 dovrebbe essere impostato su index.html quando ospita una SPA React?

Riepilogo

Compili la SPA, la sincronizzi con S3 usando una cache differenziata (cache lunga per gli asset con hash, no-cache per index.html) e la distribuisca tramite CloudFront. Risolva il routing della SPA mappando gli errori 403 su /index.html. Automatizzi il deployment con GitHub Actions e invalidi la cache CloudFront a ogni deployment.

Domande Frequenti

La lezione «Hosting di una SPA React su AWS S3 e CloudFront» è gratuita?

Sì — il testo completo di «Hosting di una SPA React su AWS S3 e CloudFront» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Hosting di una SPA React su AWS S3 e CloudFront»?

Crei un'app React, la carichi su S3 e configuri la distribuzione CloudFront e l'invalidazione della cache. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Hosting di una SPA React su AWS S3 e CloudFront»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Deployment su Vercel: zero configurazione e URL di anteprima
  2. Hosting di una SPA React su AWS S3 e CloudFront
  3. Dockerizzazione di un'app React/Next.js
  4. CI/CD di React con GitHub Actions
← Torna a React Academy