Een Express.js MongoDB-app implementeren naar App Service van Visual Studio Code

  • Artikel
  • 5 minuten om te lezen

Implementeer de Express.js toepassing, die verbinding maakt met MongoDB met Azure App Service (in Linux) en een Cosmos DB.

Het programmeerwerk wordt voor u uitgevoerd. Deze zelfstudie is gericht op het gebruik van de lokale en externe Azure-omgevingen vanuit Visual Studio Code met Azure-extensies.

Belangrijkste taken

Deze zelfstudie bevat verschillende Azure-taken voor JavaScript-ontwikkelaars:

  • Een Cosmos DB maken voor het hosten van mongoDB-database
  • App Service-resource maken om de app Express.js hosten
  • Een Express.js app implementeren in App Service

Voorbeeldtoepassing

De voorbeeld-Express.js-app bestaat uit de volgende elementen:

  • Express.js server gehost op poort 8080
  • Eenvoudige React.js weergave-engine aan serverzijde
  • Systeemeigen MongoDB-API-functies voor het invoegen, verwijderen en zoeken van gegevens

Eenvoudige Node.js-app die is verbonden met de MongoDB-database.

Bestaand Azure-abonnement maken of gebruiken

Software installeren

Een databaseresource Cosmos DB MongoDB maken

Maak eerst een Cosmos-resource, omdat dit enkele minuten duurt.

  1. Selecteer Visual Studio Code het pictogram Azure in het menu links en selecteer vervolgens de sectie Databases.

    Als de sectie Databases niet zichtbaar is, controleert u of u de sectie in het bovenste menu van Azure ... hebt gecontroleerd.

    Gedeeltelijke schermopname van Visual Studio van de externe container van code

  2. Selecteer in de sectie Databases van Azure Explorer uw abonnement met de rechtermuisknop en selecteer vervolgens Server maken.

  3. Selecteer in het opdrachtenpalet Nieuwe Azure Database Server maken de Azure Cosmos DB mongoDB-API.

  4. Volg de aanwijzingen in de volgende tabel om te begrijpen hoe uw waarden worden gebruikt. Het maken van de database kan tot 15 minuten duren.

    Eigenschap Waarde
    Voer een wereldwijd unieke accountnaam in voor de nieuwe resource. Voer een waarde in, zoals cosmos-mongodb-YOUR-NAME , voor uw resource. Vervang YOUR-NAME door uw naam of unieke id. Deze unieke naam wordt ook gebruikt als onderdeel van de URL voor toegang tot de resource in een browser.
    Selecteer of maak een resourcegroep. Maak een nieuwe resourcegroep met de naam js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE .
    Locatie De locatie van de resource. Voor deze zelfstudie selecteert u een regionale locatie bij u in de buurt.

    Het maken van de resource kan tot 15 minuten duren. U kunt de volgende sectie overslaan als u tijdsbeperking hebt, maar vergeet niet om terug te gaan om deze volgende sectie over enkele minuten te voltooien.

De Cosmos DB connection string

Klik in de verkenner van Azure Databases met de rechtermuisknop op de resourcenaam en selecteer Verbindingsreeks kopiëren om de verbindingsreeks te connection string. U hebt deze later in de zelfstudie nodig voor uw omgevingsvariabelebestand.

Express.js web-appformulier en gegevensresultaten van lokale MongoDB.

De voorbeeld-app Express.js klonen

De Express.js web-app wordt voor u geleverd. Kloon de app met git, installeer de afhankelijkheden en voer de app uit.

  1. Kloon de voorbeeld-repo, installeer de afhankelijkheden en open het project in Visual Studio Code.

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

  2. Bewerk het omgevingsbestand, , en voeg connection string eigenschap voor uw Cosmos DB toe als de .envDATABASE_URL waarde van de eigenschap.

    DATABASE_URL=ADD-YOUR-CONNECTION-STRING_HERE

  3. Open Visual Studio Code een terminalvenster en voer de volgende opdrachten uit om de afhankelijkheden van het voorbeeld te installeren en de web-app te starten.

    npm start

  4. Bekijk de web-app op uw lokale computer in een browser.

    http://localhost:8080/

    Eenvoudige Node.js-app die is verbonden met de MongoDB-database.

Een web-app-resource maken en een Express.js implementeren

Gebruik de Visual Studio Code-extensie voor App Service om een App Service-resource te maken en de Express.js web-app in de resource te implementeren.

  1. Navigeer naar Azure Explorer. Klik met de rechtermuisknop op het abonnement en selecteer Create new web app...(Advanced) .

    Gedeeltelijke schermopname van Visual Studio Code met behulp Azure-app service-extensie om een web-app te maken.

  2. Volg de aanwijzingen in de volgende tabel om te begrijpen hoe uw waarden worden gebruikt.

    Eigenschap Waarde
    Voer een wereldwijd unieke naam in voor de nieuwe web-app. Voer een waarde in, zoals web-app-with-mongodb-YOUR-NAME , voor uw App Service-resource. Vervang <YOUR-NAME> door uw naam of unieke id. Deze unieke naam wordt ook gebruikt als onderdeel van de URL voor toegang tot de resource in een browser.
    Selecteer een resourcegroep voor nieuwe resources. Selecteer de resourcegroep die u hebt gemaakt voor Cosmos DB resource, js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE , en vervang door uw naam of YOUR-NAME-HERE e-mailalias.
    Selecteer een runtime voor de Linux-app. Selecteer Node 12 LTS.
    Selecteer een besturingssysteem. Selecteer Linux.
    Maak een Linux App Service-abonnement. Maak een nieuw serviceplan met de js-demo-mongodb-web-app-plan-YOUR-NAME-HERE naam en vervang door uw naam of YOUR-NAME-HERE e-mailalias.
    Een prijscategorie selecteren Gratis
    Selecteer een Application Insights resource. Sla dit nu over.
    Selecteer een locatie voor nieuwe resources. Selecteer dezelfde locatie die u hebt geselecteerd bij het maken van Cosmos DB resource en resourcegroep.

  3. Wanneer het proces voor het maken van de app is voltooid, wordt er een statusbericht weergegeven in de rechteronderhoek van Visual Studio Code met een keuze van Deploy of View output . Selecteer Deploy.

    Gedeeltelijke schermopname van Visual Studio Code, met behulp van Azure-app service-extensie voor het implementeren van een web-app direct na het maken van een web-app.

    Als het statusbericht niet meer zichtbaar is, kunt u implementeren door Azure Explorer te selecteren, met de rechtermuisknop op de resourcenaam te klikken en vervolgens Implementeren naar web-app... te selecteren.

  4. Tijdens het implementatieproces kunt u met een melding selecteren om het uitvoervenster weer te geven. Hiermee wordt de rolling status van de implementatie weergegeven.

  5. Wanneer de implementatie is voltooid, wordt er een melding weergegeven. Selecteer Stream-logboeken om de rolling logboeken te bekijken.

    De service wordt geïmplementeerd. 'Logboeken streamen'.

    Wanneer de implementatie is voltooid, wordt er een melding weergegeven waarin u Stream-logboeken kunt selecteren.

Een App Service configureren voor database connection string

De omgevingsvariabele, DATABASE_URL , die lokaal is opgeslagen in uw , bestand is niet geïmplementeerd in uw .env web-app. Dit komt doordat het wordt vermeld als een genegeerd bestand in het ./.vscode/settings.json bestand:

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

  1. Selecteer het Azure-pictogram in de activiteitenbalk en selecteer vervolgens uw web-app onder App Service en abonnement.

  2. Klik met de rechtermuisknop op Instellingenselecteer vervolgens Nieuwe instelling toevoegen.

  3. Voeg dezelfde naam en waarde toe aan uw .env bestand.

    Naam van de instelling Waarde
    DATABASE_URL mongodb://...

  4. Klik met de rechtermuisknop op uw Azure-web-app en selecteer Opnieuw opstarten

Uw Azure-web-app weergeven in een browser

  1. Open de website in een browser en vervang de tekst YOUR-RESOURCE_NAME door uw eigen resourcenaam: https://YOUR-RESOURCE_NAME.azurewebsites.net .
  2. Gebruik de web-app om items toe te voegen en te verwijderen.

Wijzigingen maken en opnieuw implementeren

Maak enkele wijzigingen enployer de app opnieuw met behulp van de App Service-extensie.

Resources opschonen

Nadat u deze zelfstudie hebt voltooid, verwijdert u de resources.

In Visual Studio Code gebruikt u azure explorer voor resourcegroepen, klikt u met de rechtermuisknop op de resourcegroep, zoals , vervangt u door uw naam of e-mailalias en selecteert u js-demo-mongodb-web-app-resource-group-YOUR-NAME-HEREYOUR-NAME-HERE vervolgens js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE

Meer informatie

Azure App Service extensie

Volgende stappen

Meer informatie over de App Service en Cosmos DB: