Öğretici: Azure DocumentDB ile Node.js web uygulaması bağlama

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

• Ortamınızı ayarlama
• MERN uygulamasını yerel mongoDB kapsayıcısıyla test edin
• MERN uygulamasını bir kümeyle test edin
• MERN uygulamasını Azure App Service'e dağıtma

Önkoşullar

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

• Azure aboneliği

  • Azure aboneliğiniz yoksa ücretsiz bir hesap oluşturun

• Mevcut bir Azure DocumentDB kümesi

  • Kümeniz yoksa yeni bir küme oluşturun

• GitHub Codespaces yetkilendirmesi olan bir GitHub hesabı

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

Geliştirme konteyner ortamı, bu projedeki her alıştırmayı tamamlamak için gereken tüm bağımlılıkları içermektedir. 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'ı iki çekirdek örneğiyle her ay 60 saate kadar ücretsiz olarak kullanabilir.

1. Yeni bir GitHub Codespace oluşturma işlemini, main dalında, azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub deposu üzerinde 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

   Yeni bir kod alanı oluşturmadan önceki onay ekranının ekran görüntüsü.

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.

   Tip

   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
   

   Uyarı

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

   Tool	Sürüm
   Docker	≥ 20.10.0
   Node.js	≥ 18.0150
   npm	≥ 9.5.0
   Azure Komut Satırı Arayüzü (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 Dev Containers uzantısı, yerel makinenize Docker'ın yüklenmiş olmasını gerektirir. Uzantı, doğru geliştirici araçları ve bağımlılıkları önceden yüklenmiş Docker ana bilgisayarını kullanarak bu eğitim modülünü tamamlamak için 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.

   Tip

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

   Yeni bir terminal açmak için menü seçeneğinin ekran görüntüsü.

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.

   

   Tip

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

   

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

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

   Uyarı

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

   Tool	Sürüm
   Docker	≥ 20.10.0
   Node.js	≥ 18.0150
   npm	≥ 9.5.0
   Azure Komut Satırı Arayüzü (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ı dizesini 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ının çalıştırılması, yerel MongoDB koleksiyonundaki belgelerin bir listesiyle sonuçlanmalıdır. İşte çıktının kısaltılmış bir örneği.

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

   Uyarı

   Nesne tanımlayıcıları (_id) rastgele oluşturulur ve bu kesilmiş örnek çıktıdan farklıdı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	Azure DocumentDB kümesine bağlantı dizesi. Şimdilik kullanın mongodb://localhost:27017?directConnection=true.

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

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

   cd server
   

10. Node Package Manager'dan (npm) bağımlılıkları yükleyin.

    npm install
    

11. Node.js ve 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ı Azure DocumentDB kümesiyle test edin

Şimdi uygulamanın Azure DocumentDB 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ı dizesini güncelleştirin.

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

2. Mevcut Azure DocumentDB kümesi sayfasına gidin.

3. Azure DocumentDB 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ğerlerini içermez. <user> ve <password> yer tutucularını, kümeyi ilk oluşturduğunuzda kullandığınız kimlik bilgileriyle değiştirmeniz gerekir.

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

6. Daha önce kaydettiğiniz bağlantı dizesi ile mongosh komutunu kullanarak MongoDB Kabuğu'nu başlatın. Kümeyi ilk oluşturduğunuzda kullandığınız kimlik bilgileriyle <user> ve <password> yer tutucularını değiştirdiğinizden emin olun.

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

   Uyarı

   Bağlantı dizesi için belirli değerleri kodlamanız gerekebilir. Bu örnekte kümenin msdocs-azure-documentdb-tutorialadı , kullanıcı adı ve clusteradminparola ise şeklindedir P@ssw.rd. Parolada @ karakterinin %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-azure-documentdb-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 kısaltılmış 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
     },
     ...
   ]
   

   Uyarı

   Nesne tanımlayıcıları (_id) rastgele oluşturulur ve bu kesilmiş örnek çıktıdan farklıdı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 DocumentDB kümesine bağlantı dizesi. Mongo kabuğuyla kullandığınız bağlantı dizesini kullanın.

    CONNECTION_STRING=<your-connection-string>
    

12. Terminalin bağlamını sunucu/ klasör olarak değiştirerek, Node Package Manager'dan (npm) bağımlılıkları 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 App Service'e dağıtma

Hizmeti ve istemciyi Azure App Service'e dağıtarak uygulamanın uçtan uca çalıştığını kanıtlayın. Web uygulamalarında kimlik bilgileri ve API uç noktalarıyla ortam değişkenlerini depolamak için 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ı ile 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 komutunu kullanarak sunucu web uygulamasının open-cli URI'si ile bir tarayıcı penceresi açın. Sunucu uygulamasının kümeden JSON dizi verilerinizi döndürdüğünü doğrulayın.

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

   Tip

   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. İstemci web uygulamasının open-cli URI'sini kullanarak bir tarayıcı penceresi açmak için NuGet'teki npx paketini ve komutunu 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
    

    Tip

    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ı temizle

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ı tek tek silebilir veya kaynak grubunu silip kaynak kümesinin tamamını silebilirsiniz.

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 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. Şu anda çalışmakta olan geliştirme kapsayıcınızı azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub deposundan kaynaklanmış olarak bulun.

   

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

   Silme seçeneğinin vurgulandığı tek bir kod alanının bağlam menüsünün ekran görüntüsü.

Visual Studio Code

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

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

   

Tip

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

Sonraki adım

Verilerinizi taşıma