Héberger une SPA React sur AWS S3 et CloudFront
Compilez une application React, téléversez-la vers S3, puis configurez la distribution CloudFront et l’invalidation du cache.
Héberger une SPA React sur AWS S3 et CloudFront est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Présentation de l’hébergement statique S3
AWS S3 peut servir des fichiers statiques (HTML, JS, CSS et images) comme un site web. Associé à CloudFront (CDN), il fournit une distribution mondiale, HTTPS et une faible latence pour les SPA React.
Compiler la SPA
Compilez votre application React dans un dossier de sortie statique.
# 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/Créer et configurer le compartiment S3
Créez un compartiment S3, activez l’hébergement de site web statique et définissez les documents d’index et d’erreur.
# 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)Téléverser les fichiers de compilation
Synchronisez le résultat de la compilation avec S3. Définissez des en-têtes de cache agressifs pour les ressources dont le nom contient une empreinte, et désactivez le cache pour 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"Créer une distribution CloudFront
Créez une distribution CloudFront pointant vers le compartiment S3. Utilisez le point de terminaison du site web S3 (et non le point de terminaison REST) pour prendre en charge le routage d’une 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 routingCorriger le routage de la SPA
CloudFront renvoie une erreur 403 pour les chemins inconnus (S3 ne connaît pas les routes React). Configurez une réponse d’erreur personnalisée : 403 → /index.html avec le statut 200.
Domaine personnalisé et SSL
Demandez un certificat ACM pour votre domaine dans us-east-1 (obligatoire pour CloudFront). Associez-le à la distribution et ajoutez un enregistrement DNS CNAME pointant vers le domaine CloudFront.
Invalider le cache lors d’un déploiement
Après avoir déployé de nouveaux fichiers, invalidez le cache CloudFront pour index.html (puisqu’il est exempt de cache sur S3, mais peut être mis en cache par CloudFront).
aws cloudfront create-invalidation \
--distribution-id EXXXXXXXXXXXXX \
--paths "/*"Déploiement avec GitHub Actions
Automatisez le processus de déploiement dans l’intégration continue : compiler → synchroniser avec S3 → invalider 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 "/*"Politique du compartiment S3
Bloquez l’accès public au compartiment et utilisez une politique de contrôle d’accès à l’origine (OAC) afin que seul CloudFront puisse lire le compartiment : cette solution est plus sûre que l’hébergement d’un compartiment public.
Estimation des coûts
L’hébergement statique S3 est très économique : environ 0,023 $ par Go de stockage et 0,0004 $ pour 1 000 requêtes. Les coûts de CloudFront varient selon la région et le transfert de données, mais le niveau gratuit offre 1 To par mois gratuitement.
Vérification rapide
Pourquoi devez-vous définir le document d’erreur S3 sur index.html lorsque vous hébergez une SPA React ?
Récapitulatif
Compilez la SPA, synchronisez-la avec S3 en séparant la mise en cache (cache long pour les ressources dont le nom contient une empreinte, absence de cache pour index.html), puis servez-la via CloudFront. Corrigez le routage de la SPA en associant les erreurs 403 à /index.html. Automatisez le déploiement avec GitHub Actions et invalidez CloudFront à chaque déploiement.
Apprends React avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 88
- Leçons
- 324
Questions Fréquemment Posées
La leçon « Héberger une SPA React sur AWS S3 et CloudFront » est-elle gratuite ?
Oui — le texte complet de « Héberger une SPA React sur AWS S3 et CloudFront » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Héberger une SPA React sur AWS S3 et CloudFront » ?
Compilez une application React, téléversez-la vers S3, puis configurez la distribution CloudFront et l’invalidation du cache. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Héberger une SPA React sur AWS S3 et CloudFront » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Déployer sur Vercel : configuration nulle et URL de prévisualisation
- Héberger une SPA React sur AWS S3 et CloudFront
- Conteneuriser une application React/Next.js
- CI/CD GitHub Actions pour React