AWS S3 ve CloudFront'ta React SPA Barındırma
Bir React uygulaması oluşturun, S3'e yükleyin, CloudFront dağıtımını ve önbellek geçersiz kılmayı yapılandırın.
AWS S3 ve CloudFront'ta React SPA Barındırma, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
S3 Statik Barındırma Genel Bakışı
AWS S3, statik dosyaları (HTML, JS, CSS, görüntüler) bir web sitesi olarak sunabilir. CloudFront (CDN) ile birleştirildiğinde React SPA'leri için küresel dağıtım, HTTPS ve düşük gecikme elde edersiniz.
SPA'yı Derleme
React uygulamanızı statik bir çıktı dizinine derleyin.
# 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/S3 Depolama Alanı Oluşturma ve Yapılandırma
Bir S3 depolama alanı oluşturun, statik web sitesi barındırmayı etkinleştirin ve dizin ile hata belgelerini ayarlayın.
# 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)Derleme Dosyalarını Yükleme
Derleme çıktısını S3 ile eşitleyin. Özetlenmiş varlıklar için agresif önbellek üstbilgileri, index.html için ise önbelleksiz kullanım ayarlayın.
# 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"CloudFront Dağıtımı Oluşturma
S3 depolama alanını işaret eden bir CloudFront dağıtımı oluşturun. SPA yönlendirmesini desteklemek için REST uç noktası yerine S3 web sitesi uç noktasını kullanın.
# 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 routingSPA Yönlendirme Düzeltmesi
CloudFront bilinmeyen yollar için 403 döndürür (S3, React rotalarını bilmez). Özel bir hata yanıtı yapılandırın: 403 → durum 200 ile /index.html.
Özel Alan Adı ve SSL
Alan adınız için us-east-1 bölgesinde bir ACM sertifikası isteyin (CloudFront için gereklidir). Sertifikayı dağıtıma bağlayın ve CloudFront alan adını işaret eden bir CNAME DNS kaydı ekleyin.
Dağıtımda Önbelleği Geçersiz Kılma
Yeni dosyaları dağıttıktan sonra CloudFront önbelleğini index.html için geçersiz kılın (S3'te önbelleksiz olsa da CloudFront tarafından önbelleğe alınabilir).
aws cloudfront create-invalidation \
--distribution-id EXXXXXXXXXXXXX \
--paths "/*"GitHub Actions ile Dağıtım
Dağıtım iş akışını CI içinde otomatikleştirin: derleyin → S3 ile eşitleyin → CloudFront önbelleğini geçersiz kılın.
- 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 "/*"S3 Depolama Alanı İlkesi
Depolama alanında herkese açık erişimi engelleyin ve yalnızca CloudFront'un depolama alanını okuyabilmesi için bir Origin Access Control (OAC) ilkesi kullanın; bu, depolama alanını herkese açık barındırmaktan daha güvenlidir.
Maliyet Tahmini
S3 statik barındırma çok ucuzdur: depolama için yaklaşık 0,023 ABD doları/GB, istekler için yaklaşık 0,0004 ABD doları/1.000 istek. CloudFront maliyetleri bölgeye ve veri aktarımına göre değişir; ancak ücretsiz katmanda ilk 1 TB/ay ücretsizdir.
Kısa Kontrol
Bir React SPA barındırırken S3 hata belgesini neden index.html olarak ayarlamalısınız?
Özet
SPA'yı derleyin, bölünmüş önbellekleme kullanarak S3 ile eşitleyin (özetlenmiş varlıklar için uzun önbellek süresi, index.html için önbelleksiz kullanım) ve CloudFront üzerinden sunun. 403 hatalarını /index.html adresine eşleyerek SPA yönlendirmesini düzeltin. Dağıtımı GitHub Actions ile otomatikleştirin ve her dağıtımda CloudFront önbelleğini geçersiz kılın.
Sıkça Sorulan Sorular
“AWS S3 ve CloudFront'ta React SPA Barındırma” dersi ücretsiz mi?
Evet — “AWS S3 ve CloudFront'ta React SPA Barındırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“AWS S3 ve CloudFront'ta React SPA Barındırma” dersinde ne öğreneceğim?
Bir React uygulaması oluşturun, S3'e yükleyin, CloudFront dağıtımını ve önbellek geçersiz kılmayı yapılandırın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“AWS S3 ve CloudFront'ta React SPA Barındırma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Vercel'e Dağıtım: Sıfır Yapılandırma ve Önizleme URL'leri
- AWS S3 ve CloudFront'ta React SPA Barındırma
- React/Next.js Uygulamasını Docker'laştırma
- React için GitHub Actions CI/CD