Oktatóanyag: Csatlakozás egy Node.js-webalkalmazást a MongoDB-hez készült Azure Cosmos DB-vel (virtuális mag)

A KÖVETKEZŐKRE VONATKOZIK: MongoDB virtuális mag

Ebben az oktatóanyagban egy Node.js webalkalmazást hoz létre, amely virtuális mag architektúrában csatlakozik az Azure Cosmos DB for MongoDB-hez. A MongoDB, Express, React.js, Node.js (MERN) verem számos modern webalkalmazás készítéséhez használt technológiák népszerű gyűjteménye. Az Azure Cosmos DB for MongoDB (vCore) használatával létrehozhat egy új webalkalmazást, vagy migrálhat egy meglévő alkalmazást a már ismert MongoDB-illesztőprogramokkal. Az oktatóanyag során az alábbi lépéseket fogja végrehajtani:

• Saját környezet beállítása
• A MERN-alkalmazás tesztelése helyi MongoDB-tárolóval
• A MERN-alkalmazás tesztelése virtuális magfürttel
• A MERN-alkalmazás üzembe helyezése a Azure-alkalmazás szolgáltatásban

Előfeltételek

Az oktatóanyag elvégzéséhez a következő erőforrásokra van szüksége:

• Egy meglévő virtuális magfürt.
• Egy GitHub-fiók.
  • A GitHub ingyenes codespaces órákkal rendelkezik minden felhasználó számára.

A fejlesztési környezet konfigurálása

A fejlesztési tárolókörnyezet minden olyan függőséggel elérhető, amely a projekt minden gyakorlatának elvégzéséhez szükséges. A fejlesztési tárolót a GitHub Codespacesben vagy helyileg a Visual Studio Code használatával futtathatja.

GitHub Codespaces

A GitHub Codespaces egy, a GitHub által felügyelt fejlesztői tárolót futtat a Webes Visual Studio Code-tal felhasználói felületként. A legegyszerűbb fejlesztési környezethez használja a GitHub Codespacest, hogy a megfelelő fejlesztői eszközök és függőségek legyenek előre telepítve a képzési modul elvégzéséhez.

Fontos

Minden GitHub-fiók legfeljebb 60 órán át használhatja a Codespace-eket havonta 2 magpéldánysal.

1. Indítsa el az új GitHub Codespace létrehozásának folyamatát a mainazure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub-adattár ágán.

   

2. A Kódtér létrehozása lapon tekintse át a kódtér konfigurációs beállításait, majd válassza az Új kódtér létrehozása lehetőséget

   

3. Várja meg, amíg a kódtér elindul. Ez az indítási folyamat eltarthat néhány percig.

4. Nyisson meg egy új terminált a kódtérben.

   Tipp.

   A főmenüben navigálhat a Terminál menüre, majd kiválaszthatja az Új terminál lehetőséget.

   

5. Ellenőrizze az oktatóanyagban használt eszközök verzióit.

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

   Feljegyzés

   Ez az oktatóanyag az egyes eszközök következő verzióit igényli, amelyek előre telepítve vannak a környezetben:

   Eszköz	Verzió
   Docker	≥ 20.10.0
   Node.js	≥ 18.0150
   NPM	≥ 9.5.0
   Azure CLI	≥ 2.46.0

6. Zárja be a terminált.

7. Az oktatóanyag további lépései ennek a fejlesztési tárolónak a kontextusában történnek.

Visual Studio Code

A Visual Studio Code Dev Containers bővítményéhez telepíteni kell a Dockert a helyi gépen. A bővítmény helyileg üzemelteti a fejlesztési tárolót a Docker-gazdagép használatával, a megfelelő fejlesztői eszközökkel és függőségekkel, előre telepítve a betanítási modul elvégzéséhez.

1. Nyissa meg a Visual Studio Code-ot egy üres könyvtár kontextusában.

2. Győződjön meg arról, hogy telepítve van a Dev Containers bővítmény a Visual Studio Code-ban.

3. Nyisson meg egy új terminált a szerkesztőben.

   Tipp.

   A főmenüben navigálhat a Terminál menüre, majd kiválaszthatja az Új terminál lehetőséget.

   

4. Klónozza a azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub-adattárat az aktuális könyvtárba.

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

5. Nyissa meg a parancskatalógust, keresse meg a Dev Containers parancsokat, majd válassza a Dev Containers: Újranyitás a tárolóban lehetőséget.

   

   Tipp.

   Előfordulhat, hogy a Visual Studio Code automatikusan megkéri, hogy nyissa meg újra a meglévő mappát egy fejlesztői tárolóban. Ez funkcionálisan egyenértékű azzal, hogy a parancskatalógus használatával újra megnyitja az aktuális munkaterületet egy tárolóban.

   

6. Ellenőrizze az oktatóanyagban használt eszközök verzióit.

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

   Feljegyzés

   Ez az oktatóanyag az egyes eszközök következő verzióit igényli, amelyek előre telepítve vannak a környezetben:

   Eszköz	Verzió
   Docker	≥ 20.10.0
   Node.js	≥ 18.0150
   NPM	≥ 9.5.0
   Azure CLI	≥ 2.46.0

7. Zárja be a terminált.

8. Az oktatóanyag további lépései ennek a fejlesztési tárolónak a kontextusában történnek.

A MERN-alkalmazás API-jának tesztelése a MongoDB-tárolóval

Először futtassa a mintaalkalmazás API-ját a helyi MongoDB-tárolóval annak ellenőrzéséhez, hogy az alkalmazás működik-e.

1. Futtasson egy MongoDB-tárolót a Dockerrel, és tegye közzé a tipikus MongoDB-portot (27017).

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

2. Az oldalsávon válassza a MongoDB-bővítményt.

   

3. Új kapcsolat hozzáadása a MongoDB-bővítményhez a kapcsolati sztring mongodb://localhosthasználatával.

   

4. Ha a kapcsolat sikeres, nyissa meg a data/products.mongodb playground fájlt.

5. A szkript végrehajtásához válassza az Összes futtatása ikont.

   

6. A játszótéri futtatásnak a helyi MongoDB-gyűjtemény dokumentumlistáját kell eredményeznie. Íme egy csonkolt példa a kimenetre.

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

   Feljegyzés

   Az objektumazonosítók (_id) véletlenszerűen jönnek létre, és eltérnek a csonkolt példakimenettől.

7. A kiszolgálón/ könyvtárban hozzon létre egy új .env fájlt.

8. A server/.env fájlban adjon hozzá egy környezeti változót ehhez az értékhez:

   Környezeti változó	Érték
   CONNECTION_STRING	Az Azure Cosmos DB for MongoDB (vCore) fürt kapcsolati sztring. Most használja a következőt: mongodb://localhost:27017?directConnection=true.

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

9. Módosítsa a terminál környezetét a kiszolgálóra/ mappára.

   cd server
   

10. Telepítse a függőségeket a Node Csomagkezelő (npm) szolgáltatásból.

    npm install
    

11. Indítsa el a Node.js > Express alkalmazást.

    npm start
    

12. Az API automatikusan megnyitja a böngészőablakot annak ellenőrzéséhez, hogy termékdokumentumok tömbje jelenik-e meg.

13. Zárja be az extra böngészőlapot/ablakot.

14. Zárja be a terminált.

A MERN-alkalmazás tesztelése az Azure Cosmos DB for MongoDB (vCore) fürttel

Most ellenőrizze, hogy az alkalmazás zökkenőmentesen működik-e a MongoDB-hez készült Azure Cosmos DB-vel (vCore). Ehhez a feladathoz töltse ki a már meglévő fürtöt magadatokkal a MongoDB-rendszerhéj használatával, majd frissítse az API kapcsolati sztring.

1. Jelentkezzen be az Azure Portalra (https://portal.azure.com).

2. Lépjen a mongoDB-hez készült Azure Cosmos DB (vCore) fürtlapjára.

3. Az Azure Cosmos DB for MongoDB (vCore) fürtlapján válassza a Csatlakozás ion sztringek navigációs menüjét.

   

4. Jegyezze fel a Csatlakozás ion karakterláncmező értékét.

   

   Fontos

   A portál kapcsolati sztring nem tartalmazzák a felhasználónevet és a jelszót. A helyőrzőket és a <user><password> helyőrzőket a fürt eredeti létrehozásakor használt hitelesítő adatokra kell cserélni.

5. Az integrált fejlesztési környezetben (IDE) belül nyisson meg egy új terminált.

6. Indítsa el a MongoDB Shellt a mongosh parancs és a korábban rögzített kapcsolati sztring használatával. Győződjön meg arról, hogy a <user> helyőrzőket lecseréli <password> a fürt eredeti létrehozásakor használt hitelesítő adatokra.

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

   Feljegyzés

   Előfordulhat, hogy a kapcsolati sztring meghatározott értékeit kell kódolnia. Ebben a példában a fürt msdocs-cosmos-tutorialneve, a felhasználónév clusteradminés a jelszó P@ssw.rd. A jelszóban a @ karaktert kódolni kell a következővel %40: . Itt egy példa kapcsolati sztring a jelszó helyes kódolásával.

   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. A rendszerhéjon belül futtassa az alábbi parancsokat az adatbázis létrehozásához, a gyűjtemény létrehozásához és a kezdőadatokkal való magvetéshez.

   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. A parancsoknak a helyi MongoDB-gyűjtemény dokumentumlistáját kell eredményeznie. Íme egy csonkolt példa a kimenetre.

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

   Feljegyzés

   Az objektumazonosítók (_id) véletlenszerűen jönnek létre, és eltérnek a csonkolt példakimenettől.

9. Lépjen ki a MongoDB-rendszerhéjból.

   exit
   

10. Az ügyfélben/ könyvtárban hozzon létre egy új .env fájlt.

11. Az ügyfél/.env fájlban adjon hozzá egy környezeti változót ehhez az értékhez:

    Környezeti változó	Érték
    CONNECTION_STRING	Az Azure Cosmos DB for MongoDB (vCore) fürt kapcsolati sztring. Használja ugyanazt a kapcsolati sztring, amelyet a mongo-felülettel használt.

    CONNECTION_STRING=<your-connection-string>
    

12. Ellenőrizze, hogy az alkalmazás az adatbázis-szolgáltatást használja-e a terminál környezetének kiszolgálóra/ mappára való módosításával, a node Csomagkezelő (npm) függőségeinek telepítésével, majd az alkalmazás elindításával.

    cd server
    
    npm install
    
    npm start
    

13. Az API automatikusan megnyitja a böngészőablakot annak ellenőrzéséhez, hogy termékdokumentumok tömbje jelenik-e meg.

14. Zárja be az extra böngészőlapot/ablakot. Ezután zárja be a terminált.

A MERN-alkalmazás üzembe helyezése a Azure-alkalmazás szolgáltatásban

Helyezze üzembe a szolgáltatást és az ügyfelet a Azure-alkalmazás szolgáltatásban, hogy bebizonyítsa, hogy az alkalmazás a végpontok között működik. Titkos kódok használata a webalkalmazásokban környezeti változók hitelesítő adatokkal és API-végpontokkal való tárolásához.

1. Az integrált fejlesztési környezetben (IDE) nyisson meg egy új terminált.

2. Hozzon létre egy rendszerhéjváltozót a resourceGroupName nevű , már meglévő erőforráscsoport nevéhez.

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

3. Hozzon létre rendszerhéjváltozókat a serverAppName és a clientAppName nevű két webalkalmazáshoz.

   # 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. Ha még nem tette meg, jelentkezzen be az Azure CLI-be a az login --use-device-code paranccsal.

5. Módosítsa az aktuális munkakönyvtárat a kiszolgálóra/ elérési útra.

   cd server
   

6. Hozzon létre egy új webalkalmazást a MERN-alkalmazás kiszolgálóösszetevője számára a következővel az webapp up: .

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

7. Hozzon létre egy új kapcsolati sztring beállítást a következővel elnevezett CONNECTION_STRING kiszolgálói webalkalmazáshozaz webapp config connection-string set: . Használja ugyanazt az értéket a MongoDB-felülettel és az .env fájllal korábban használt kapcsolati sztring.

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

8. Kérje le a kiszolgálói webalkalmazás URI-ját az webapp show , és tárolja egy d serverUri nevű rendszerhéjváltozóban.

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

9. open-cli A NuGet csomagjával és parancsával npx nyisson meg egy böngészőablakot a kiszolgáló webalkalmazás URI-jával. Ellenőrizze, hogy a kiszolgálóalkalmazás visszaadja-e a JSON-tömbadatokat a MongoDB -fürtből.

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

   Tipp.

   Néha az üzemelő példányok aszinkron módon fejeződhetnek be. Ha nem látja, amit vár, várjon még egy percet, és frissítse a böngészőablakot.

10. Módosítsa a munkakönyvtárat az ügyfélre/ elérési útra.

    cd ../client
    

11. Hozzon létre egy új webalkalmazást a MERN-alkalmazás ügyfélösszetevője számára a következővel az webapp up: .

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

12. Hozzon létre egy új alkalmazásbeállítást a következővel elnevezett REACT_APP_API_ENDPOINT ügyfél-webalkalmazáshoz az webapp config appsettings set: . Használja a serverUri rendszerhéj változójában tárolt kiszolgálói API-végpontot .

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

13. Kérje le az ügyfél-webalkalmazás URI-ját az webapp show , és tárolja egy d clientUri nevű rendszerhéjváltozóban.

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

14. open-cli A NuGet csomagjával és parancsával npx nyisson meg egy böngészőablakot az ügyfél webalkalmazás URI-jával. Ellenőrizze, hogy az ügyfélalkalmazás adatokat jelenít-e meg a kiszolgálóalkalmazás API-jából.

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

    Tipp.

    Néha az üzemelő példányok aszinkron módon fejeződhetnek be. Ha nem látja, amit vár, várjon még egy percet, és frissítse a böngészőablakot.

15. Zárja be a terminált.

Az erőforrások eltávolítása

Ha a saját előfizetésében dolgozik, a projekt végén célszerű eltávolítania a már nem szükséges erőforrásokat. A továbbra is futó erőforrások költségekkel járhatnak. Az erőforrásokat törölheti egyesével, vagy az erőforráscsoport törlésével eltávolíthatja a benne lévő összes erőforrást is.

1. A teljes erőforráscsoport törléséhez használja a következőt az group delete: .

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

2. Ellenőrizze, hogy az erőforráscsoport törölve lett-e a következővel az group list: .

   az group list
   

Fejlesztői környezet tisztítása

Emellett érdemes lehet megtisztítani a fejlesztői környezetet, vagy vissza kell állítani a jellemző állapotba.

GitHub Codespaces

A GitHub Codespaces-környezet törlése biztosítja, hogy maximálisan kihasználható legyen a fiókhoz tartozó ingyenes óránkénti jogosultság.

1. Jelentkezzen be a GitHub Codespaces irányítópultjára (https://github.com/codespaces).

2. Keresse meg a Jelenleg futó kódtereket a azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub-adattárból.

   

3. Nyissa meg a kódtér helyi menüjét, majd válassza a Törlés lehetőséget.

   

Visual Studio Code

Nem feltétlenül szükséges a helyi környezet megtisztítása, de leállíthatja a futó fejlesztési tárolót, és visszatérhet a Visual Studio Code futtatásához egy helyi munkaterület környezetében.

1. Nyissa meg a parancskatalógust, keresse meg a Dev Containers parancsokat, majd válassza a Dev Containers: Mappa helyi megnyitása lehetőséget.

   

Tipp.

A Visual Studio Code leállítja a futó fejlesztési tárolót, de a tároló továbbra is létezik a Dockerben leállított állapotban. A Dockerből bármikor törölheti a tárolópéldányt, a tárolólemezképet és a köteteket, hogy több helyet szabadítson fel a helyi gépen.

Következő lépés

Most, hogy elkészítette a MongoDB-fürthöz készült első alkalmazást, megtudhatja, hogyan migrálhatja az adatokat az Azure Cosmos DB-be.

Adatok áttelepítése