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

GÄLLER FÖR: MongoDB vCore

I den här självstudien skapar du en Node.js webbapp som ansluter till Azure Cosmos DB för MongoDB i arkitekturen för virtuell kärna. 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 virtuellt kärnkluster.
• 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

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.

   

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

   

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

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

   Dricks

   Du kan använda huvudmenyn för att navigera till menyalternativet Terminal och sedan välja alternativet 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 självstudien 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	≥ 2.46.0

6. Stäng terminalen.

7. De återstående stegen i den här självstudien sker i samband med den här utvecklingscontainern.

Visual Studio Code

Dev Containers-tillägget för Visual Studio Code kräver att Docker installeras på den lokala datorn. Tillägget är värd för utvecklingscontainern lokalt med Docker-värden med rätt utvecklarverktyg och beroenden förinstallerade för att slutföra den här utbildningsmodulen.

1. Öppna Visual Studio Code i kontexten för en tom katalog.

2. Kontrollera att tillägget Dev Containers är installerat i Visual Studio Code.

3. Öppna en ny terminal i redigeraren.

   Dricks

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

   

4. Klona GitHub-lagringsplatsen azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app till den aktuella katalogen.

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

5. Öppna kommandopaletten, sök efter Dev Containers-kommandona och välj sedan Dev Containers: Reopen in Container (Dev Containers: Reopen in Container).

   

   Dricks

   Visual Studio Code kan automatiskt uppmana dig att öppna den befintliga mappen i en utvecklingscontainer. Detta är funktionellt likvärdigt med att använda kommandopaletten för att öppna den aktuella arbetsytan igen i en container.

   

6. 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 självstudien 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	≥ 2.46.0

7. Stäng terminalen.

8. De återstående stegen i den här självstudien sker i samband med 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.

   

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

   

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.

   

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

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

   Kommentar

   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	Niska veze till Azure Cosmos DB for MongoDB-klustret (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 servern/ mappen.

   cd server
   

10. Installera beroendena från Node Upravljač za pakete (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-programmet med Azure Cosmos DB for MongoDB-klustret (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 niska veze.

1. Logga in på Azure-portalen (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 .

   

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

   

   Viktigt!

   Niska veze 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 niska veze som 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 niska veze. 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 niska veze 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 trunkerat exempel på utdata.

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

   Kommentar

   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	Niska veze till Azure Cosmos DB for MongoDB-klustret (vCore). Använd samma niska veze 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 Upravljač za pakete (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 servern/ sökvägen.

   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 niska veze inställning för serverwebbappen med namnet CONNECTION_STRING med az webapp config connection-string set. Använd samma värde för den niska veze 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
   

   Dricks

   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 klienten / sökvägen.

    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
    

    Dricks

    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 kostar 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.

GitHub Codespaces

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.

   

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

   

Visual Studio Code

Du behöver inte nödvändigtvis rensa din lokala miljö, men du kan stoppa utvecklingscontainern som körs och återgå till att köra Visual Studio Code i kontexten för en lokal arbetsyta.

1. Öppna kommandopaletten, sök efter Dev Containers-kommandona och välj sedan Dev Containers: Öppna mappen lokalt igen.

   

Dricks

Visual Studio Code stoppar utvecklingscontainern som körs, men containern finns fortfarande i Docker i ett stoppat tillstånd. Du har alltid möjlighet att ta bort containerinstansen, containeravbildningen och volymerna från Docker för att frigöra mer utrymme på den lokala datorn.

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