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 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 quando vengono usate ed evitare la necessità di creare un'infrastruttura completa.

1. Creare un database serverless di Cosmos DB

Completare i passaggi seguenti per creare un database serverless di 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. Selezionare 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
   • Posizione: Stati Uniti occidentali 2
   • Modalità capacità: Serverless (anteprima)
   • Versione: 4.0
8. Selezionare Rivedi e crea.
9. Selezionare Crea.

Il processo di creazione richiede alcuni minuti. Si tornerà al database per raccogliere la 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 creare l'applicazione.

1. Passare al modello di avvio.

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

3. Assegnare un nome al repository 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. Selezionare 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 richiesto di consentire App Web statiche di Azure di creare l'azione GitHub per abilitare la distribuzione
    • Organizzazione: nome account GitHub
    • Repository: aswa-mongoose-tutorial
    • Ramo: principale
    • Impostazioni di compilazione: scegliere React
    • Posizione dell'app: /
    • Percorso api: api
    • Percorso di output: compilazione

11. Selezionare Rivedi e crea.

12. Selezionare Create (Crea).

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

3. Configurare la stringa di connessione del database

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

1. Selezionare Home nell'angolo superiore sinistro della 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 Azure Cosmos DB per Mongo DB.
5. In Impostazioni selezionare Stringa di connessione.
6. Copiare la stringa di connessione elencata in STRING DI CONNESSIONE PRIMARIA.
7. Nei panecrumb 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 la stringa di connessione copiata in precedenza>
11. Selezionare 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. Selezionare OK.
14. Selezionare Salva.

4. Passare al 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. Sembra 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 etichettata crea nuovo elenco e selezionando Salva.
6. Creare una nuova attività digitando un titolo nella casella di testo etichettata crea nuovo elemento e selezionando Salva.
7. Verificare che l'attività venga visualizzata (potrebbe richiedere un momento).
8. Contrassegnare l'attività come completata selezionando il controllo; l'attività passa alla sezione Elementi fatti 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