Öğretici: MongoDB için Azure Cosmos DB ile Node.js bir web uygulaması bağlama (sanal çekirdek)

Ş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ı yaptı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 sanal çekirdek 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

Geliştirme kapsayıcısı ortamı, bu projedeki her alıştırmayı tamamlamak için gereken tüm bağımlılıklarla kullanılabilir. 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. GitHub deposunun dalında azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app yeni bir GitHub Codespace main 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.

   İpucu

   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 (sanal çekirdek) 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 MongoDB için Azure Cosmos DB (sanal çekirdek) 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. Değeri Bağlantı dizesi alanından kaydedin.

   

   Önemli

   Portaldaki bağlantı dizesi kullanıcı adı ve parola değerleri içermez. ve <password> yer tutucularını, kümeyi <user> 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. Komutunu ve daha önce kaydettiğiniz bağlantı dizesi kullanarak mongosh MongoDB Kabuğunu başlatın. ve <password> yer tutucularını, kümeyi <user> ilk oluştururken kullandığınız kimlik bilgileriyle 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 karakterin @ kullanılarak %40kodlanması 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	MongoDB için Azure Cosmos DB (sanal çekirdek) kümesine 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. Kimlik bilgileri ve API uç noktalarıyla ortam değişkenlerini depolamak için web uygulamalarında gizli dizileri 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 az webapp config connection-string setadlı CONNECTION_STRING 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. Sunucu web uygulamasının open-cli URI'sini kullanarak bir tarayıcı penceresi açmak için Ile NuGet'teki npx paket ve komutu kullanı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 az webapp config appsettings setadlı REACT_APP_API_ENDPOINT 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. İstemci web uygulamasının open-cli URI'sini kullanarak bir tarayıcı penceresi açmak için ile NuGet'teki npx paket ve komutu 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 maliyetlerin artmasına neden 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 kullanılarak az group listsilindiğ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 çalışan 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ı temizlemek için gerekli olmayabilir, ancak çalışan geliştirme kapsayıcısını durdurabilir ve yerel çalışma alanı bağlamında çalışan Visual Studio Code'a 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