AWS'yi Kullanmaya Başlama

Sunucusuz Bir Web Uygulaması Oluşturma

(AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB ve Amazon Cognito ile)

Sunucusuz Bir Web Uygulaması Oluşturma

Modül 4: Bir RESTful API Dağıtma

Bir önceki modülde oluşturduğunuz Lambda işlevini bir RESTful API olarak sunmak için Amazon API Gateway'i kullanacaksınız.

Genel Bakış

Bu modülde, bir önceki modülde oluşturduğunuz Lambda işlevini bir RESTful API olarak 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.

Mimariye Genel Bakış

Serverless_Web_App_LP_assets-03

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.

 Tamamlama Süresi

15 dakika

 Kullanılan Hizmetler

Uygulama

  • Yeni Bir REST API Oluşturma

    a. AWS Management Console'da Hizmetler'e tıklayın ve ardından Uygulama Hizmetleri altında API Gateway'i seçin.
    b. API Oluştur'u seçin.
    c. Yeni API'yi seçin ve API Adı için WildRydes ifadesini girin.
    d. Uç Nokta Türü açılır menüsünde Uç için optimize edilmiş'in seçili olduğundan emin olun. Not: Uç için optimize edilmiş, internetten erişilen kamu hizmetleri için en iyi seçenektir. Bölgesel uç noktalar genellikle aynı AWS Bölgesi içerisinden erişilen API'ler için kullanılmaktadır.
    e. API Oluştur'u seçin.

  • Bir Cognito Kullanıcı Havuzu Yetkilendiricisi Oluşturma

    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. Bu adımda, Modül 2 kapsamında oluşturduğunuz kullanıcı havuzunu kullanmak için API'nize yönelik bir yetkilendirici 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 oturum açtıktan sonra tarafınıza sunulan kimlik doğrulama belirtecini kopyalayıp yapıştırmak suretiyle konsolda yapılandırmayı test edebilirsiniz.

    a. Yeni oluşturulan API'niz kapsamında Yetkilendiriciler'i seçin.

    b. Yeni Yetkilendirici Oluştur'u seçin.

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

    d. Tür için Cognito'yu seçin.

    e. Cognito Kullanıcı Havuzu altındaki Bölge açılır menüsünde, Modül 2 kapsamında Cognito kullanıcı havuzunu oluşturduğunuz Bölgeyi seçin (varsayılan olarak mevcut bölge seçilmelidir).

    f. Cognito Kullanıcı Havuzu girişinde WildRydes ifadesini (ya da kullanıcı havuzunuza verdiğiniz adı) girin.

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

    h. Oluştur'u seçin.


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

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

    k. Oturum açma sayfasına yönlendirilirseniz son modülde oluşturduğunuz kullanıcı ile oturum açın. /ride.html sayfasına yeniden yönlendirileceksiniz.

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

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

    n. Yetkilendirici için kartın altındaki Test et'e tıklayın.

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

    p. Test et düğmesine 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.

  • Yeni bir kaynak ve yöntem oluşturma

    API’niz içerisinde /ride adında yeni bir kaynak oluşturun. Ardından bu kaynak için bir POST 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.

    a. Soldaki gezintisi bölmesinde WildRydes API'niz altında Kaynaklar'a tıklayın.

    b. Eylemler açılır menüsünden Kaynak Oluştur'u seçin.

    c. Kaynak Adı olarak ride ifadesini girin.

    d. Kaynak Yolu'nun ride olarak ayarlandığından emin olun.

    e. Kaynak için API Gateway CORS'yi Etkinleştir'i seçin.

    f. Kaynak Oluştur'a tıklayın.

    g. Yeni oluşturulan /ride kaynağı seçiliyken Eylem açılır menüsünden Yöntem Oluştur'u seçin.

    h. Açılan yeni menüden POST'u seçin ve ardından onay işaretine tıklayın.

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

    j. Lambda Proxy entegrasyonu kullan kutucuğunu işaretleyin.

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

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

    m. Kaydet'i 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.

    n. İşlevinizin çağrılması için Amazon API Gateway'e izin vermeniz istendiğinde Tamam'ı seçin.

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

    p. Yetkilendirme'nin yanındaki kalem simgesini seçin.

    q. Açılır listeden WildRydes Cognito kullanıcı havuzu yetkilendiricisini seçin ve ardından onay işareti simgesine tıklayın.

  • API'nizi Dağıtma

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

    a. Eylemler açılır listesinden API'yi Dağıt'ı seçin.
    b. Dağıtım aşaması açılır listesinden [Yeni Aşama] seçimini yapın.
    c. Aşama Adı için prod ifadesini girin.
    d. Dağıt'ı seçin.
    e. URL'yi Çağır seçeneğine dikkat edin. Bunu bir sonraki bölümde kullanacaksınız.

  • Web Sitesi Yapılandırmasını Güncelleme

    Biraz önce oluşturduğunuz aşamanın çağrı URL'sini dahil 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.

    a. Bir metin düzenleyicisinde config.js dosyasını açın.
    b. config.js dosyasında api anahtarı altında invokeUrl ayarını güncelleyin. Bir önceki bölümde oluşturduğunuz dağıtım aşaması için değeri URL'yi Çağır olarak ayarlayın.

    Eksiksiz bir config.js dosyası örneği aşağıda yer almaktadır. Dosyanızdaki asıl 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, 
    
        } 
    
    };

    c. Değiştirilmiş dosyayı kaydedin ve Amplify Konsolu'na otomatik olarak dağıtılması için Git deposuna gönderin.

    $ git push
    
  • 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.

    a. Web sitenizin etki alanı altında /ride.html adresini ziyaret edin.
    b. Oturum açma sayfasına yönlendirilirseniz bir önceki modülde oluşturduğunuz kullanıcı ile oturum açın.
    c. Harita yüklendikten sonra bir buluşma noktası belirlemek için harita üzerinde herhangi bir yere tıklayın.
    d. Tek Boynuzlu At İste'yi seçin. Sağ taraftaki kenar çubuğunda tek boynuzlu atın yolda olduğuna dair bir bildirim ve daha sonra buluşma noktanıza doğru ilerleyen bir tek boynuzlu at simgesi görmeniz gerekir.

Bu modül sizin için yararlı oldu mu?

Teşekkür ederiz
Lütfen neleri beğendiğinizi bize iletin.
Close
Sizi hayal kırıklığına uğrattığımız için özür dileriz
Eski, kafa karıştırıcı veya hatalı bir şey mi var? Lütfen geri bildirim sağlayarak bu öğreticiyi iyileştirmemize yardımcı olun.
Close

Kaynakları Sonlandırma