Oktatóanyag: Node.js-webalkalmazás csatlakoztatása az Azure DocumentDB-hez

Ebben az oktatóanyagban létrehoz egy Node.js webalkalmazást, amely csatlakozik az Azure DocumentDB-hez. A MongoDB, Express, React.js, Node.js (MERN) stack a modern webalkalmazások fejlesztésére használt népszerű technológiagyűjtemény. Az Azure DocumentDB-vel létrehozhat egy új webalkalmazást, vagy migrálhat egy meglévő alkalmazást a már ismert MongoDB-illesztőprogramokkal. Ebben az útmutatóban Ön:

• 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 klaszterrel
• A MERN-alkalmazás üzembe helyezése az Azure App Service-ben

Előfeltételek

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

• Azure-előfizetés

  • Ha nem rendelkezik Azure-előfizetéssel, hozzon létre egy ingyenes fiókot

• Meglévő Azure DocumentDB-fürt

  • Ha nincs klasztere, hozzon létre egy új klasztert

• GitHub-fiók GitHub Codespaces-jogosultsággal

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 két alapvető példánnyal.

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

   

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

   Képernyőkép a megerősítő képernyőről egy új codespace létrehozása előtt.

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

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

   Jótanács

   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
   

   Megjegyzé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:

   Tool	verzió
   Kikötőmunkás	≥ 20.10.0
   Node.js	≥ 18.0150
   npm	≥ 9.5.0
   Azure CLI (Az Azure parancssori felülete)	≥ 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 Dev Containers bővítmény a Visual Studio Code-hoz megköveteli, hogy a Docker telepítve legyen 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.

   Jótanács

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

   Képernyőkép az új terminál megnyitására vonatkozó menübeállításról.

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.

   

   Jótanács

   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 a lépés funkcionálisan egyenértékű a parancskatalógus használatával a tároló aktuális munkaterületének újbóli megnyitásához.

   

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

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

   Megjegyzé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:

   Tool	verzió
   Kikötőmunkás	≥ 20.10.0
   Node.js	≥ 18.0150
   npm	≥ 9.5.0
   Azure CLI (Az Azure parancssori felülete)	≥ 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. Adjon hozzá új kapcsolatot 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ér futtatásának a helyi MongoDB-gyűjteményben lévő dokumentumok listá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
     },
     ...
   ]
   

   Megjegyzé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 DocumentDB-klaszter kapcsolati karakterlánca. Egyelőre használja mongodb://localhost:27017?directConnection=true.

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

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

   cd server
   

10. Telepítse a függőségeket a Node Package Managerből (npm).

    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 DocumentDB-fürttel

Most ellenőrizze, hogy az alkalmazás zökkenőmentesen működik-e az Azure DocumentDB-vel. Ehhez a feladathoz töltse ki a meglévő fürtöt magadattal a MongoDB shell használatával, majd frissítse az API kapcsolati sztringjét.

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

2. Lépjen a meglévő Azure DocumentDB-klaszter oldalára.

3. Az Azure DocumentDB-fürt lapján válassza a kapcsolati karaktersorok menü opciót.

   

4. Jegyezze fel a Kapcsolat sztring mező értékét.

   

   Fontos

   A portál kapcsolati sztringje nem tartalmazza a felhasználónevet és a jelszót. A <user> és <password> helyőrzőket azokra a hitelesítő adatokra kell cserélni, amelyeket eredetileg a fürt létrehozásakor használt.

5. Nyisson meg egy új terminált az integrált fejlesztési környezetben (IDE).

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

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

   Megjegyzés:

   A kapcsolati sztring adott értékeit is kódolnia kell. Ebben a példában a fürt msdocs-azure-documentdb-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 található a jelszó helyes kódolásával.

   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. 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
     },
     ...
   ]
   

   Megjegyzé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 DocumentDB-fürt kapcsolati karakterlánca. Használja ugyanazt a kapcsolati karakterláncot, amelyet a mongo konzollal 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 Package Manager (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 az Azure App Service-ben

Annak bizonyítása, hogy az alkalmazás a szolgáltatás és az ügyfél Azure App Service-ben való üzembe helyezésével a végpontok közötti működést biztosítja. 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éj-változót egy létező "resourceGroupName" nevű 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ó/ útvonalra.

   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 karakterlánc beállítást a szerver webalkalmazáshoz CONNECTION_STRINGaz webapp config connection-string set. Használja ugyanazt az értéket a MongoDB shellhez és a .env fájlhoz használt kapcsolati sztringhez az oktatóanyag korábbi részében.

   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ömb adatait a fürtből.

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

   Jótanács

   Néha az üzembe helyezések aszinkron 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 a client/ útvonalra.

    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óban tárolt kiszolgáló API-végpontot.

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

13. Kérje be az ügyfélalkalmazás URI-ját a az webapp show segítségével, és tárolja el egy d clientUri nevű shell-vá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
    

    Jótanács

    Néha a telepítések aszinkron módon befejeződhetnek. 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.

Erőforrások tisztítása

Ha a saját előfizetésedben dolgozol, a projekt végén célszerű eltávolítani azokat az erőforrásokat, amelyekre már nincs szükséged. A továbbra is futó erőforrások pénzbe kerülhetnek. 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ési 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ó fejlesztői tárolót, amely a azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub-adattárból származik.

   

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

   Képernyőkép egyetlen kódtér helyi menüjéről, amelyen a törlési lehetőség ki van emelve.

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 Parancspalettát, keresse meg a Dev Containers parancsokat, majd válassza a Dev Containers: Mappa újramegnyitása helyben lehetőséget.

   

Jótanács

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állt állapotban. A tárolópéldányt, a tárolórendszerképet és a köteteket bármikor törölheti a Dockerből, hogy több helyet szabadítson fel a helyi gépen.

Következő lépés

Adatok migrálása