Dela via

Självstudie: Ansluta en Node.js-webbapp med Azure Cosmos DB för MongoDB (vCore)

GÄLLER FÖR: MongoDB vCore

I den här handledningen skapar du en Node.js-webbapplikation som ansluter till Azure Cosmos DB för MongoDB med virtuell kärna-arkitektur. Stacken MongoDB, Express, React.js, Node.js (MERN) är en populär samling tekniker som används för att skapa många moderna webbprogram. Med Azure Cosmos DB for MongoDB (vCore) kan du skapa ett nytt webbprogram eller migrera ett befintligt program med mongoDB-drivrutiner som du redan är bekant med. I den här kursen får du:

  • Konfigurera din miljö
  • Testa MERN-programmet med en lokal MongoDB-container
  • Testa MERN-programmet med ett virtuellt kärnkluster
  • Distribuera MERN-programmet till Azure App Service

Förutsättningar

För att slutföra den här självstudien behöver du följande resurser:

  • Ett befintligt vCore-kluster.
  • Ett GitHub-konto.
    • GitHub levereras med kostnadsfria Codespaces-timmar för alla användare.

Konfigurera utvecklingsmiljön

En utvecklingscontainermiljö är tillgänglig med alla beroenden som krävs för att slutföra varje övning i det här projektet. Du kan köra utvecklingscontainern i GitHub Codespaces eller lokalt med hjälp av Visual Studio Code.

GitHub Codespaces kör en utvecklingscontainer som hanteras av GitHub med Visual Studio Code för webben som användargränssnitt. För den enklaste utvecklingsmiljön använder du GitHub Codespaces så att du har rätt utvecklarverktyg och beroenden förinstallerade för att slutföra den här utbildningsmodulen.

Viktigt!

Alla GitHub-konton kan använda Codespaces i upp till 60 timmar kostnadsfritt varje månad med 2 kärninstanser.

  1. Starta processen för att skapa ett nytt GitHub Codespace på grenen main av azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub-lagringsplatsen.

    Öppna i GitHub Codespaces

  2. På sidan Skapa kodområde granskar du konfigurationsinställningarna för kodområdet och väljer sedan Skapa nytt kodområde

    Skärmbild av bekräftelseskärmen innan du skapar ett nytt kodområde.

  3. Vänta tills kodområdet startar. Den här startprocessen kan ta några minuter.

  4. Öppna en ny terminal i kodområdet.

    Tips

    Du kan använda huvudmenyn för att navigera till menyalternativet Terminal och sedan välja alternativet Ny terminal .

    Skärmbild av menyalternativet codespaces för att öppna en ny terminal.

  5. Kontrollera versionerna av de verktyg som du använder i den här självstudien.

    docker --version

node --version

npm --version

az --version

    Kommentar

    Den här handledningen kräver följande versioner av varje verktyg som är förinstallerade i din miljö.

    Verktyg Version
    Docker ≥ 20.10.0
    Node.js ≥ 18.0150
    NPM ≥ 9.5.0
    Azure CLI (kommandoradsgränssnittet för Azure) ≥ 2.46.0

  6. Stäng terminalen.

  7. De återstående stegen i den här handledningen sker i kontexten av den här utvecklingscontainern.

Testa MERN-programmets API med MongoDB-containern

Börja med att köra exempelprogrammets API med den lokala MongoDB-containern för att verifiera att programmet fungerar.

  1. Kör en MongoDB-container med Docker och publicera den typiska MongoDB-porten (27017).

    docker pull mongo:6.0

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

  2. I sidofältet väljer du MongoDB-tillägget.

    Skärmbild av MongoDB-tillägget i sidofältet.

  3. Lägg till en ny anslutning till MongoDB-tillägget med hjälp av anslutningssträng mongodb://localhost.

    Skärmbild av knappen Lägg till anslutning i MongoDB-tillägget.

  4. När anslutningen är klar öppnar du filen data/products.mongodb playground.

  5. Välj ikonen Kör alla för att köra skriptet.

    Skärmbild av knappen Kör alla i en lekplats för MongoDB-tillägget.

  6. Lekplatskörningen bör resultera i en lista över dokument i den lokala MongoDB-samlingen. Här är ett trunkerat exempel på resultat.

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

    Anteckning

    Objekt-ID:n (_id) genereras slumpmässigt och skiljer sig från dessa trunkerade exempelutdata.

  7. Skapa en ny .env-fil i katalogen server/.

  8. I filen server/.env lägger du till en miljövariabel för det här värdet:

    Miljövariabel Värde
    CONNECTION_STRING Anslutningssträngen till Azure Cosmos DB for MongoDB-kluster (vCore). Använd mongodb://localhost:27017?directConnection=true så länge. 
    CONNECTION_STRING=mongodb://localhost:27017?directConnection=true

  9. Ändra kontexten för terminalen till server/-mappen.

    cd server

  10. Installera beroendena från Node Package Manager (npm).

    npm install

  11. Starta Node.js & Express-programmet.

    npm start

  12. API:et öppnar automatiskt ett webbläsarfönster för att kontrollera att det returnerar en matris med produktdokument.

  13. Stäng den extra webbläsarfliken/fönstret.

  14. Stäng terminalen.

Testa MERN-applikationen med Azure Cosmos DB för MongoDB-kluster (vCore)

Nu ska vi kontrollera att programmet fungerar sömlöst med Azure Cosmos DB for MongoDB (vCore). För den här uppgiften fyller du i det befintliga klustret med startdata med Hjälp av MongoDB-gränssnittet och uppdaterar sedan API:ets anslutningssträng.

  1. Logga in på Azure Portal (https://portal.azure.com).

  2. Gå till den befintliga klustersidan för Azure Cosmos DB for MongoDB (vCore).

  3. På klustersidan azure Cosmos DB for MongoDB (vCore) väljer du navigeringsmenyalternativet Anslutningssträngar .

    Skärmbild av alternativet anslutningssträngar på klustersidan.

  4. Registrera värdet från fältet Anslutningssträng .

    Skärmbild av anslutningssträngens inloggningsuppgifter för ett kluster.

    Viktigt!

    Anslutningssträng i portalen innehåller inte värdena för användarnamn och lösenord. Du måste ersätta <user> platshållarna och <password> med de autentiseringsuppgifter som du använde när du ursprungligen skapade klustret.

  5. Tillbaka i din integrerade utvecklingsmiljö (IDE) öppnar du en ny terminal.

  6. Starta MongoDB Shell med kommandot mongosh och anslutningssträng du spelade in tidigare. Se till att du ersätter <user> platshållarna och <password> med de autentiseringsuppgifter som du använde när du ursprungligen skapade klustret.

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

    Kommentar

    Du kan behöva koda specifika värden för anslutningssträng. I det här exemplet är msdocs-cosmos-tutorialnamnet på klustret , användarnamnet är clusteradminoch lösenordet är P@ssw.rd. I lösenordet @ måste tecknet kodas med .%40 Ett exempel anslutningssträng anges här med rätt kodning av lösenordet.

    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. I gränssnittet kör du följande kommandon för att skapa databasen, skapa din samling och seeda med startdata.

    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. Kommandona bör resultera i en lista med dokument i den lokala MongoDB-samlingen. Här är ett förkortat exempel på resultatet.

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

    Anteckning

    Objekt-ID:n (_id) genereras slumpmässigt och skiljer sig från dessa trunkerade exempelutdata.

  9. Avsluta MongoDB-gränssnittet.

    exit

  10. Skapa en ny .env-fil i katalogen client/.

  11. I filen client/.env lägger du till en miljövariabel för det här värdet:

    Miljövariabel Värde
    CONNECTION_STRING Anslutningssträng till Azure Cosmos DB for MongoDB-klustret (vCore). Använd samma anslutningssträng som du använde med mongo-gränssnittet. 
    CONNECTION_STRING=<your-connection-string>

  12. Kontrollera att programmet använder databastjänsten genom att ändra terminalens kontext till servern/ mappen, installera beroenden från Node Package Manager (npm) och sedan starta programmet.

    cd server

npm install

npm start

  13. API:et öppnar automatiskt ett webbläsarfönster för att kontrollera att det returnerar en matris med produktdokument.

  14. Stäng den extra webbläsarfliken/fönstret. Stäng sedan terminalen.

Distribuera MERN-programmet till Azure App Service

Distribuera tjänsten och klienten till Azure App Service för att bevisa att programmet fungerar från slutpunkt till slutpunkt. Använd hemligheter i webbapparna för att lagra miljövariabler med autentiseringsuppgifter och API-slutpunkter.

  1. Öppna en ny terminal i din integrerade utvecklingsmiljö (IDE).

  2. Skapa en gränssnittsvariabel för namnet på den befintliga resursgruppen med namnet resourceGroupName.

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

  3. Skapa gränssnittsvariabler för de två webbapparna med namnet serverAppName och clientAppName.

    # 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. Om du inte redan har gjort det loggar du in på Azure CLI med kommandot az login --use-device-code .

  5. Ändra den aktuella arbetskatalogen till sökvägen server/.

    cd server

  6. Skapa en ny webbapp för serverkomponenten i MERN-programmet med az webapp up.

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

  7. Skapa en ny anslutningssträng inställning för serverwebbappen med namnet CONNECTION_STRING med az webapp config connection-string set. Använd samma värde för den anslutningssträng som du använde med MongoDB-gränssnittet och .env-filen tidigare i den här självstudien.

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

  8. Hämta URI:n för serverwebbappen med az webapp show och lagra den i ett gränssnittsvariabelnamn d serverUri.

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

  9. open-cli Använd paketet och kommandot från NuGet med npx för att öppna ett webbläsarfönster med hjälp av URI:n för serverwebbappen. Kontrollera att serverappen returnerar dina JSON-matrisdata från MongoDB-klustret (vCore).

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

    Tips

    Ibland kan distributioner slutföras asynkront. Om du inte ser det du förväntar dig väntar du ytterligare en minut och uppdaterar webbläsarfönstret.

  10. Ändra arbetskatalogen till sökvägen client/.

    cd ../client

  11. Skapa en ny webbapp för klientkomponenten i MERN-programmet med az webapp up.

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

  12. Skapa en ny appinställning för klientwebbappen med namnet REACT_APP_API_ENDPOINT med az webapp config appsettings set. Använd server-API-slutpunkten som lagras i serverUri-gränssnittsvariabeln.

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

  13. Hämta URI:n för klientwebbappen med az webapp show och lagra den i ett gränssnittsvariabelnamn d clientUri.

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

  14. open-cli Använd paketet och kommandot från NuGet med npx för att öppna ett webbläsarfönster med hjälp av URI:n för klientwebbappen. Kontrollera att klientappen återger data från serverappens API.

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

    Tips

    Ibland kan distributioner slutföras asynkront. Om du inte ser det du förväntar dig väntar du ytterligare en minut och uppdaterar webbläsarfönstret.

  15. Stäng terminalen.

Rensa resurser

När du arbetar i din egen prenumeration i slutet av ett projekt är det en bra idé att ta bort de resurser som du inte längre behöver. Resurser som fortsätter att köras kan kosta dig pengar. Du kan ta bort enstaka resurser eller hela resursgruppen om du vill ta bort alla resurser.

  1. Om du vill ta bort hela resursgruppen använder du az group delete.

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

  2. Kontrollera att resursgruppen tas bort med hjälp av az group list.

    az group list

Rensa utvecklingsmiljön

Du kanske också vill rensa utvecklingsmiljön eller återställa den till dess typiska tillstånd.

Om du tar bort GitHub Codespaces-miljön kan du maximera mängden kostnadsfria timmar per kärna som du får för ditt konto.

  1. Logga in på GitHub Codespaces-instrumentpanelen (https://github.com/codespaces).

  2. Leta upp de kodområden som körs från azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub-lagringsplatsen.

    Skärmbild av alla kodområden som körs, inklusive deras status och mallar.

  3. Öppna snabbmenyn för kodområdet och välj sedan Ta bort.

    Skärmbild av snabbmenyn för ett enda kodområde med borttagningsalternativet markerat.

Gå vidare

Nu när du har skapat ditt första program för MongoDB-klustret (vCore) lär du dig hur du migrerar dina data till Azure Cosmos DB.

Migrera dina data