Bu modülde, Amazon Simple Storage Service’ı (S3) web uygulamanızın statik kaynaklarını barındıracak şekilde yapılandıracaksınız. Takip eden modüllerde, AWS Lambda ve Amazon API Gateway ile oluşturulan uzak RESTful API’leri çağırmak için JavaScript kullanarak bu sayfalara dinamik işlevsellik ekleyeceksiniz.

Bu modülün mimarisi oldukça basittir. HTML, CSS, JavaScript, görüntüler ve başka dosyalar dahil olmak üzere tüm statik web içerikleriniz Amazon S3’te depolanacaktır. Son kullanıcılarınız daha sonra Amazon S3 tarafından gösterilen genel web sitesi URL’sini kullanarak sitenize erişecektir. Sitenizi erişilebilir kılmak için herhangi bir web sunucusu çalıştırmanıza veya başka hizmetlerden faydalanmanıza gerek yoktur.

Bu modülün amaçları doğrultusunda, sağladığımız Amazon S3 web sitesi uç noktası URL’sini kullanacaksınız. Söz konusu URL şu şekilde görüntülenecektir: http://{klasor-adiniz}.s3-website.{bolge}.amazonaws.com. Çoğu gerçek uygulama için sitenizi barındırmak üzere özel bir etki alanı kullanmanız önerilir. Kendi etki alanınızı kullanmak isterseniz, Amazon S3’te özel bir etki alanı kullanarak statik bir web sitesi ayarlama belgeleri içinde yer alan talimatları izleyin.

Modülü Tamamlama Süresi: 30 Dakika

Kullanılan hizmetler: Amazon S3

CloudFormation Şablonu: Amazon S3 ile çalışırken rahatsanız veya Lambda ve API Gateway ile çalışmaya geçiş yapmak istiyorsanız, tercih ettiğiniz Bölgedeki söz konusu AWS CloudFormation şablonlarından birini başlatarak gerekli kaynakları otomatik olarak oluşturabilirsiniz.

Bölge CloudFormation Şablonu
ABD Doğu (K. Virginia) Yığını başlat >
ABD Doğu (Ohio) Yığını başlat >
ABD Batı (Oregon) Yığını başlat >
AB (Frankfurt) Yığını başlat >
AB (İrlanda) Yığını başlat >
AB (Londra) Yığını başlat >
Asya Pasifik (Tokyo) Yığını başlat >
Asya Pasifik (Seul) Yığını başlat >
Asya Pasifik (Sidney) Yığını başlat >
Asya Pasifik (Mumbai) Yığını başlat >

CloudFormation Başlatma Talimatları

  1. Tercih ettiğiniz bölge için yukarıdaki Yığını Başlat bağlantısına tıklayın.

  2. Şablon Seç sayfasında İleri’ye tıklayın.

  3. Web Sitesi Klasör Adı için wildrydes-adiniz gibi küresel çapta benzersiz bir ad girip İleri’ye tıklayın.

  4. Seçenekler sayfasında tüm varsayılanları olduğu gibi bırakıp İleri’ye tıklayın.

  5. İnceleme sayfasında ilgili kutuyu işaretleyerek IAM kaynaklarını CloudFormation’ın oluşturacağını kabul edin ve Oluştur’a tıklayın.

    Bu şablon, statik web sitesi varlıklarını merkezi bir S3 klasöründen size tahsis edilmiş klasöre kopyalamak için özel bir kaynak kullanır. Özel kaynağın hesabınızdaki yeni klasöre yazabilmesi için bu izinlerle üstlenebileceği bir IAM görevi oluşturması gerekir.

  6. wildrydes-webapp-1 yığınının CREATE_COMPLETE durumuna ulaşmasını bekleyin.

  7. wildrydes-webapp-1 yığını seçili haldeyken Çıktılar sekmesine ve ardından WebsiteURL bağlantısına tıklayın.

  8. Wild Rydes ana sayfasının düzgün biçimde yüklendiğini doğrulayıp sıradaki modül olan Kullanıcı Yönetimi’ne geçin.


Statik bir web sitesini barındırmak için aşağıda adım adım gösterilen talimatları takip edin. Bölümü genişletmek için her adımın numarasına tıklayın.

  • 1. Adım. Bölge Seçimi


    Bu web uygulaması Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3 ve Amazon DynamoDB dahil olmak üzere bu uygulamada kullanılan tüm hizmetleri destekleyen herhangi bir AWS bölgesine dağıtılabilir.

    Hangi bölgelerin desteklenen hizmetlere sahip olduğunu görmek için bölge tablosuna bakabilirsiniz. Seçebileceğiniz desteklenen bölgeler şunlardır:

    • ABD Doğu (K. Virginia)
    • ABD Doğu (Ohio)
    • ABD Batı (Oregon)
    • AB (Frankfurt)
    • AB (İrlanda)
    • AB (Londra)
    • Asya Pasifik (Tokyo)
    • Asya Pasifik (Seul)
    • Asya Pasifik (Sidney)
    • Asya Pasifik (Mumbai)

     

    AWS Management Console'un sağ üst köşesindeki açılır listeden bölgenizi seçin.

    (Büyütmek için tıklayın)

  • 2. Adım. S3 Klasörü Oluşturma

    Amazon S3, statik web sitelerini herhangi bir web sunucusu yapılandırmaya veya yönetmeye gerek kalmadan barındırmak amacıyla kullanılabilir. Bu adımda, web uygulamanız için statik varlıkların tümünü (ör. HTML, CSS, JavaScript ve görüntü dosyaları) barındırmak amacıyla kullanılacak yeni bir S3 klasörü oluşturacaksınız. 

    Bu adımda, konsolu veya AWS CLI’yı kullanarak bir Amazon S3 klasörü oluşturacaksınız. Klasörünüzün adının küresel çapta benzersiz olması gerektiğini unutmayın. wildrydes-adi-soyadi gibi bir ad kullanmanızı öneririz. Klasör adınızın zaten mevcut olduğuna dair bir hata alırsanız, klasör adına kullanılmayan bir ad bulana kadar sayı veya karakter eklemeyi deneyin.


    1. AWS Management Console’da önce Hizmetler’i, ardından Depolama altından S3’ü seçin.
    2. +Klasör Oluştur’u seçin
    3. Klasörünüze wildrydes-adi-soyadi gibi küresel çapta benzersiz bir ad verin. Klasör adınızın zaten mevcut olduğuna dair bir hata alırsanız, klasör adına kullanılmayan bir ad bulana kadar sayı veya karakter eklemeyi deneyin.
    4. Bu atölye çalışmasında kullanmayı tercih ettiğiniz Bölgeyi açılır menüden seçin.
    5. Ayarların kopyalanacağı bir klasör seçmeden iletişim kutusunun sol alt tarafındaki Oluştur’u seçin.
  • 3. Adım. İçerik Yükleme

    Bu adımda, bu modülün web sitesi varlıklarını S3 klasörünüze yükleyeceksiniz. Bu adımı tamamlamak için AWS Management Console’u (Google Chrome tarayıcı gerektirir), AWS CLI veya verilen CloudFormation şablonunu kullanabilirsiniz. AWS CLI yerel makinenizde zaten yüklü ve yapılandırılmış durumdaysa, bu yöntemi kullanmanızı öneririz. Aksi takdirde, Google Chrome’un son sürümüne sahipseniz konsolu kullanın. 

    Konsol için adım adım talimatlar

    AWS Management Console aracılığıyla yerel bir dizindeki tüm dosya ve alt dizinleri yükleyebilmek için Chrome web tarayıcısının en son sürümünü kullanmanız gerekir. Chrome’u kullanamıyorsanız, AWS CLI veya verilen CloudFormation şablonunun kullanımıyla ilgili talimatları takip edin.

    1. Bu deponun arşivini bu bağlantıyı kullanarak indirin.

    2. İndirdiğiniz arşivin sıkıştırmasını yerel makinenizde açın.

    3. AWS Management Console’u Chrome’da açın. Önce Hizmetler’i, ardından Depolama altından S3’ü seçin.

    4. Bir önceki adımda oluşturduğunuz klasörü seçip Genel Bakış sekmesini görüntülediğinizden emin olun.

    5. Windows Dosya Gezgini’ni veya macOS Finder’ı açarak ilk adımda indirdiğiniz zip dosyasının genişletilmiş içeriğine göz atın.

    6. Yerel makinenizde WebApplication/1_StaticWebHosting/website dizinine göz atın.

    7. Web sitesi dizini altındaki tüm dosya ve alt dizinleri seçin. Web sitesi dizininin kendisinin seçilmediğinden emin olun.

    8. Seçilen dosyaları yerel dosya sisteminizden S3 konsolundaki Genel Bakış sekmesi altındaki içeriğe sürükleyip bırakın.

    9. Açılan iletişim kutusunun sol alt kısmından Yükle’yi seçin.

    10. Yüklemenin tamamlanmasını bekleyin ve web sitesi içeriklerini S3 konsolunda listelenmiş halde gördüğünüzden emin olun. Sadece tek bir web sitesi dizini görüyorsanız, bu dizini klasörünüzden silmeniz ve bu talimatları tekrar takip ederek S3 konsoluna sürükleyip bırakmadan önce sadece dizinin içeriklerini seçtiğinizden emin olmanız gerekir.

    CLI için adım adım talimatlar

    CLI yüklü ve yapılandırılmış durumdaysa, gerekli web varlıklarını s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website dizininden klasörünüze kopyalamak için kullanabilirsiniz.

    1. KLASOR_ADINIZ öğesini önceki bölümde kullandığınız adla ve KLASOR_BOLGENIZ öğesini klasörünüzü oluşturduğunuz bölge koduyla (ör. us-east-2) değiştirmeyi unutmadan aşağıdaki komutu yürütün.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://KLASOR_ADINIZ --region KLASOR_BOLGENIZ
    2. Komut başarılı olduysa, klasörünüze kopyalanan nesnelerin bir listesini görmeniz gerekir.

     

    CloudFormation için adım adım talimatlar

    Önceki yöntemlerden ikisini de kullanamıyorsanız, gerekli varlıkları S3 klasörünüze kopyalayabilmek için verilen CloudFormation şablonunu başlatabilirsiniz. Bir bölge seçip bu modülün CloudFormation Şablonu bölümünde bulunan Yığını başlat bağlantısına tıklayarak bir CloudFormation şablonu başlatın.

  • 4. Adım. Genel Okumalara İzin Vermek İçin Bir Klasör Ekleme

    Bir klasör politikası kullanarak S3 klasörünüzde yer alan içeriklere kimlerin erişebileceğini tanımlayabilirsiniz. Klasör politikaları, klasörünüzdeki nesnelere karşı çeşitli eylemleri yürütmek için kimlere izin verildiğini belirten JSON belgeleridir.

    Bu adımda, anonim kullanıcıların sitenizi görüntülemesine izin vermek için yeni Amazon S3 klasörünüze bir klasör politikası ekleyeceksiniz. Klasörünüze varsayılan olarak sadece AWS hesabınıza erişimi olan kimliği doğrulanmış kullanıcılar erişebilecektir.

    Anonim kullanıcılara salt okuma erişimi veren bu örnek politikaya göz atın. Bu örnek politika, internetteki herkesin içeriklerinizi görüntülemesine izin verir. Bir klasör politikasını güncellemenin en kolay yolu, konsolu kullanmaktır. Önce klasörü, ardından izin sekmesini ve son olarak da Klasör Politikası’nı seçin.


    1. S3 konsolunda, 1. bölümde oluşturduğunuz klasörün adını seçin.
    2. İzinler sekmesini ve ardından Klasör Politikası’nı seçin.
      1. S3 konsolunda, 1. bölümde oluşturduğunuz klasörün adını seçin.
      2. İzinler sekmesini seçin ve Genel erişim ayarlarının seçilmiş olduğundan emin olun.
      3. Düzenle’ye tıklayıp aşağıdakilerin işaretini kaldırın:
        • "Yeni genel klasör politikalarını engelle"
        • "Klasör genel politikalara sahipse genel ve hesaplar arası erişimi engelle"
      4. Kaydet’e tıklayın.
      5. Açılan onay kalıcı iletişim kutusuna “confirm” (onayla) yazıp Onayla’ya tıklayın. 
      6. İzinler sekmesinden ayrılmadan Klasör Politikası’nı seçin.  
    3. [KLASOR_ADINIZ] öğesini bölüm 1’de oluşturduğunuz klasörün adıyla değiştirerek aşağıdaki politika belgesini klasör politikası düzenleyicisine girin:
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow", 
                "Principal": "*", 
                "Action": "s3:GetObject", 
                "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
            } 
        ] 
    }
    
    1. Kaydet’i seçerek yeni politikayı uygulayın.
  • 5. Adım. Web Sitesi Barındırmayı Etkinleştirme

    Bir S3 klasöründe yer alan nesnelere varsayılan olarak http://.amazonaws.com// yapısına sahip URL’ler üzerinden erişilir. Kök URL’den (ör. /index.html) varlık sunabilmek için klasörde web sitesi barındırmayı etkinleştirmeniz gerekecektir. Bu durum, nesnelerinizi klasörün AWS Bölgeye özel web sitesi uç noktasında erişilebilir kılacaktır: .s3-website-.amazonaws.com.

    Ayrıca, web siteniz için özel bir etki alanı da kullanabilirsiniz. Örneğin, http://www.wildrydes.com S3’te barındırılmaktadır. Özel bir etki alanının nasıl oluşturulacağı bu modülde ele alınmamakla birlikte, bu konuyla ilgili ayrıntılı talimatları belgelerimizde bulabilirsiniz.

    Bu adımda, statik web sitesi barındırmayı etkinleştirmek için konsolu kullanacaksınız. Bu işlemi, klasörü seçtikten sonra Özellikler sekmesinden gerçekleştirebilirsiniz. index.html’yi dizin belgesi olarak seçip hata belgesini boş bırakın. Daha fazla ayrıntı için statik web sitesi barındırma için klasör yapılandırma hakkındaki belgelere bakın.


    1. S3 konsolundaki klasör ayrıntı sayfasında Özellikler sekmesini seçin.
    2. Statik web sitesi barındırma kartını seçin.
    3. Bir web sitesini barındırmak için bu klasörü kullan seçimini yapıp Dizin belgesi olarak index.html’yi girin. Diğer alanları boş bırakın.
    4. Kaydet’i seçmeden önce iletişim kutusunun üst kısmındaki Uç Nokta URL’sini not alın. Web uygulamanızı görüntülemek için atölye çalışmasının kalan kısmı boyunca bu URL’yi kullanacaksınız. Bu noktadan itibaren bu URL, web sitenizin temel URL’si olarak anılacaktır.
    5. Yaptığınız değişiklikleri kaydetmek için Kaydet’e tıklayın.
  • 6. Adım. Uygulamanızı Doğrulama

    Bu uygulama adımlarını tamamladıktan sonra S3 klasörünüzün web sitesi uç noktası URL’sini ziyaret ederek statik web sitenize erişebiliyor olmanız gerekir.

    Web sitenizin temel URL’sini (bu, önceki bölümde not aldığınız URL’dir) dilediğiniz tarayıcıda ziyaret edin. Wild Rydes ana sayfasının görüntülendiğini göreceksiniz. Temel URL’ye bakmanız gerekiyorsa, S3 konsolunu ziyaret edin, klasörünüzü seçin ve Özellikler sekmesindeki Statik Web Barındırma’ya tıklayın.

    Sayfa ekranda doğru görüntüleniyorsa (örnek ekran görüntüsü için aşağıya bakın), bir sonraki modül olan Kullanıcı Yönetimi’ne geçebilirsiniz.