Toegang tot gegevens in Azure Cosmos DB met mongoose met Azure Static Web Apps

Mongoose is de populairste ODM-client (Object Document Mapping) voor Node.js. Met Mongoose kunt u een gegevensstructuur ontwerpen en validatie afdwingen, en biedt u alle hulpprogramma's die nodig zijn om te communiceren met databases die ondersteuning bieden voor de MongoDB-API. Cosmos DB ondersteunt de benodigde MongoDB-API's en is beschikbaar als back-endserveroptie in Azure.

Vereisten

• Een Azure-account. Als u geen Azure-abonnement hebt, maakt u een gratis proefaccount.
• Een GitHub-account.
• Een serverloos Cosmos DB-account . Met een serverloos account betaalt u alleen voor de resources die worden gebruikt en hoeft u geen volledige infrastructuur te maken.

1. Een serverloze Cosmos DB-database maken

Voer de volgende stappen uit om een serverloze Cosmos-database te maken.

1. Meld u aan bij de Azure-portal.
2. Selecteer Een resource maken.
3. Voer Azure Cosmos DB in het zoekvak in.
4. Selecteer Azure Cosmos DB.
5. Selecteer Maken.
6. Als u hierom wordt gevraagd, selecteert u maken onder Azure Cosmos DB-API voor MongoDB.
7. Configureer uw Azure Cosmos DB-account met de volgende informatie:
   • Abonnement: kies het abonnement dat u wilt gebruiken
   • Resource: Selecteer Nieuwe maken en stel de naam in op aswa-mongoose
   • Accountnaam: er is een unieke waarde vereist
   • Locatie: VS - west 2
   • Capaciteitsmodus: Serverloos (preview)
   • Versie: 4.0
8. Selecteer Controleren + maken.
9. Selecteer Maken.

Het aanmaakproces duurt enkele minuten. We gaan terug naar de database om de connection string te verzamelen nadat we een statische web-app hebben gemaakt.

2. Een statische web-app maken

In deze zelfstudie wordt een GitHub-sjabloonopslagplaats gebruikt om u te helpen bij het maken van uw toepassing.

1. Ga naar de starterssjabloon.

2. Kies de eigenaar (als u een andere organisatie dan uw hoofdaccount gebruikt).

3. Geef uw opslagplaats de naam aswa-mongoose-tutorial.

4. Selecteer Opslagplaats maken van sjabloon.

5. Ga terug naar Azure Portal.

6. Selecteer Een resource maken.

7. Voer statische web-app in het zoekvak in.

8. Selecteer Statische web-app.

9. Selecteer Maken.

10. Configureer uw Statische Azure-web-app met de volgende informatie:

    • Abonnement: kies hetzelfde abonnement als voorheen
    • Resourcegroep: selecteer aswa-mongoose
    • Naam: aswa-mongoose-tutorial
    • Regio: VS - west 2
    • Selecteer Aanmelden met GitHub
    • Selecteer Autoriseren als u wordt gevraagd om Azure Static Web Apps toe te staan de GitHub Action te maken om de implementatie in te schakelen
    • Organisatie: de naam van uw GitHub-account
    • Opslagplaats: aswa-mongoose-tutorial
    • Vertakking: main
    • Voorinstellingen voor build: kies React
    • App-locatie: /
    • API-locatie: api
    • Uitvoerlocatie: build

11. Selecteer Controleren en maken.

12. Selecteer Maken.

13. Het aanmaakproces duurt even; Selecteer Ga naar resource zodra de statische web-app is ingericht.

3. Database-connection string configureren

Om de web-app te laten communiceren met de database, wordt de database connection string opgeslagen als een toepassingsinstelling. Instellingswaarden zijn toegankelijk in Node.js met behulp van het process.env -object.

1. Selecteer Start in de linkerbovenhoek van de Azure Portal (of ga terug naar https://portal.azure.com).
2. Selecteer Resourcegroepen.
3. Selecteer aswa-mongoose.
4. Selecteer de naam van uw databaseaccount. Dit heeft een type Azure Cosmos DB-API voor Mongo DB.
5. Selecteer onder Instellingende optie Verbindingsreeks.
6. Kopieer de connection string vermeld onder PRIMAIRE VERBINDINGSREEKS.
7. Selecteer aswa-mongoose in de breadcrumbs.
8. Selecteer aswa-mongoose-tutorial om terug te keren naar het website-exemplaar.
9. Selecteer onder Instellingende optie Configuratie.
10. Selecteer Toevoegen en maak een nieuwe toepassingsinstelling met de volgende waarden:
    • Naam: AZURE_COSMOS_CONNECTION_STRING
    • Waarde: <plak de connection string die u eerder hebt gekopieerd>
11. Selecteer OK.
12. Selecteer Toevoegen en maak een nieuwe toepassingsinstelling met de volgende waarden als naam van de database:
    • Naam: AZURE_COSMOS_DATABASE_NAME
    • Waarde: todo
13. Selecteer OK.
14. Selecteer Opslaan.

4. Ga naar uw site

U kunt nu de statische web-app verkennen.

1. Selecteer Overzicht in de Azure Portal.
2. Selecteer de URL die wordt weergegeven in de rechterbovenhoek.
   1. Het ziet er ongeveer als volgt uit https://calm-pond-05fcdb.azurestaticapps.net.
3. Selecteer Aanmelden om uw lijst met taken weer te geven.
4. Selecteer Toestemming verlenen voor toegang tot de toepassing.
5. Maak een nieuwe lijst door een naam in te voeren in het tekstvak met het label Nieuwe lijst maken en Opslaan te selecteren.
6. Maak een nieuwe taak door een titel te typen in het tekstvak met het label Nieuw item maken en Opslaan te selecteren.
7. Controleer of de taak wordt weergegeven (dit kan even duren).
8. Markeer de taak als voltooid door het vinkje te selecteren; de taak wordt verplaatst naar de sectie Voltooide items van de pagina.
9. Vernieuw de pagina om te bevestigen dat er een database wordt gebruikt.

Resources opschonen

Als u deze toepassing verder niet gaat gebruiken, verwijder dan de resourcegroep met de volgende stappen:

1. Ga terug naar Azure Portal.
2. Selecteer Resourcegroepen.
3. Selecteer aswa-mongoose.
4. Selecteer Resourcegroep verwijderen.
5. Voer aswa-mongoose in het tekstvak in.
6. Selecteer Verwijderen.

Volgende stappen

Ga naar het volgende artikel voor meer informatie over het configureren van lokale ontwikkeling...

Lokale ontwikkeling instellen