Distribuera Express.js MongoDB-app till App Service från Visual Studio Code

Artikel
12/03/2021
4 minuter för att läsa

Distribuera Express.js-programmet, som ansluter till MongoDB till Azure App Service (på Linux) och en Cosmos DB.

Programmeringsarbetet är klart åt dig. Den här självstudien fokuserar på att använda de lokala och fjärranslutna Azure-miljöerna från Visual Studio Code med Azure-tillägg.

Exempelkod

Främsta uppgifter

Den här självstudien innehåller flera viktiga Azure-uppgifter för JavaScript-utvecklare:

Skapa Cosmos DB som värd för MongoDB-databasen
Skapa App Service-resurs som värd Express.js app
Distribuera Express.js till App Service

Exempelprogram

Exempelappen Express.js består av följande element:

Express.js server som finns på port 8080
Enkel React.js på serversidans vymotor
Inbyggda API-funktioner i MongoDB för att infoga, ta bort och hitta data

Enkel Node.js som är ansluten till MongoDB-databasen.

Skapa eller använda en befintlig Azure-prenumeration

Ett Azure-konto med en aktiv prenumeration. Skapa en utan kostnad.

Installera programvara

Node.js 12 (LTS)och npm , Node.js installeras på den lokala datorn.
Visual Studio Code installerat på den lokala datorn.
Visual Studio Code-tillägg:
- Azure App Service för Visual Studio Code (installeras inifrån Visual Studio Code).
- Azure-databaser
- Azure-resurser

Skapa en Cosmos DB-databasresurs för MongoDB

Skapa en Cosmos-resurs först eftersom det tar flera minuter.

I Visual Studio Code väljer du Azure-ikonen på menyn längst till vänster och sedan avsnittet Databaser.

Om avsnittet Databaser inte visas kontrollerar du att du har markerat avsnittet på den översta Azure...-menyn.
I avsnittet Databaser i Azure Explorer väljer du din prenumeration med ett högerklick och väljer sedan Skapa server.
I kommandopaletten Skapa ny Azure Database Server väljer du Azure Cosmos DB för MongoDB API.

Följ anvisningarna i följande tabell för att förstå hur dina värden används. Det kan ta upp till 15 minuter att skapa databasen.

Egenskap	Värde
Ange ett globalt unikt kontonamn för den nya resursen.	Ange ett värde, till `cosmos-mongodb-YOUR-NAME` exempel , för din resurs. Ersätt `YOUR-NAME` med ditt namn eller unika ID. Det här unika namnet används också som en del av URL:en för att få åtkomst till resursen i en webbläsare.
Välj eller skapa en Resursgrupp.	Skapa en ny resursgrupp med namnet `js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE` .
Location	Platsen för resursen. För den här självstudien väljer du en regional plats nära dig.

Det kan ta upp till 15 minuter att skapa resursen. Du kan hoppa över nästa avsnitt om du är tidsbegränsad, men kom ihåg att gå tillbaka för att slutföra nästa avsnitt om några minuter.

Hämta Cosmos DB anslutningssträng

När du fortfarande är i Azure Databases Explorer högerklickar du på resursnamnet och väljer Kopiera anslutningssträng för att kopiera anslutningssträngen. Du behöver detta senare i självstudien för miljövariabelfilen.

Express.js webbappsformulär och dataresultat från lokal MongoDB.

Klona exempelappen Express.js exempelappen

Den Express.js webbappen tillhandahålls åt dig. Klona appen med git, installera sedan beroendena och kör appen.

Klona exempeldatabasen, installera beroendena och öppna sedan projektet i Visual Studio Code.

git clone https://github.com/Azure-Samples/js-e2e-express-mongo.git && \
cd js-e2e-express-mongo && \
npm install && \
code .

Redigera miljöfilen, .env , och lägg till egenskapen anslutningssträng för Cosmos DB som DATABASE_URL egenskapens värde.
```
DATABASE_URL=ADD-YOUR-CONNECTION-STRING_HERE
```
I Visual Studio Code öppnar du ett terminalfönster och kör följande kommandon för att installera exemplets beroenden och starta webbappen.
```
npm start
```
Visa webbappen på din lokala dator i en webbläsare.
```
http://localhost:8080/
```

Skapa webbappresurs och distribuera Express.js app

Använd tillägget Visual Studio Code för App Service för att skapa en App Service-resurs och distribuera Express.js-webbappen till resursen.

Navigera till Azure Explorer. Högerklicka på prenumerationen och välj Create new web app...(Advanced) sedan .

Följ anvisningarna i följande tabell för att förstå hur dina värden används.

Egenskap	Värde
Ange ett globalt unikt namn för den nya webbappen.	Ange ett värde, till `web-app-with-mongodb-YOUR-NAME` exempel , för din App Service-resurs. Ersätt `<YOUR-NAME>` med ditt namn eller unika ID. Det här unika namnet används också som en del av URL:en för att få åtkomst till resursen i en webbläsare.
Välj en resursgrupp för nya resurser.	Välj den resursgrupp som du skapade för Cosmos DB resurs, `js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE` , där du ersätter med ditt namn `YOUR-NAME-HERE` eller e-postalias.
Välj en körning för Linux-appen.	Välj `Node 12 LTS`.
Välj ett operativsystem.	Välj Linux.
Skapa en Linux App Service plan.	Skapa en ny tjänstplan med namnet `js-demo-mongodb-web-app-plan-YOUR-NAME-HERE` och ersätt med ditt namn eller `YOUR-NAME-HERE` e-postalias.
Välj en prisnivå	Kostnadsfri
Välj en programresurs Insights programresurs.	Hoppa över tills vidare.
Välj en plats för nya resurser.	Välj samma plats som du valde när du skapade Cosmos DB resurs och resursgrupp.

När processen för att skapa appen är klar visas ett statusmeddelande längst ned till höger i Visual Studio Code med ett val av Deploy eller View output . Välj Deploy.

Om statusmeddelandet inte längre visas kan du distribuera genom att välja Azure Explorer, högerklicka på resursnamnet och sedan välja Distribuera till webbapp....
Under distributionsprocessen kan du välja ett meddelande för att se utdatafönstret. Då visas den löpande statusen för distributionen.
När distributionen är klar visas ett meddelande. Välj Strömma loggar för att se rullande loggar.

Konfigurera App Service miljövariabel för databasanslutningssträng

Miljövariabeln DATABASE_URL , som lagrades lokalt i filen , .env har inte distribuerats till webbappen. Det beror på att den listas som en ignorerad fil i ./.vscode/settings.json filen:

{
    "appService.zipIgnorePattern": [
        "node_modules{,/**}",
        ".vscode{,/**}",
        ".env",
        "test{,/**}"
    ],
    "appService.deploySubpath": ".",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Välj Azure-ikonen i aktivitetsfältet och välj sedan din webbapp under App Service och prenumeration.
Högerklicka på Application Inställningar(Programinställningar) och välj sedan Add New Setting (Lägg till ny inställning).
Lägg till samma namn och värde från .env filen.

Inställningsnamn Värde

DATABASE_URL mongodb://...
Högerklicka på azure-webbappen och välj Starta om

Inställningsnamn	Värde
DATABASE_URL	mongodb://...

Visa din Azure-webbapp i en webbläsare

Öppna webbplatsen i en webbläsare och ersätt texten YOUR-RESOURCE_NAME med ditt eget resursnamn: https://YOUR-RESOURCE_NAME.azurewebsites.net .
Använd webbappen och lägg till och ta bort objekt.

Göra ändringar och omdistribuera

Gör några ändringar och distribuera om appen med apptjänsttillägget.

Rensa resurser

När du har slutfört den här självstudien tar du bort resurserna.

I Visual Studio Code använder du Azure Explorer för resursgrupper, högerklickar på resursgruppen, till exempel , ersätter med ditt namn eller e-postalias och js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE väljer sedan Ta YOUR-NAME-HEREjs-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE

Vill du veta mer

Azure App Service tillägg

Nästa steg

Fortsätt lära dig mer om App Service och Cosmos DB: