Oktatóanyag: Node.js-webalkalmazás csatlakoztatása a MongoDB-hez készült Azure Cosmos DB-hez (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.
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.
Indítsa el az új GitHub Codespace létrehozásának folyamatát a
main
azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app
GitHub-adattár ágán.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
Várja meg, amíg a kódtér elindul. Ez az indítási folyamat eltarthat néhány percig.
Nyisson meg egy új terminált a kódtérben.
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 Zárja be a terminált.
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.
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
Az oldalsávon válassza a MongoDB-bővítményt.
Új kapcsolat hozzáadása a MongoDB-bővítményhez a kapcsolati sztring
mongodb://localhost
használatával.Ha a kapcsolat sikeres, nyissa meg a data/products.mongodb playground fájlt.
A szkript végrehajtásához válassza az Összes futtatása ikont.
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.A kiszolgálón/ könyvtárban hozzon létre egy új .env fájlt.
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
Módosítsa a terminál környezetét a kiszolgálóra/ mappára.
cd server
Telepítse a függőségeket a Node Csomagkezelő (npm) szolgáltatásból.
npm install
Indítsa el a Node.js > Express alkalmazást.
npm start
Az API automatikusan megnyitja a böngészőablakot annak ellenőrzéséhez, hogy termékdokumentumok tömbje jelenik-e meg.
Zárja be az extra böngészőlapot/ablakot.
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.
Jelentkezzen be az Azure Portalra (https://portal.azure.com).
Lépjen a mongoDB-hez készült Azure Cosmos DB (vCore) fürtlapjára.
Az Azure Cosmos DB for MongoDB (vCore) fürtlapján válassza a Kapcsolati sztringek navigációs menüt.
Jegyezze fel a Kapcsolat sztring mező é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.Az integrált fejlesztési környezetben (IDE) belül nyisson meg egy új terminált.
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-tutorial
neve, a felhasználónévclusteradmin
é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
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({});
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.Lépjen ki a MongoDB-rendszerhéjból.
exit
Az ügyfélben/ könyvtárban hozzon létre egy új .env fájlt.
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>
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
Az API automatikusan megnyitja a böngészőablakot annak ellenőrzéséhez, hogy termékdokumentumok tömbje jelenik-e meg.
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.
Az integrált fejlesztési környezetben (IDE) nyisson meg egy új terminált.
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>"
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"
Ha még nem tette meg, jelentkezzen be az Azure CLI-be a
az login --use-device-code
paranccsal.Módosítsa az aktuális munkakönyvtárat a kiszolgálóra/ elérési útra.
cd server
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"
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>"
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)
open-cli
A NuGet csomagjával és parancsávalnpx
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.
Módosítsa a munkakönyvtárat az ügyfélre/ elérési útra.
cd ../client
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"
Hozzon létre egy új alkalmazásbeállítást a következővel elnevezett
REACT_APP_API_ENDPOINT
ügyfél-webalkalmazáshozaz 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"
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)
open-cli
A NuGet csomagjával és parancsávalnpx
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.
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.
A teljes erőforráscsoport törléséhez használja a következőt
az group delete
: .az group delete \ --name $resourceGroupName \ --yes
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.
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.
Jelentkezzen be a GitHub Codespaces irányítópultjára (https://github.com/codespaces).
Keresse meg a Jelenleg futó kódtereket a
azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app
GitHub-adattárból.Nyissa meg a kódtér helyi menüjét, majd válassza a Törlés lehetőséget.
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.