Azure Static Web Apps ile Mongoose kullanarak Azure Cosmos DB'deki verilere erişme

Mongoose , Node.js için en popüler ODM (Nesne Belgesi Eşleme) istemcisidir. Mongoose, bir veri yapısı tasarlamanıza ve doğrulamayı zorlamanıza olanak tanır ve MongoDB API'sini destekleyen veritabanlarıyla etkileşime geçmek için gereken tüm araçları sağlar. Cosmos DB gerekli MongoDB API'lerini destekler ve Azure'da arka uç sunucusu seçeneği olarak kullanılabilir.

Önkoşullar

• Bir Azure hesabı. Azure aboneliğiniz yoksa ücretsiz bir deneme hesabı oluşturun.
• GitHub hesabı.
• Cosmos DB sunucusuz hesabı. Sunucusuz bir hesapla yalnızca kullanıldıkları kaynaklar için ödeme yapmanız ve tam bir altyapı oluşturma gereksinimini ortadan kaldırmanız gerekir.

1. Cosmos DB sunucusuz veritabanı oluşturma

Cosmos sunucusuz veritabanı oluşturmak için aşağıdaki adımları tamamlayın.

1. Azure Portal’ında oturum açın.
2. Kaynak oluştur’u seçin.
3. Arama kutusuna Azure Cosmos DB yazın.
4. Azure Cosmos DB'yi seçin.
5. Oluştur’u seçin.
6. İstenirse MongoDB için Azure Cosmos DB API'sindeOluştur'u seçin.
7. Azure Cosmos DB Hesabınızı aşağıdaki bilgilerle yapılandırın:
   • Abonelik: Kullanmak istediğiniz aboneliği seçin
   • Kaynak: Yeni oluştur'u seçin ve adı aswa-mongoose olarak ayarlayın
   • Hesap adı: Benzersiz bir değer gereklidir
   • Konum: Batı ABD 2
   • Kapasite modu: Sunucusuz (önizleme)
   • Sürüm: 4.0
8. Gözden geçir ve oluştur’u seçin.
9. Oluştur’u seçin.

Oluşturma işlemi birkaç dakika sürer. Statik bir web uygulaması oluşturduktan sonra bağlantı dizesini toplamak için veritabanına geri döneceğiz.

2. Statik web uygulaması oluşturma

Bu öğreticide, uygulamanızı oluşturmanıza yardımcı olması için bir GitHub şablon deposu kullanılır.

1. Başlangıç şablonuna gidin.

2. Sahibi seçin (ana hesabınız dışında bir kuruluş kullanıyorsanız).

3. Deponuza aswa-mongoose-tutorial adını verin.

4. Şablondan depo oluştur’u seçin.

5. Azure portalına geri dönün.

6. Kaynak oluştur’u seçin.

7. Arama kutusuna statik web uygulaması girin.

8. Statik Web Uygulaması'ı seçin.

9. Oluştur’u seçin.

10. Azure Statik Web Uygulamanızı aşağıdaki bilgilerle yapılandırın:

    • Abonelik: Öncekiyle aynı aboneliği seçin
    • Kaynak grubu: aswa-mongoose'yi seçin
    • Ad: aswa-mongoose-tutorial
    • Bölge: Batı ABD 2
    • GitHub ile oturum aç'ı seçin
    • dağıtımı etkinleştirmek için Azure Static Web Apps GitHub Eylemi oluşturmasına izin vermeniz istenirse Yetkilendir'i seçin
    • Kuruluş: GitHub hesabınızın adı
    • Depo: aswa-mongoose-tutorial
    • Dal: main
    • Derleme ön ayarları: React seçin
    • Uygulama konumu: /
    • Api konumu: api
    • Çıkış konumu: derleme

11. Gözden geçir ve oluştur'u seçin.

12. Oluştur’u seçin.

13. Oluşturma işlemi birkaç dakika sürer; Statik web uygulaması sağlandıktan sonra Kaynağa git'i seçin.

3. Veritabanı bağlantı dizesini yapılandırma

Web uygulamasının veritabanıyla iletişim kurmasına izin vermek için, veritabanı bağlantı dizesi bir uygulama ayarı olarak depolanır. Ayar değerlerine nesnesini kullanarak process.env Node.js'de erişilebilir.

1. Azure portal sol üst köşesindeki Giriş'i seçin (veya öğesine geri https://portal.azure.comdönün).
2. Kaynak grupları’nı seçin.
3. aswa-mongoose öğesini seçin.
4. Veritabanı hesabınızın adını seçin; Mongo DB için bir Tür Azure Cosmos DB API'sine sahiptir.
5. Ayarlar'ın altında Bağlantı Dizesi'ne tıklayın.
6. BİRİnCİl BAĞLANTI DIZESİ altında listelenen bağlantı dizesini kopyalayın.
7. İçerik haritalarında aswa-mongoose öğesini seçin.
8. Web sitesi örneğine dönmek için aswa-mongoose-tutorial öğesini seçin.
9. Ayarlar'ın altında Yapılandırma'ya tıklayın.
10. Ekle'yi seçin ve aşağıdaki değerlerle yeni bir Uygulama Ayarı oluşturun:
    • Ad: AZURE_COSMOS_CONNECTION_STRING
    • Değer: <Daha önce kopyaladığınız bağlantı dizesini yapıştırın>
11. Tamam’ı seçin.
12. Ekle'yi seçin ve veritabanının adı için aşağıdaki değerleri içeren yeni bir Uygulama Ayarı oluşturun:
    • Ad: AZURE_COSMOS_DATABASE_NAME
    • Değer: todo
13. Tamam’ı seçin.
14. Kaydet’i seçin.

4. Sitenize gidin

Artık statik web uygulamasını keşfedebilirsiniz.

1. Azure portal Genel Bakış'ı seçin.
2. Sağ üst köşede görüntülenen URL'yi seçin.
   1. şuna benzer https://calm-pond-05fcdb.azurestaticapps.net.
3. Görev listenizi görmek için Lütfen oturum açın'ı seçin.
4. Uygulamaya erişmek için onay ver'i seçin.
5. Yeni liste oluştur etiketli metin kutusuna bir ad girip Kaydet'i seçerek yeni liste oluşturun.
6. Yeni öğe oluştur etiketli metin kutusuna bir başlık yazarak ve Kaydet'i seçerek yeni bir görev oluşturun.
7. Görevin görüntülendiğini onaylayın (biraz zaman alabilir).
8. Denetimi seçerek görevi tamamlandı olarak işaretleyin; görev sayfanın Bitti öğeleri bölümüne taşınır.
9. Veritabanının kullanıldığını onaylamak için sayfayı yenileyin.

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekseniz aşağıdaki adımları izleyerek kaynak grubunu silin:

1. Azure portalına geri dönün.
2. Kaynak grupları’nı seçin.
3. aswa-mongoose öğesini seçin.
4. Kaynak grubunu sil'i seçin.
5. Metin kutusuna aswa-mongoose girin.
6. Sil’i seçin.

Sonraki adımlar

Yerel geliştirmeyi yapılandırmayı öğrenmek için sonraki makaleye ilerleyin...

Yerel geliştirmeyi ayarlama