Eğitim: MongoDB için Azure Cosmos DB ile Node.js web uygulaması bağlantı kurma (vCore)

ŞUNLAR IÇIN GEÇERLIDIR: MongoDB sanal çekirdeği

Bu öğreticide, sanal çekirdek mimarisinde MongoDB için Azure Cosmos DB'ye bağlanan bir Node.js web uygulaması oluşturacaksınız. MongoDB, Express, React.js, Node.js (MERN) yığını, birçok modern web uygulaması oluşturmak için kullanılan popüler bir teknoloji koleksiyonudur. MongoDB için Azure Cosmos DB (sanal çekirdek) ile, zaten bildiğiniz MongoDB sürücülerini kullanarak yeni bir web uygulaması oluşturabilir veya mevcut bir uygulamayı geçirebilirsiniz. Bu öğreticide şunları yapacaksınız:

• Ortamınızı ayarlama
• MERN uygulamasını yerel mongoDB kapsayıcısıyla test edin
• MERN uygulamasını sanal çekirdek kümesiyle test edin
• MERN uygulamasını Azure Uygulaması Hizmetine dağıtma

Önkoşullar

Bu öğreticiyi tamamlamak için aşağıdaki kaynaklara ihtiyacınız vardır:

• Mevcut bir vCore kümesi.
• Bir GitHub hesabı.
  • GitHub, tüm kullanıcılar için ücretsiz Codespaces saatleri ile birlikte gelir.

Geliştirme ortamını yapılandırma

Her alıştırmayı tamamlamak için gereken tüm bağımlılıkları içeren bir geliştirme kapsayıcı ortamı sağlanmıştır. Geliştirme kapsayıcısını GitHub Codespaces'ta veya Visual Studio Code kullanarak yerel olarak çalıştırabilirsiniz.

GitHub Codespaces

GitHub Codespaces, Kullanıcı arabirimi olarak Web için Visual Studio Code ile GitHub tarafından yönetilen bir geliştirme kapsayıcısı çalıştırır. En basit geliştirme ortamı için GitHub Codespaces'ı kullanarak bu eğitim modülünü tamamlamak için doğru geliştirici araçlarını ve bağımlılıklarını önceden yüklemiş olursunuz.

Önemli

Tüm GitHub hesapları Codespaces'ı her ay 2 çekirdek örneğiyle 60 saate kadar ücretsiz olarak kullanabilir.

1. azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub deposunun main dalında yeni bir GitHub Codespace oluşturmak için işlemi başlatın.

   

2. Codespace oluştur sayfasında codespace yapılandırma ayarlarını gözden geçirin ve ardından Yeni kod alanı oluştur'u seçin

   

3. Kod alanının başlamasını bekleyin. Bu başlatma işlemi birkaç dakika sürebilir.

4. Kod alanında yeni bir terminal açın.

   Tavsiye

   Ana menüyü kullanarak Terminal menüsü seçeneğine gidip Yeni Terminal seçeneğini belirleyebilirsiniz.

   

5. Bu öğreticide kullandığınız araçların sürümlerini denetleyin.

   docker --version
   
   node --version
   
   npm --version
   
   az --version
   

   Not

   Bu öğretici, ortamınıza önceden yüklenmiş her aracın aşağıdaki sürümlerini gerektirir:

   Araç	Sürüm
   Docker	≥ 20.10.0
   Node.js	≥ 18.0150
   NPM	≥ 9.5.0
   Azure CLI	≥ 2.46.0

6. Terminali kapatın.

7. Bu öğreticideki kalan adımlar bu geliştirme kapsayıcısı bağlamında gerçekleşir.

Visual Studio Code

Visual Studio Code için Geliştirme Kapsayıcıları uzantısı docker'ın yerel makinenize yüklenmesini gerektirir. Uzantı, bu eğitim modülünü tamamlamak için doğru geliştirici araçları ve bağımlılıkları önceden yüklenmiş docker ana bilgisayarını kullanarak geliştirme kapsayıcısını yerel olarak barındırır.

1. Boş bir dizin bağlamında Visual Studio Code'u açın.

2. Geliştirme Kapsayıcıları uzantısının Visual Studio Code'da yüklü olduğundan emin olun.

3. Düzenleyicide yeni bir terminal açın.

   İpucu

   Ana menüyü kullanarak Terminal menüsü seçeneğine gidip Yeni Terminal seçeneğini belirleyebilirsiniz.

   

4. GitHub deposunu azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app geçerli dizine kopyalayın.

   git clone https://github.com/azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app.git .
   

5. Komut Paleti'ni açın, Geliştirme Kapsayıcıları komutlarını arayın ve ardından Geliştirme Kapsayıcıları: Kapsayıcıda Yeniden Aç'ı seçin.

   

   İpucu

   Visual Studio Code, geliştirme kapsayıcısı içindeki mevcut klasörü otomatik olarak yeniden açmanızı isteyebilir. Bu işlev, geçerli çalışma alanını bir kapsayıcıda yeniden açmak için komut paletini kullanmaya eşdeğerdir.

   

6. Bu öğreticide kullandığınız araçların sürümlerini denetleyin.

   docker --version
   
   node --version
   
   npm --version
   
   az --version
   

   Not

   Bu öğretici, ortamınıza önceden yüklenmiş her aracın aşağıdaki sürümlerini gerektirir:

   Araç	Sürüm
   Docker	≥ 20.10.0
   Node.js	≥ 18.0150
   NPM	≥ 9.5.0
   Azure CLI	≥ 2.46.0

7. Terminali kapatın.

8. Bu öğreticideki kalan adımlar bu geliştirme kapsayıcısı bağlamında gerçekleşir.

MERN uygulamasının API'sini MongoDB kapsayıcısıyla test edin

Uygulamanın çalıştığını doğrulamak için yerel MongoDB kapsayıcısıyla örnek uygulamanın API'sini çalıştırarak başlayın.

1. Docker kullanarak bir MongoDB kapsayıcısı çalıştırın ve tipik MongoDB bağlantı noktasını (27017) yayımlayın.

   docker pull mongo:6.0
   
   docker run --detach --publish 27017:27017 mongo:6.0
   

2. Yan çubukta MongoDB uzantısını seçin.

   

3. bağlantı dizesi mongodb://localhostkullanarak MongoDB uzantısına yeni bir bağlantı ekleyin.

   

4. Bağlantı başarılı olduktan sonra data/products.mongodb playground dosyasını açın.

5. Betiği yürütmek için Tümünü çalıştır simgesini seçin.

   

6. Oyun alanı çalıştırması, yerel MongoDB koleksiyonundaki belgelerin listesiyle sonuçlanmalıdır. Çıktının kesilmiş bir örneği aşağıda verilmiştir.

   [
     {
       "_id": { "$oid": "640a146e89286b79b6628eef" },
       "name": "Confira Watch",
       "category": "watches",
       "price": 105
     },
     {
       "_id": { "$oid": "640a146e89286b79b6628ef0" },
       "name": "Diannis Watch",
       "category": "watches",
       "price": 98,
       "sale": true
     },
     ...
   ]
   

   Not

   Nesne kimlikleri (_id) rastgele oluşturulur ve bu kesilmiş örnek çıktıdan farklı olacaktır.

7. Sunucu/dizinde yeni bir .env dosyası oluşturun.

8. server/.env dosyasında bu değer için bir ortam değişkeni ekleyin:

   Ortam değişkeni	Değer
   CONNECTION_STRING	MongoDB için Azure Cosmos DB (vCore) kümesine bağlantı dizesi. Şimdilik mongodb://localhost:27017?directConnection=true kullanın.

   CONNECTION_STRING=mongodb://localhost:27017?directConnection=true
   

9. Terminalin bağlamını sunucu/klasör olarak değiştirin.

   cd server
   

10. Node Paket Yöneticisi 'den (npm) bağımlılıkları yükleyin.

    npm install
    

11. Node.js & Express uygulamasını başlatın.

    npm start
    

12. API, bir dizi ürün belgesi döndürdüğünü doğrulamak için otomatik olarak bir tarayıcı penceresi açar.

13. Ek tarayıcı sekmesini/penceresini kapatın.

14. Terminali kapatın.

MERN uygulamasını MongoDB için Azure Cosmos DB (sanal çekirdek) kümesiyle test edin

Şimdi uygulamanın MongoDB için Azure Cosmos DB (sanal çekirdek) ile sorunsuz çalıştığını doğrulayalım. Bu görev için, MongoDB kabuğunu kullanarak önceden var olan kümeyi tohum verileriyle doldurun ve ardından API'nin bağlantı dizesi güncelleştirin.

1. Azure portalında (https://portal.azure.com ) oturum açın.

2. Mevcut Azure Cosmos DB for MongoDB (vCore) küme sayfasına gidin.

3. MongoDB için Azure Cosmos DB (sanal çekirdek) kümesi sayfasında, Bağlantı dizeleri gezinti menüsü seçeneğini belirleyin.

   

4. Bağlantı dizesi alanındaki değeri kaydedin.

   

   Önemli

   Portaldaki bağlantı dizesi kullanıcı adı ve parola değerleri içermez. <user> ve <password> yer tutucuları, kümeyi ilk oluşturduğunuzda kullandığınız kimlik bilgileriyle değiştirmeniz gerekir.

5. Tümleşik geliştirme ortamınıza (IDE) geri dönün ve yeni bir terminal açın.

6. mongosh komutunu ve daha önce kaydettiğiniz bağlantı dizesini kullanarak MongoDB Kabuğunu başlatın. Kümeyi ilk oluştururken kullandığınız kimlik bilgileriyle <user> ve <password> yer tutucularını değiştirdiğinizden emin olun.

   mongosh "<mongodb-cluster-connection-string>"
   

   Not

   bağlantı dizesi için belirli değerleri kodlamanız gerekebilir. Bu örnekte kümenin msdocs-cosmos-tutorialadı , kullanıcı adı ve clusteradminparola ise şeklindedir P@ssw.rd. Parolada @ karakteri %40 kullanılarak kodlanması gerekir. Burada parolanın doğru kodlamasıyla örnek bir bağlantı dizesi sağlanır.

   CONNECTION_STRING=mongodb+srv://clusteradmin:P%40ssw.rd@msdocs-cosmos-tutorial.mongocluster.cosmos.azure.com/?tls=true&authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000
   

7. Kabuğun içinde aşağıdaki komutları çalıştırarak veritabanınızı oluşturun, koleksiyonunuzu oluşturun ve başlangıç verileriyle tohum oluşturun.

   use('cosmicworks');
   
   db.products.drop();
   
   db.products.insertMany([
     { name: "Confira Watch", category: "watches", price: 105.00 },
     { name: "Diannis Watch", category: "watches", price: 98.00, sale: true },
     { name: "Sterse Gloves", category: "gloves", price: 42.00 },
     { name: "Peache Sunglasses", category: "eyewear", price: 32.00, sale: false, sizes: [ "S", "M", "L" ] },
     { name: "Icento Pack", category: "bags", price: 58.00 },
     { name: "Iroowl Bracelet", category: "watches", price: 66.00 },
     { name: "Glaark Bag", category: "bags", price: 56.00, sale: true },
     { name: "Windry Mittens", category: "gloves", price: 35.00 },
     { name: "Tuvila Hat", category: "hats", price: 120.00 },
     { name: "Klinto Hat", category: "hats", subcategory: "hats-beanies", price: 65.00 }
   ]);
   
   db.products.find({});
   

8. Komutlar, yerel MongoDB koleksiyonundaki belgelerin listesiyle sonuçlanmalıdır. Çıktının kesilmiş bir örneği aşağıda verilmiştir.

   [
     {
       "_id": { "$oid": "640a146e89286b79b6628eef" },
       "name": "Confira Watch",
       "category": "watches",
       "price": 105
     },
     {
       "_id": { "$oid": "640a146e89286b79b6628ef0" },
       "name": "Diannis Watch",
       "category": "watches",
       "price": 98,
       "sale": true
     },
     ...
   ]
   

   Not

   Nesne kimlikleri (_id) rastgele oluşturulur ve bu kesilmiş örnek çıktıdan farklı olacaktır.

9. MongoDB kabuğundan çıkın.

   exit
   

10. İstemci/ dizinde yeni bir .env dosyası oluşturun.

11. client/.env dosyasında bu değer için bir ortam değişkeni ekleyin:

    Ortam değişkeni	Değer
    CONNECTION_STRING	Azure Cosmos DB (vCore) kümesi için MongoDB bağlantı dizesi. Mongo kabuğunda kullandığınız bağlantı dizesi kullanın.

    CONNECTION_STRING=<your-connection-string>
    

12. Terminalin bağlamını sunucu/klasör olarak değiştirerek, Node Paket Yöneticisi (npm) bağımlılıklarını yükleyerek ve ardından uygulamayı başlatarak uygulamanın veritabanı hizmetini kullandığını doğrulayın.

    cd server
    
    npm install
    
    npm start
    

13. API, bir dizi ürün belgesi döndürdüğünü doğrulamak için otomatik olarak bir tarayıcı penceresi açar.

14. Ek tarayıcı sekmesini/penceresini kapatın. Ardından terminali kapatın.

MERN uygulamasını Azure Uygulaması Hizmetine dağıtma

Uygulamanın uçtan uca çalıştığını kanıtlamak için hizmeti ve istemciyi Azure Uygulaması Hizmetine dağıtın. Ortam değişkenlerini kimlik bilgileri ve API uç noktalarıyla depolamak için web uygulamalarında gizli bilgileri kullanın.

1. Tümleşik geliştirme ortamınızda (IDE) yeni bir terminal açın.

2. resourceGroupName adlı önceden var olan kaynak grubunun adı için bir kabuk değişkeni oluşturun.

   # Variable for resource group name
   resourceGroupName="<existing-resource-group>"
   

3. serverAppName ve clientAppName adlı iki web uygulaması için kabuk değişkenleri oluşturun.

   # Variable for randomnly generated suffix
   let suffix=$RANDOM*$RANDOM
   
   # Variable for web app names with a randomnly generated suffix
   serverAppName="server-app-$suffix"
   clientAppName="client-app-$suffix"
   

4. Henüz yapmadıysanız komutunu kullanarak az login --use-device-code Azure CLI'da oturum açın.

5. Geçerli çalışma dizinini sunucu/yol olarak değiştirin.

   cd server
   

6. ile az webapp upMERN uygulamasının sunucu bileşeni için yeni bir web uygulaması oluşturun.

   az webapp up \
       --resource-group $resourceGroupName \
       --name $serverAppName \
       --sku F1 \
       --runtime "NODE|18-lts"
   

7. ile CONNECTION_STRINGadlı az webapp config connection-string set sunucu web uygulaması için yeni bir bağlantı dizesi ayarı oluşturun. Bu öğreticinin önceki bölümlerinde MongoDB kabuğu ve .env dosyasıyla kullandığınız bağlantı dizesi için aynı değeri kullanın.

   az webapp config connection-string set \
       --resource-group $resourceGroupName \
       --name $serverAppName \
       --connection-string-type custom \
       --settings "CONNECTION_STRING=<mongodb-connection-string>"
   

8. ile az webapp show sunucu web uygulamasının URI'sini alın ve d serverUri adlı bir kabuk değişkeninde depolayın.

   serverUri=$(az webapp show \
       --resource-group $resourceGroupName \
       --name $serverAppName \
       --query hostNames[0] \
       --output tsv)
   

9. NuGet'teki npx paket ve komut ile sunucu web uygulamasının open-cli URI'sini kullanarak bir tarayıcı penceresi açın. Sunucu uygulamasının MongoDB (sanal çekirdek) kümesinden JSON dizi verilerinizi döndürdüğünü doğrulayın.

   npx open-cli "https://$serverUri/products" --yes
   

   İpucu

   Bazen dağıtımlar zaman uyumsuz olarak tamamlanabilir. Beklediğiniz şeyi görmüyorsanız, bir dakika daha bekleyin ve tarayıcı pencerenizi yenileyin.

10. Çalışma dizinini istemci/yol olarak değiştirin.

    cd ../client
    

11. ile az webapp upMERN uygulamasının istemci bileşeni için yeni bir web uygulaması oluşturun.

    az webapp up \
        --resource-group $resourceGroupName \
        --name $clientAppName \
        --sku F1 \
        --runtime "NODE|18-lts"
    

12. ile REACT_APP_API_ENDPOINTadlı az webapp config appsettings set istemci web uygulaması için yeni bir uygulama ayarı oluşturun. serverUri kabuk değişkeninde depolanan sunucu API'sinin uç noktasını kullanın.

    az webapp config appsettings set \
        --resource-group $resourceGroupName \
        --name $clientAppName \
        --settings "REACT_APP_API_ENDPOINT=https://$serverUri"
    

13. ile az webapp show istemci web uygulamasının URI'sini alın ve d clientUri adlı bir kabuk değişkeninde depolayın.

    clientUri=$(az webapp show \
        --resource-group $resourceGroupName \
        --name $clientAppName \
        --query hostNames[0] \
        --output tsv)
    

14. NuGet'teki npx paketini ve komutunu, istemci web uygulaması için open-cli URI'siyle bir tarayıcı penceresi açmak amacıyla kullanın. İstemci uygulamasının sunucu uygulamasının API'sinden verileri işlediğini doğrulayın.

    npx open-cli "https://$clientUri" --yes
    

    İpucu

    Bazen dağıtımlar zaman uyumsuz olarak tamamlanabilir. Beklediğiniz şeyi görmüyorsanız, bir dakika daha bekleyin ve tarayıcı pencerenizi yenileyin.

15. Terminali kapatın.

Kaynakları temizleme

Kendi aboneliğinizde çalışırken, bir projenin sonunda artık ihtiyacınız olmayan kaynakları kaldırmak iyi bir fikirdir. Çalışır durumda bırakılan kaynaklar sana pahalıya mal olabilir. Kaynakları teker teker silebilir veya tüm kaynak grubunu silerek kaynak kümesinin tamamını kaldırabilirsiniz.

1. Kaynak grubunun tamamını silmek için kullanın az group delete.

   az group delete \
       --name $resourceGroupName \
       --yes
   

2. kaynak grubunun az group list kullanılarak silindiğini doğrulayın.

   az group list
   

Geliştirme ortamını temizleme

Ayrıca geliştirme ortamınızı temizlemek veya normal durumuna geri döndürmek isteyebilirsiniz.

GitHub Codespaces

GitHub Codespaces ortamını silmek, hesabınız için elde ettiğiniz ücretsiz çekirdek başına saat yetkilendirmesi miktarını en üst düzeye çıkarmanızı sağlar.

1. GitHub Codespaces panosunda (https://github.com/codespaces ) oturum açın.

2. GitHub deposundan azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app alınan şu anda aktif olan kod alanlarınızı bulun.

   

3. Codespace bağlam menüsünü açın ve sil'i seçin.

   

Visual Studio Code

Yerel ortamınızı temizlemeniz zorunlu değildir, ancak çalışan geliştirme kapsayıcısını durdurabilir ve yerel çalışma alanı bağlamında Visual Studio Code'u çalıştırmaya dönebilirsiniz.

1. Komut Paleti'ni açın, Geliştirme Kapsayıcıları komutlarını arayın ve Geliştirici Kapsayıcıları: Klasörü Yerel Olarak Yeniden Aç'ı seçin.

   

İpucu

Visual Studio Code, çalışan geliştirme kapsayıcısını durdurur, ancak kapsayıcı hala Docker'da durdurulmuş durumdadır. Yerel makinenizde daha fazla alan açmak için her zaman kapsayıcı örneğini, kapsayıcı görüntüsünü ve birimleri Docker'dan silme seçeneğiniz vardır.

Sonraki adım

MongoDB (sanal çekirdek) kümesi için ilk uygulamanızı oluşturduğunuza göre, verilerinizi Azure Cosmos DB'ye geçirmeyi öğrenin.

Verilerinizi geçirme