Hosting React SPA w AWS S3 i CloudFront
Budowanie aplikacji React, przesyłanie jej do S3 oraz konfigurowanie dystrybucji CloudFront i unieważniania cache.
Hosting React SPA w AWS S3 i CloudFront to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Wprowadzenie do hostingu statycznego S3
AWS S3 może udostępniać pliki statyczne (HTML, JS, CSS i obrazy) jako witrynę internetową. W połączeniu z CloudFront (CDN) zapewnia globalną dystrybucję, HTTPS i niskie opóźnienia dla aplikacji React SPA.
Budowanie aplikacji SPA
Zbuduj aplikację React do statycznego folderu wynikowego.
# 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/Tworzenie i konfigurowanie zasobnika S3
Utwórz zasobnik S3, włącz hosting statycznej witryny i ustaw dokument indeksu oraz dokument błędu.
# 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)Przesyłanie plików wynikowych
Zsynchronizuj wynik kompilacji z S3. Ustaw długie nagłówki cache dla zasobów z hashem i no-cache dla pliku 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"Tworzenie dystrybucji CloudFront
Utwórz dystrybucję CloudFront wskazującą na zasobnik S3. Użyj endpointu witryny S3 (a nie endpointu REST), aby obsługiwać routing 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 routingNaprawa routingu SPA
CloudFront zwraca 403 dla nieznanych ścieżek (S3 nie zna tras Reacta). Skonfiguruj niestandardową odpowiedź na błąd: 403 → /index.html ze statusem 200.
Własna domena i SSL
Poproś o certyfikat ACM dla swojej domeny w regionie us-east-1 (wymaganym przez CloudFront). Dołącz go do dystrybucji i dodaj rekord DNS CNAME wskazujący na domenę CloudFront.
Unieważnianie cache po wdrożeniu
Po wdrożeniu nowych plików unieważnij cache CloudFront dla pliku index.html (ponieważ w S3 ma ustawienie no-cache, ale CloudFront może go buforować).
aws cloudfront create-invalidation \
--distribution-id EXXXXXXXXXXXXX \
--paths "/*"Wdrażanie za pomocą GitHub Actions
Zautomatyzuj proces wdrażania w CI: kompilacja → synchronizacja z S3 → unieważnienie 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 "/*"Zasady zasobnika S3
Zablokuj publiczny dostęp do zasobnika i użyj zasady Origin Access Control (OAC), aby tylko CloudFront mógł odczytywać zasobnik — jest to bezpieczniejsze niż publiczny hosting zasobnika.
Szacowanie kosztów
Hosting statyczny S3 jest bardzo tani: około 0,023 USD/GB za przechowywanie i około 0,0004 USD/1000 żądań. Koszt CloudFront zależy od regionu i transferu danych, ale w ramach bezpłatnego poziomu pierwsze 1 TB miesięcznie jest bezpłatne.
Szybkie sprawdzenie
Dlaczego podczas hostowania aplikacji React SPA należy ustawić dokument błędu S3 na index.html?
Podsumowanie
Zbuduj aplikację SPA, zsynchronizuj ją z S3 z rozdzielnym buforowaniem (długi czas cache dla zasobów z hashem, no-cache dla pliku index.html) i udostępniaj za pomocą CloudFront. Napraw routing SPA, mapując błędy 403 na /index.html. Zautomatyzuj wdrażanie za pomocą GitHub Actions i unieważniaj cache CloudFront przy każdym wdrożeniu.
Często zadawane pytania
Czy lekcja „Hosting React SPA w AWS S3 i CloudFront” jest bezpłatna?
Tak — pełny tekst „Hosting React SPA w AWS S3 i CloudFront” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Hosting React SPA w AWS S3 i CloudFront”?
Budowanie aplikacji React, przesyłanie jej do S3 oraz konfigurowanie dystrybucji CloudFront i unieważniania cache. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Hosting React SPA w AWS S3 i CloudFront”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Wdrażanie na Vercel: zero konfiguracji i adresy podglądu
- Hosting React SPA w AWS S3 i CloudFront
- Konteneryzacja aplikacji React/Next.js
- CI/CD React z GitHub Actions