Deploy a Website based on Geographic Location with AWS CloudFront and Lambda@Edge

Yazan:KubikologYazı kategorisi 1 Kaşık Cloud, GenelEtiketler:, , , , , ,

Bugün bir önceki yazıya takvime yapmak istediğim için tekrar klavyemin başına geçiyorum. Yakın zamanda paylaştığım “Ajandada Bugün: AWS CloudFront” yazımda CloudFront üzerine detaylıca konuşmuştuk. Bugün ise bir coğrafi konuma görre kişiselleştirdiğimiz bir website içeriğini nasıl CloudFront ve Lambda@Edge kullanarak deploy edebileceğimize bakalım istiyorum. Çaylar hazırsa haydi başlayalım 🐸

Gereksinimler:

Öncelikle bu demo için bir AWS hesabınız ve console erişiminiz olması gerektiğini belirtmek isterim. Sırayla gerçekleştireceğimiz adımlar şu şekilde:

1. S3 Bucket Oluşturma ve Statik İçerik Yükleme
2. Lambda@Edge Fonksiyonu Oluşturma
3. CloudFront Dağıtımı Oluşturma
4. CloudFront Dağıtımını Test Etme

Demo adımlarıyla başayalım öyleyse 👇🏻

Adımlar:
1. S3 Bucket Oluşturma ve Statik İçerik Yükleme
  1. AWS Management Console‘a giriş yapalım.
  2. S3 servisini açıp yeni bir bucket oluşturacağız.
    • Bucket Name: kubikolog-demo-website
    • Region: Size en yakın bölgeyi seçin.

3. Bucket’ı oluşturduktan sonra, bucket’ın içine girelim ve Permissions sekmesine gidelim.

4. Bucket Policy eklememiz gerekiyor. Aşağıdaki gibi ekleyebilirsiniz.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::kubikolog-demo-website/*"
        }
    ]
}

5. Properties sekmesine gidelim ve Static website hosting bölümünde Use this bucket to host a website seçeneğini işaretleyelim

  • Index document: index.html

6. Aşağıdaki içeriği bilgisayarınızda index.html olarak kaydedip ardından Upload sekmesine gidelim ve index.html adlı basit bir HTML dosyası yükleyelim.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geolocation Demo</title>
</head>
<body>
    <h1 id="greeting">Welcome!</h1>
    <p>This website uses CloudFront and Lambda@Edge to personalize content based on your location for kubikolog demo.</p>
</body>
</html>
2. Lambda@Edge Fonksiyonu Oluşturma
  1. AWS Management Console‘da Lambda servisini açalım.
  2. Create function butonuna tıklayıp aşağıdaki gibi kendinize göre kutuları doldurun.
    • Function name: GeoGreetingFunction
    • Runtime: Node.js 20.x
    • Role: Create a new role with basic Lambda permissions

3. Fonksiyon oluşturulduktan sonra, aşağıdaki kodu Function code bölümüne yapıştıralım ve fonksiyonu kaydedelim.

exports.handler = async (event) => {
    const request = event.Records[0].cf.request;
    const response = event.Records[0].cf.response;
    const headers = request.headers;
    
    const country = headers['cloudfront-viewer-country'] ? headers['cloudfront-viewer-country'][0].value : 'unknown';

    let greeting = 'Welcome!';
    if (country === 'US') {
        greeting = 'Hello World!!';
    } else if (country === 'FR') {
        greeting = 'Bonjour de la France!';
    } else if (country === 'JP') {
        greeting = 'こんにちは、日本から！';
    }

    const modifiedResponse = {
        status: response.status,
        statusDescription: response.statusDescription,
        headers: response.headers,
        body: response.body.replace('<h1 id="greeting">Welcome!</h1>', `<h1 id="greeting">${greeting}</h1>`),
        bodyEncoding: 'text',
    };

    return modifiedResponse;
};
3. CloudFront Dağıtımı Oluşturma
  1. AWS Management Console‘da CloudFront servisini açalım.
  2. Create Distribution butonuna tıklayıp , Web seçeneğini seçelim ve devam edelim.
  3. Origin Settings bölümünde:
    • Origin Domain Name: S3 bucket adınızı seçin (kubikolog-demo-website.s3.amazonaws.com).
    • Origin Path: Boş bırakın.
    • Name: kubikolog-geo-origin (varsayılan olarak gelir).
  4. Default Cache Behavior Settings bölümünde:
    • Viewer Protocol Policy: Redirect HTTP to HTTPS seçin.
    • Lambda Function Associations: Origin Response seçeneği altında, oluşturduğunuz Lambda fonksiyonunu ekleyin (GeoGreetingFunction).
  5. Distribution Settings bölümünde:
    • Price Class: Use Only North America and Europe (maliyeti düşük tutmak için).
    • Alternate Domain Names (CNAMEs): Boş bırakın (örneğinizi basit tutmak için).
    • SSL Certificate: Default CloudFront Certificate (TLS kullanımı için).
  6. Create Distribution butonuna tıklayıp kaydediyoruz.
4. CloudFront Dağıtımını Test Etme
  1. CloudFront dağıtımınızın durumunun Deployed olmasını bekleyin (Bu birkaç dakika sürebilir). Yanında deploying olarak yazıyor.
  2. Dağıtımın Domain Name‘ini kopyalayalım. (örneğin: d1234567890abcdef.cloudfront.net) ve bir web tarayıcısında bu domain name’i açalım.

Eğer her şey doğru yapılandırılmışsa, web sayfanız kullanıcıların coğrafi konumuna göre kişiselleştirilmiş bir mesaj gösterecektir. Örneğin, ABD’den erişen kullanıcılar “Hello World !!” mesajını görecektir.

Sonuç olarak; bu adımları tamamladığınızda, AWS CloudFront ve Lambda@Edge kullanarak coğrafi konuma göre kişiselleştirilmiş içerik sunan bir web uygulaması oluşturmuş olacaksınız. Bu demo, CloudFront’un Lambda@Edge ile entegrasyonunu ve bu kombinasyonun sağladığı yapıyı anlamamız daha da kolaylaştığını düşünüyorum.

Yazının sonuna doğru gelirken KubikFM’den bugün sizlere dinlerken her duyguya girdiğim bir şarkıyı armağan ediyorum 🐸🦋

“Biraz neşe biraz hüzün, biraz öyle biraz da böyle”

Yorum bırakın