Accedere ai dati in Azure Cosmos DB usando Mongoose con App Web statiche di Azure

Mongoose è il client ODM (Object Document Mapping) più diffuso per Node.js. Mongoose consente di progettare una struttura di dati e applicare la convalida e fornisce tutti gli strumenti necessari per interagire con i database che supportano l'API MongoDB. Cosmos DB supporta le API MongoDB necessarie ed è disponibile come opzione del server back-end in Azure.

Prerequisiti

• Un account Azure. Se non si ha una sottoscrizione di Azure, creare un account di valutazione gratuito.
• Un account GitHub.
• Un account serverless di Cosmos DB. Con un account serverless si paga solo per le risorse usate ed evitare di dover creare un'infrastruttura completa.

1. Creare un database serverless di Cosmos DB

Completare la procedura seguente per creare un database serverless cosmos.

1. Accedere al portale di Azure.
2. Selezionare Crea una risorsa.
3. Immettere Azure Cosmos DB nella casella di ricerca.
4. Selezionare Azure Cosmos DB.
5. Seleziona Crea.
6. Se richiesto, in API Azure Cosmos DB per MongoDB selezionare Crea.
7. Configurare l'account Azure Cosmos DB con le informazioni seguenti:
   • Sottoscrizione: scegliere la sottoscrizione da usare
   • Risorsa: selezionare Crea nuovo e impostare il nome su aswa-mongoose
   • Nome account: è necessario un valore univoco
   • Località: Stati Uniti occidentali 2
   • Modalità capacità: serverless (anteprima)
   • Versione: 4.0
8. Selezionare Rivedi e crea.
9. Seleziona Crea.

Il processo di creazione richiede alcuni minuti. Si tornerà al database per raccogliere il stringa di connessione dopo aver creato un'app Web statica.

2. Creare un'app Web statica

Questa esercitazione usa un repository di modelli GitHub per facilitare la creazione dell'applicazione.

1. Passare al modello di avvio.

2. Scegliere il proprietario (se si usa un'organizzazione diversa dall'account principale).

3. Assegnare al repository il nome aswa-mongoose-tutorial.

4. Selezionare Create repository from template (Crea repository da modello).

5. Tornare al portale di Azure.

6. Selezionare Crea una risorsa.

7. Immettere l'app Web statica nella casella di ricerca.

8. Selezionare App Web statiche.

9. Seleziona Crea.

10. Configurare l'app Web statica di Azure con le informazioni seguenti:

    • Sottoscrizione: scegliere la stessa sottoscrizione di prima
    • Gruppo di risorse: selezionare aswa-mongoose
    • Nome: aswa-mongoose-tutorial
    • Area: Stati Uniti occidentali 2
    • Selezionare Accedi con GitHub
    • Selezionare Autorizza se viene richiesto di consentire App Web statiche di Azure di creare GitHub Action per abilitare la distribuzione
    • Organizzazione: nome dell'account GitHub
    • Repository: aswa-mongoose-tutorial
    • Ramo: main
    • Set di impostazioni di compilazione: scegliere React
    • Percorso dell'app: /
    • Percorso API: API
    • Percorso di output: compilazione

11. Seleziona Rivedi e crea.

12. Seleziona Crea.

13. Il processo di creazione richiede alcuni istanti; selezionare Vai alla risorsa dopo il provisioning dell'app Web statica.

3. Configurare stringa di connessione di database

Per consentire all'app Web di comunicare con il database, il database stringa di connessione viene archiviato come impostazione dell'applicazione. I valori di impostazione sono accessibili in Node.js utilizzando l'oggetto process.env .

1. Selezionare Home nell'angolo superiore sinistro del portale di Azure (o tornare a https://portal.azure.com).
2. Selezionare Gruppi di risorse.
3. Selezionare aswa-mongoose.
4. Selezionare il nome dell'account di database. Include un tipo di API di Azure Cosmos DB per Mongo DB.
5. In Impostazioni selezionare Stringa di connessione.
6. Copiare il stringa di connessione elencato in STRINGA DI CONNESSIONE PRIMARIA.
7. Nei percorsi di navigazione selezionare aswa-mongoose.
8. Selezionare aswa-mongoose-tutorial per tornare all'istanza del sito Web.
9. In Impostazioni selezionare Configurazione.
10. Selezionare Aggiungi e creare una nuova impostazione applicazione con i valori seguenti:
    • Nome: AZURE_COSMOS_CONNECTION_STRING
    • Valore: <incollare il stringa di connessione copiato in precedenza>
11. Seleziona OK.
12. Selezionare Aggiungi e creare una nuova impostazione applicazione con i valori seguenti per il nome del database:
    • Nome: AZURE_COSMOS_DATABASE_NAME
    • Valore: todo
13. Seleziona OK.
14. Seleziona Salva.

4. Vai al tuo sito

È ora possibile esplorare l'app Web statica.

1. Nella portale di Azure selezionare Panoramica.
2. Selezionare l'URL visualizzato in alto a destra.
   1. L'aspetto è simile a https://calm-pond-05fcdb.azurestaticapps.net.
3. Selezionare Accedi per visualizzare l'elenco delle attività.
4. Selezionare Concedi consenso per accedere all'applicazione.
5. Creare un nuovo elenco immettendo un nome nella casella di testo con etichetta Crea nuovo elenco e selezionando Salva.
6. Creare una nuova attività digitando un titolo nella casella di testo con etichetta Crea nuovo elemento e selezionando Salva.
7. Verificare che l'attività sia visualizzata (l'operazione potrebbe richiedere qualche minuto).
8. Contrassegnare l'attività come completata selezionando il controllo. L'attività passa alla sezione Elementi completati della pagina.
9. Aggiornare la pagina per verificare che venga usato un database.

Pulire le risorse

Se non si intende continuare a usare questa applicazione, eliminare il gruppo di risorse seguendo questa procedura:

1. Tornare al portale di Azure.
2. Selezionare Gruppi di risorse.
3. Selezionare aswa-mongoose.
4. Selezionare Elimina gruppo di risorse.
5. Immettere aswa-mongoose nella casella di testo.
6. Selezionare Elimina.

Passaggi successivi

Passare all'articolo successivo per informazioni su come configurare lo sviluppo locale...

Configurare lo sviluppo locale