Få åtkomst till data i Azure Cosmos DB med Mongoose med Azure Static Web Apps

Mongoose är den mest populära ODM-klienten (objektdokumentmappning) för Node.js. Med Mongoose kan du utforma en datastruktur och framtvinga validering och tillhandahålla alla verktyg som krävs för att interagera med databaser som stöder MongoDB-API:et. Cosmos DB stöder nödvändiga MongoDB-API:er och är tillgängligt som serverdelsalternativ i Azure.

Förutsättningar

• Ett Azure-konto. Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt utvärderingskonto.
• Ett GitHub-konto.
• Ett serverlöst Cosmos DB-konto. Med ett serverlöst konto betalar du bara för resurserna när de används och undviker att behöva skapa en fullständig infrastruktur.

1. Skapa en serverlös Cosmos DB-databas

Slutför följande steg för att skapa en Cosmos-serverlös databas.

1. Logga in på Azure-portalen.
2. Välj Skapa en resurs.
3. Ange Azure Cosmos DB i sökrutan.
4. Välj Azure Cosmos DB.
5. Välj Skapa.
6. Om du uppmanas väljer du Skapa under Azure Cosmos DB API for MongoDB.
7. Konfigurera ditt Azure Cosmos DB-konto med följande information:
   • Prenumeration: Välj den prenumeration som du vill använda
   • Resurs: Välj Skapa ny och ange namnet till aswa-mongoose
   • Kontonamn: Ett unikt värde krävs
   • Plats: USA, västra 2
   • Kapacitetsläge: Serverlöst (förhandsversion)
   • Version: 4.0
8. Välj Granska + skapa.
9. Välj Skapa.

Det tar några minuter att skapa processen. Vi kommer tillbaka till databasen för att samla in niska veze när vi har skapat en statisk webbapp.

2. Skapa en statisk webbapp

I den här självstudien används en GitHub-malllagringsplats som hjälper dig att skapa ditt program.

1. Gå till startmallen.

2. Välj ägare (om du använder en annan organisation än ditt huvudkonto).

3. Ge lagringsplatsen namnet aswa-mongoose-tutorial.

4. Välj Create repository from template (Skapa lagringsplats från mall).

5. Gå tillbaka till Azure-portalen.

6. Välj Skapa en resurs.

7. Ange en statisk webbapp i sökrutan.

8. Välj Statisk webbapp.

9. Välj Skapa.

10. Konfigurera din Azure Static Web App med följande information:

    • Prenumeration: Välj samma prenumeration som tidigare
    • Resursgrupp: Välj aswa-mongoose
    • Namn: aswa-mongoose-tutorial
    • Region: USA, västra 2
    • Välj Logga in med GitHub
    • Välj Auktorisera om du uppmanas att tillåta att Azure Static Web Apps skapar GitHub-åtgärden för att aktivera distribution
    • Organisation: Ditt GitHub-kontonamn
    • Lagringsplats: aswa-mongoose-tutorial
    • Gren: main
    • Skapa förinställningar: Välj React
    • Appplats: /
    • API-plats: api
    • Utdataplats: build

11. Välj Granska och skapa.

12. Välj Skapa.

13. Det tar en stund att skapa processen. välj Gå till resurs när den statiska webbappen har etablerats.

3. Konfigurera databas niska veze

För att webbappen ska kunna kommunicera med databasen lagras databasen niska veze som en programinställning. Du kan ange värden i Node.js med hjälp av process.env objektet.

1. Välj Start i det övre vänstra hörnet i Azure-portalen (eller gå tillbaka till https://portal.azure.com).
2. Välj Resursgrupper.
3. Välj aswa-mongoose.
4. Välj namnet på ditt databaskonto – det har en typ av Azure Cosmos DB API för Mongo DB.
5. Under Inställningar väljer du Anslutningssträng.
6. Kopiera niska veze som anges under PRIMÄR ANSLUTNINGSSTRÄNG.
7. I sökvägarna väljer du aswa-mongoose.
8. Välj aswa-mongoose-tutorial för att återgå till webbplatsinstansen.
9. Under Inställningar väljer du Konfiguration.
10. Välj Lägg till och skapa en ny programinställning med följande värden:
    • Namn: AZURE_COSMOS_CONNECTION_STRING
    • Värde: <Klistra in niska veze du kopierade tidigare>
11. Välj OK.
12. Välj Lägg till och skapa en ny programinställning med följande värden som namn på databasen:
    • Namn: AZURE_COSMOS_DATABASE_NAME
    • Värde: att göra
13. Välj OK.
14. Välj Spara.

4. Gå till din webbplats

Nu kan du utforska den statiska webbappen.

1. I Azure-portalen väljer du Översikt.
2. Välj den URL som visas i det övre högra hörnet.
   1. Det ser ut ungefär som https://calm-pond-05fcdb.azurestaticapps.net.
3. Välj Logga in för att se din lista över uppgifter.
4. Välj Bevilja medgivande för att få åtkomst till programmet.
5. Skapa en ny lista genom att ange ett namn i textrutan med etiketten Skapa ny lista och välja Spara.
6. Skapa en ny uppgift genom att skriva in en rubrik i textrutan med etiketten Skapa nytt objekt och välja Spara.
7. Bekräfta att aktiviteten visas (det kan ta en stund).
8. Markera aktiviteten som slutförd genom att markera kontrollen. Aktiviteten flyttas till avsnittet Färdiga objekt på sidan.
9. Uppdatera sidan för att bekräfta att en databas används.

Rensa resurser

Om du inte fortsätter att använda det här programmet tar du bort resursgruppen med följande steg:

1. Gå tillbaka till Azure-portalen.
2. Välj Resursgrupper.
3. Välj aswa-mongoose.
4. Välj Ta bort resursgrupp.
5. Ange aswa-mongoose i textrutan.
6. Välj Ta bort.

Nästa steg

Gå vidare till nästa artikel för att lära dig hur du konfigurerar lokal utveckling...

Konfigurera lokal utveckling