Tüm Yazılar
2024-06-20

AWS CloudFront Hosting Toolkit: Statik Siteler İçin Yeni Çözüm

AWSCloudFrontHostingDevOpsS3
A

AWS, frontend uygulamalarını barındırmak için birçok yol sunar. En uygun maliyetli ve ölçeklenebilir yöntemlerden biri, statik sayfanızı S3 ve CloudFront üzerinde barındırmaktır.

Haziran 2024'te AWS, bu işlemi daha da kolaylaştırmak için yeni bir araç kiti yayınladı: CloudFront Hosting Toolkit.

Bu yazıda, bu aracın ne olduğunu, nasıl çalıştığını ve React gibi modern framework'lerle nasıl kullanıldığını inceleyeceğiz.

CloudFront Hosting Toolkit Nedir?

Bu toolkit, gerekli bulut altyapısını sizin için kuran bir komut satırı arayüzüdür (CLI). Ayrıca bir CI/CD pipeline'ı oluşturur ve GitHub deponuza bağlanır.

Genellikle frontend uygulamanızı AWS'e dağıtmak istediğinizde karşınıza çıkan ilk seçenek AWS Amplify olur. Amplify, başlangıç için harika bir araçtır çünkü altyapıyı soyutlar. Ancak, projeniz büyüdükçe veya özelleştirme ihtiyaçlarınız arttıkça bu soyutlama kısıtlayıcı olabilir.

CloudFront Hosting Toolkit'in çıkış amacı tam olarak budur: Geliştiricilere altyapının kontrolünü verirken, dağıtım süreçlerini otomatize etmek.

Toolkit şunları hedefler:

  • Statik sayfaları ve tek sayfalı uygulamaları (SPA) AWS üzerinde barındırmak.
  • Git-push ile kolay dağıtım modeli sunmak (Vercel veya Netlify benzeri).
  • Tam kontrol için altyapıya erişim sağlamak.

Adım Adım Frontend Barındırma

Hadi gelin bir frontend uygulamasını AWS üzerinde barındıralım.

Ön Gereksinimler

  • AWS Hesabı ve CLI yapılandırması.
  • GitHub hesabı.
  • Node.js yüklü bir ortam.

Kurulum

Toolkit'i başlatmak için terminalinizde şu komutu çalıştırın:

npx @aws/cloudfront-hosting-toolkit init

Bu komut, projenizi tarayacak ve uygun yapılandırmayı önerecektir.

Oluşturulan Altyapı

Toolkit, arka planda şu bileşenleri oluşturur:

1. S3 ve CloudFront

Statik dosyalarınız (HTML, CSS, JS) bir S3 bucket'ında saklanır ve CloudFront (CDN) aracılığıyla tüm dünyaya hızlı bir şekilde dağıtılır.

2. Key/Value (KV) Store

CloudFront Hosting Toolkit, atomik dağıtımlar (atomic deployments) yapabilmek için CloudFront'un KeyValueStore özelliğini kullanır. Her dağıtım benzersiz bir ID alır (örneğin Git commit hash'i). KV store, hangi versiyonun canlıda olduğunu tutar.

KV Store Screenshot

Bu sayede, kullanıcılarınız her zaman uygulamanın en son ve tutarlı versiyonunu görür. Önbellek sorunları (caching issues) minimuma iner.

3. Step Function

Dağıtım sürecini yönetmek için bir AWS Step Function oluşturulur. Bu fonksiyon:

  1. Yeni versiyonu KV store'a kaydeder.
  2. Eski dağıtımları S3'ten temizler (isteğe bağlı).

4. CI/CD Pipeline

GitHub deponuzdaki her değişiklikte tetiklenen bir pipeline kurulur:

  • Source: GitHub'dan kodu çeker.
  • Build: Uygulamayı derler ve S3'e yükler.
  • ChangeUri: Step Function'ı tetikleyerek canlı versiyonu günceller.

Özet ve Düşünceler

CloudFront Hosting Toolkit, bizim için bir "L3 CDK Construct" gibidir. Sizin yerinize mantıklı varsayılanlarla bir altyapı kurar ama Amplify'ın aksine bu altyapıyı tamamen özelleştirmenize izin verir.

Artıları:

  • CDK ile entegre edilebilir.
  • Altyapı üzerinde tam kontrol.
  • Vercel benzeri kolay dağıtım deneyimi.

Eksileri:

  • Hala yeni olduğu için bazı pürüzler var (örneğin next export desteği ile ilgili dokümantasyon eksiklikleri).
  • GitHub uygulama izinlerinde bazen manuel müdahale gerekebiliyor.

Eğer Amplify'ın sınırlarına takıldıysanız ancak kendi CloudFront + S3 + Pipeline kurgunuzu sıfırdan yazmak istemiyorsanız, bu toolkit harika bir orta yoldur.

Sıkça Sorulan Sorular (SSS)

1. Bu toolkit ücretsiz mi?

Toolkit'in kendisi açık kaynaklıdır ve ücretsizdir. Ancak, AWS üzerinde oluşturduğu kaynaklar (CloudFront, S3, Step Functions vb.) için AWS kullanım ücretlerini ödersiniz.

2. Hangi framework'leri destekliyor?

React, Vue, Angular gibi popüler SPA framework'lerini ve Next.js (statik export) gibi statik site üreteçlerini destekler.

3. Amplify varken neden bunu kullanayım?

Amplify size kapalı bir kutu sunarken, bu toolkit size altyapının kodunu (CDK veya CloudFormation) ve kontrolünü verir. Daha karmaşık ve özelleştirilmiş mimariler için daha uygundur.

Daha fazla bilgi için AWS Danışmanlığı veya DevOps Danışmanlığı sayfalarımızı ziyaret edebilirsiniz.

Kaynak / Source: https://awsfundamentals.com/blog/cloudfront-hosting-toolkit