Bu modülde, önceki modülde RESTful API olarak oluşturduğunuz Lambda işlevlerini sunmak için Amazon API Gateway’i kullanacaksınız. Bu API genel olarak internetten erişilebilir olacaktır. Söz konusu API bir önceki modülde oluşturduğunuz Amazon Cognito kullanıcı havuzu ile korunacaktır. Bu yapılandırmayı kullanarak istatistiksel olarak barındırılan web sitenizi, AJAX çağrısı yapan istemci JavaScript’ini gösterilen API’lere eklemek suretiyle dinamik bir web uygulamasına dönüştüreceksiniz.

Serverless_Web_App_LP_assets-05

Yukarıdaki diyagram bu modülde oluşturacağınız API Ağ geçidi bileşeninin daha önce oluşturduğunuz bileşenlere nasıl entegre olduğunu göstermektedir. Gri renkli unsurlar bir önceki adımlarda oluşturduğunuz ögelerdir.

İlk modülde dağıttığınız statik web site, bu modülde oluşturacağınız API ile etkileşime geçmek üzere yapılandırılmış bir sayfaya sahiptir. /ride.html kapsamında sayfa bir tek boynuzlu at gezintisi istemek üzere basit bir harita tabanlı arabirime sahiptir. /signin.html sayfasının yetkilendirilmesinin ardından kullanıcılarınız harita üzerinden bir noktaya tıklayarak buluşma konumunu seçebilecek ve sağ üst köşedeki “Tek Boynuzlu At Talep Et” tuşuna basmak suretiyle bir gezinti isteyebilecektir.

Bu modül API’nin bulut bileşenlerini oluşturmak için gereken adımlara odaklanacaktır. Bu API’ye çağrıda bulunan tarayıcı kodunun nasıl çalıştığını merak ediyorsanız web sitesinin ride.js dosyasına göz atabilirsiniz. Bu durumda, uygulama uzaktan talepte bulunmak için jQuery'nin ajax() yöntemini kullanmaktadır.

Modülü Tamamlama Süresi: 15 Dakika

Kullanılan hizmetler: Amazon API Gateway ve AWS Lambda


REST API’nizi oluşturmak 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. Yeni bir REST API oluşturun


    1. AWS Management Console’da Hizmetler seçeneğine tıklayın ve ardından Uygulama Hizmetleri altındaki API Gateway öğesini seçin.

    2. API Oluştur öğesini seçin.

    3. Yeni API öğesini seçin ve API Adı için WildRydes ifadesini girin.

    4. Optimize uç seçeneğinin Uç Nokta Türü adlı açılır menüde seçili olduğundan emin olun. Not: Optimize uç internetten erişilen kamu hizmetleri için en iyi seçenektir. Bölgesel uç noktalar aynı AWS Bölgesi içerisinden erişilen API’ler için genellikle kullanılmaktadır.

    5. API Oluştur öğesini seçin

  • 2. Adım. Bir Cognito Kullanıcı Havuzu Yetkilendiricisi Oluşturun

    Amazon API Gateway, API çağrılarını yetkilendirmek için Cognito Kullanıcı Havuzları tarafından döndürülen JWT belirteçlerini kullanabilmektedir. Modül 2 kapsamında oluşturduğunuz kullanıcı havuzunu kullanmak için API’nize yönelik bir yetkilendiriciyi bu adımda yapılandıracaksınız.

    Amazon API Gateway konsolunda API’niz için yeni bir Cognito kullanıcı havuzu oluşturun. Bunu önceki modülde oluşturduğunuz kullanıcı havuzunun detayları ile yapılandırın. Mevcut web sitenizin /signin.html sayfası aracılığıyla giriş yaptıktan sonra tarafınıza sunulan kimlik doğrulama belirtecini kopyalayıp yapıştırmak suretiyle konsolda yapılandırmayı test edebilirsiniz.


    1. Yeni oluşturulan API’niz kapsamında Yetkilendiricileri seçin.

    2. Yeni Yetkilendirici oluştur öğesini seçin.

    3. Yetkilendirici adı için WildRydes ifadesini girin.

    4. Tür için Cognito öğesini seçin.

    5. Cognito Kullanıcı Havuzu adlı açılır menü içerisinde modül 2 kapsamında Cognito kullanıcı havuzunu oluşturduğunuz Bölgeyi seçin (varsayılan olarak mevcut bölge seçilmelidir).

    6. Cognito Kullanıcı Havuzu içerisinde WildRydes ifadesini (ya da kullanıcı havuzunuza verdiğiniz ismi) girin.

    7. Belirteç Kaynağı için Yetkilendirme ifadesini girin.

    8. Oluştur öğesini seçin.

    Yetkilendirici yapılandırmanızı doğrulayın

    1. Yeni bir tarayıcı sekmesi açın ve web sitenizin etki alanı altında /ride.html adresini ziyaret edin.

    2. Kaydolma sayfasına yönlendirilirseniz son modülde oluşturduğunuz kullanıcı ile giriş yapın. /ride.html sayfasına daha sonra yeniden yönlendirileceksiniz.

    3. /ride.html üzerindeki bildirimden kimlik doğrulama belirtecini kopyalayın,

    4. Yetkilendiriciyi oluşturduğunuz bir önceki sekmeye geri dönün

    5. Yetkilendirici için kartın altından Test et seçeneğine tıklayın.

    6. Kimlik doğrulama belirtecini açılan diyalogdaki Yetkilendirme Belirteci alanına yapıştırın.

    7. Test et tuşuna tıklayın ve yanıt kodunun 200 olduğunu ve görüntülenen kullanıcınız için talepleri görebildiğinizi doğrulayın.

  • 3. Adım. Yeni bir kaynak ve yöntem oluşturun

    API’niz içerisinde /ride adında yeni bir kaynak oluşturun. Ardından bu kaynak için bir PAYLAŞIM yöntemi oluşturun ve bu modülün ilk adımında oluşturduğunuz RequestUnicorn işlevi ile desteklenen Lambda proxy entegrasyonu ile kullanmak üzere bu yöntemi yapılandırın.


    1. Soldaki gezintisi bölmesinde WildRydes API’niz altında Kaynaklar seçeneğine tıklayın.

    2. Eylemler adlı açılır menüden Kaynak Oluştur öğesini seçin.

    3. Kaynak Adı olarak ride ifadesini girin.

    4. Kaynak Yolu’nun ride olarak ayarlandığından emin olun.

    5. Kaynak için API Gateway CORS’u Etkinleştir öğesini seçin.

    6. Kaynak Oluştur seçeneğine tıklayın.

    7. Yeni oluşturulan /ride kaynağını seçerek Eylem adlı açılır menüden Yöntem Oluştur öğesini seçin.

    8. Açılan yeni menüden PAYLAŞ seçeneğini seçin ve ardından onay işaretine tıklayın.

    9. Entegrasyon türünü Lambda İşlevi olarak seçin.

    10. Lambda Proxy entegrasyonu kullan ifadesinin kutucuğunu işaretleyin.

    11. Lambda Bölgesi için kullandığınız Bölgeyi seçin.

    12. Bir önceki modülde oluşturduğunuz RequestUnicorn işlevinin adını Lambda İşlevi için girin.

    13. Kaydet öğesini seçin. İşlevinizin olmadığına dair bir hata mesajı alırsanız seçtiğiniz bölgenin bir önceki modülde kullandığınız bölgeyle aynı olduğundan emin olun.

    14. İşlevinizin çağrılması için Amazon API Gateway’e izin vermeniz istendiğinde TAMAM öğesini seçin.

    15. Yöntem İsteği kartında seçim yapın.

    16. Yetkilendirme ifadesinin yanındaki kalem simgesini seçin.

    17. Açılan listeden WildRydes Cognito kullanıcı havuzu yetkilendiricisini seçin ve ardından onay kutusu simgesine tıklayın.

  • 4. Adım. API’nizi dağıtın

    Amazon API Gateway konsolundan Eylemler, API’yi dağıt öğesini seçin. Yeni bir aşama oluşturmanız istenecektir. Sahne adı için prod kullanabilirsiniz.


    1. Eylemler açılır listesinden API’yi Dağıt öğesini seçin.

    2. Dağıtım aşaması adlı açılır listeden [Yeni Aşama] seçeneğini seçin.

    3. Aşama Adı için prod ifadesini girin.

    4. Dağıt öğesini seçin.

    5. Bağlantıyı Çağır seçeneğine dikkat edin. Bunu bir sonraki bölümde kullanacaksınız.

  • 5. Adım. Web Site Yapılandırmasını Güncelleyin

    Biraz önce oluşturduğunuz aşamanın çağrı bağlantısını dâhil etmek için web sitenizin dağıtımında /js/config.js dosyasını güncelleyin. Amazon API Gateway konsolundaki aşama düzenleyicisi sayfasının üst kısmından çağrı bağlantısını direkt olarak kopyalamanız ve sitenizin /js/config.js dosyasındaki _config.api.invokeUrl anahtarına yapıştırmanız gerekmektedir. Yapılandırma dosyasını güncellediğinizde dosyada Cognito kullanıcı havuzunuz için bir önceki modülde oluşturduğunuz güncellemelerin yer aldığından emin olun.


    1. Bir metin düzenleyicisinden config.js dosyasını açın.

    2. config.js dosyasından api anahtarı kapsamında invokeUrl ayarını güncelleyin. Bir önceki bölümde oluşturduğunuz dağıtım aşaması için değeri Bağlantıyı Çağır olarak belirleyin.

      Eksiksiz bir config.js dosyası örneği aşağıda yer almaktadır. Dosyanızdaki esas değerlerin farklı olacağını unutmayın.

    window._config = {
    
        cognito: {
    
            userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         
    
            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
    
            region: 'us-west-2' // e.g. us-east-2 
    
        }, 
    
        api: { 
    
            invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
    
        } 
    
    };
    1. Değiştirilmiş dosyayı kaydedin ve Amplify Konsoluna otomatik olarak dağıtılması için Git deposuna gönderin.

    $ git push
  • 5. Adım. Uygulamanızı doğrulayın

    Not: S3 klasörünüzdeki config.js dosyasının güncellenmesi ve tarayıcınızda güncellenen içeriğin görüntülenmesi arasında bir gecikme olacaktır. Aşağıdaki adımları gerçekleştirmeden önce tarayıcınızın ön belleğini temizlediğinizden emin olun.


    1. Web sitenizin etki alanı kapsamında /ride.html adresini ziyaret edin.

    2. Kaydolma sayfasına yönlendirilirseniz bir önceki modülde oluşturduğunuz kullanıcı ile giriş yapın.

    3. Harita yüklendikten sonra bir buluşma noktası belirlemek için harita üzerinde herhangi bir yere tıklayın.

    4. Tek Boynuzlu At İste öğesini seçin. Tek boynuzlu atın yolda olduğuna dair bir bildirimi sağ taraftaki kenar çubuğunda görmeniz ve daha sonra buluşma noktanıza doğru ilerleyen bir Tek boynuzlu at simgesi görmeniz gerekmektedir.