← Bloga dön
·6 dk okuma·

Bir frontend geliştirici için «AWS bilgisi» gerçekte ne demek

Birçok frontend ilanı AWS’i ana gereksinim yazar. Gerçekten beklenen servis ve yapılandırmaları sadeleştirelim: S3, CloudFront, Lambda, Cognito, SDK.

AWSCloud hostingServerlessDevOps

Frontend ilanlarında «AWS deneyimi» veya «AWS bağlantı ve yapılandırma» görmek korkutabilir. İnsanlar karmaşık VPC, Kubernetes veya düşük seviye altyapı bilen sertifikalı DevOps olmaları gerektiğini sanır.

Gerçekte çoğu ürün şirketi ve startup’ta frontend için AWS bilgisi kendi kendine yeterlilik ve tasarım ile son deploy arasındaki boşluğu kapatmaktır. Hosting, kimlik, depolama ve serverless araçlarının belirli bir alt kümesi. Hangi servisleri bilmeniz ve nasıl kullanıldığını parçalayalım.

1. Frontend hosting ve içerik dağıtımı (S3, CloudFront, Route 53)

En yaygın kullanım. React, Vue veya Angular ile kurulan modern SPA’ler HTML, JS ve CSS statik paketleridir. Ağır sunucu kiralamak yerine Amazon S3 bucket’larında barınır.

Ham S3 production hosting için optimize değildir: hızlı küresel cache ve kutudan SSL (HTTPS) yoktur. Amazon CloudFront (CDN) buradadır. Statik varlıkları edge’de cache’ler, dünyada hızlı yükleme ve SSL sertifikası verir. Route 53 özel domain’i CloudFront dağıtımına bağlar.

Frontend olarak erişim kontrolünü (OAI/OAC) - yalnızca CloudFront S3’ü okusun -, yönlendirmeyi (SPA router için dosya olmayan istekleri index.html’e) ve deploy’da cache invalidation’ı anlamanız beklenir.

2. Modern full-stack platformlar: AWS Amplify ve SST

S3 ve CloudFront’u elle kurmak fazla düşük seviyeyse AWS Amplify sunar. Amazon’un Vercel veya Netlify yanıtı. Git reposuna bağlanır, framework’ü (Next.js, Vite, Nuxt) otomatik tanır, küresel deploy eder.

Frontend sıkça Amplify ile hosting, SSR ve CI/CD yönetir. SST (Serverless Stack) de Next.js veya Remix’i IaC ile AWS’e deploy etmek ve backend servislerini doğrudan TypeScript’te yönetmek için popülerleşiyor.

3. Güvenli dosya yükleme: S3 pre-signed URL’ler

Kullanıcı avatar, belge veya medya yüklerken büyük dosyayı ana backend’den geçirmek verimsizdir. Sunucu yükü ve bellek şişer.

Endüstri standardı dosyayı tarayıcıdan doğrudan Amazon S3’e yüklemektir. Bucket güvenli kalsın diye frontend backend’den geçici, kimlikli bir URL (pre-signed URL) ister ve S3’e doğrudan PUT atar. S3’te CORS, JavaScript’te doğrudan yükleme ve ilerleme takibi AWS’te kritik frontend becerisidir.

4. Kullanıcı kimliği ve API entegrasyonu (Cognito ve AppSync)

Birçok kurum kayıt, login, MFA ve oturum token’ı için Amazon Cognito kullanır. Özel auth yazmak yerine frontend Amplify Auth veya NextAuth ile Cognito’ya bağlanır.

AWS AppSync (managed GraphQL) ve API Gateway (REST) backend mikroservislerini istemciye açar. Frontend Apollo, Urql veya REST kütüphanelerini bağlar, IAM header enjekte eder veya Cognito JWT ile isteği yetkilendirir.

5. Serverless fonksiyonlar ve sorun giderme (Lambda ve CloudWatch)

Next.js gibi modern meta-framework’lerde her API route veya server component (SSR) perde arkasında serverless AWS Lambda fonksiyonuna derlenir.

AWS Lambda’nın nasıl çalıştığını ve yürütme loglarının CloudWatch’te nerede olduğunu bilmek çok işe yarar. Production’da 500 Internal Server Error olursa frontend AWS Console’a girip düşen Lambda’nın CloudWatch logunu bulmalı ve stack trace’e bakmalıdır.

Özet

Frontend ilanında «AWS yapılandırma ve bağlantı» görünce paniklemeyin. Sanal özel ağ veya load balancer kurmanız gerekmez. S3 + CloudFront ile statik hosting, doğrudan dosya yükleme, auth için Cognito ve CloudWatch log okumaya odaklanın.

Bu servislere aşina olmak istemci kodu ile cloud altyapısı arasındaki boşluğu kapatır; sizi bugünün pazarında özerk ve rekabetçi kılar.

Projenizi konuşalım mı?

React ve Next.js konusunda uzman kıdemli bir web geliştiriciyim - dünya çapında freelance projelere açığım.