Acessar dados no Azure Cosmos DB usando o Mongoose com os Aplicativos Web Estáticos do Azure

Mongoose é o cliente de ODM (mapeamento de documento de objeto) mais popular para Node.js. O Mongoose permite que você projete uma estrutura de dados e imponha a validação, além de fornecer todas as ferramentas necessárias para interagir com bancos de dados com suporte à API do MongoDB. O Cosmos DB dá suporte às APIs do MongoDB necessárias e está disponível como uma opção de servidor de back-end no Azure.

Pré-requisitos

• Uma conta do Azure. Caso você não tenha uma assinatura do Azure, crie uma conta de avaliação gratuita.
• Uma conta do GitHub.
• Uma conta sem servidor do Cosmos DB. Com uma conta sem servidor, você só paga pelos recursos à medida que eles são usados e evita a necessidade de criar uma infraestrutura completa.

1. Criar um banco de dados sem servidor do Cosmos DB

Conclua as etapas a seguir para criar um BD sem servidor do Cosmos.

1. Entre no portal do Azure.
2. Selecione Criar um recurso.
3. Insira Azure Cosmos DB na caixa de pesquisa.
4. Selecione Azure Cosmos DB.
5. Selecione Criar.
6. Se solicitado, em API do Azure Cosmos DB para MongoDB, selecione Criar.
7. Configurar sua conta do Azure Cosmos DB com as informações a seguir:
   • Assinatura: escolha a assinatura que deseja usar
   • Recurso: clique em Criar e defina o nome como aswa-mongoose
   • Nome da conta: requer um valor exclusivo
   • Localização: Oeste dos EUA 2
   • Modo de capacidade: sem servidor (versão prévia)
   • Versão: 4.0
8. Selecione Examinar + criar.
9. Selecione Criar.

O processo de criação leva alguns minutos. Voltaremos ao banco de dados para coletar a cadeia de conexão depois de criarmos um aplicativo Web estático.

2. Criar um aplicativo Web estático

Este tutorial usa um repositório de modelos do GitHub para ajudar você a criar seu aplicativo.

1. Acesse o modelo inicial.

2. Escolha o proprietário (se estiver usando uma organização diferente da sua conta principal).

3. Dê um nome ao seu repositório aswa-mongoose-tutorial.

4. Selecione Criar repositório com base no modelo.

5. Volte para o portal do Azure.

6. Selecione Criar um recurso.

7. Insira o aplicativo Web estático na caixa de pesquisa.

8. Selecione Aplicativo Web Estático.

9. Selecione Criar.

10. Configure seu Aplicativo Web Estático do Azure com as seguintes informações:

    • Assinatura: escolha a mesma assinatura que antes
    • Grupo de recursos: selecione aswa-mongoose
    • Nome: aswa-mongoose-tutorial
    • Região: Oeste dos EUA 2
    • Selecione Entrar com o GitHub
    • Clique em Autorizar se for solicitado que você permita que os Aplicativos Web Estáticos do Azure criem a Ação do GitHub para habilitar a implantação
    • Organização: o nome de sua conta do GitHub
    • Repositório: aswa-mongoose-tutorial
    • Branch: principal
    • Predefinições de build: escolha React
    • Localização do aplicativo: /
    • Local da API: api
    • Localização da saída: build

11. Selecione Examinar e criar.

12. Selecione Criar.

13. O processo de criação demora alguns minutos. Clique em Acessar recurso quando o aplicativo Web estático for provisionado.

3. Configurar uma cadeia de conexão de banco de dados

Para permitir que o aplicativo Web se comunique com o banco de dados, a cadeia de conexão de banco de dados é armazenada como uma configuração de aplicativo. Os valores de configuração podem ser acessados no Node.js usando o objeto process.env.

1. Clique em Início no canto superior esquerdo do portal do Azure (ou volte para https://portal.azure.com).
2. Selecione Grupos de recursos.
3. Clique em aswa-mongoose.
4. Clique no nome da conta do banco de dados. Ela tem um tipo API do Azure Cosmos DB para MongoDB.
5. Em Configurações, selecione Cadeia de Conexão.
6. Copie a cadeia de conexão listada em CADEIA DE CONEXÃO PRINCIPAL.
7. Na navegação estrutural, clique em aswa-mongoose.
8. Clique em aswa-mongoose-tutorial para voltar à instância do site.
9. Em Configurações escolha Configuração.
10. Clique em Adicionar e crie uma Configuração de Aplicativo com os valores a seguir:
    • Nome: AZURE_COSMOS_CONNECTION_STRING
    • Valor: <cole a cadeia de conexão que você havia copiado>
11. Selecione OK.
12. Selecione Adicionar e crie uma Configuração de Aplicativo com os valores a seguir para o nome do banco de dados:
    • Nome: AZURE_COSMOS_DATABASE_NAME
    • Valor: todo
13. Selecione OK.
14. Selecione Salvar.

4. Acessar seu site

Agora você pode explorar o aplicativo Web estático.

1. No portal do Azure, selecione Visão geral.
2. Clique no URL exibido no canto superior direito.
   1. Será semelhante a https://calm-pond-05fcdb.azurestaticapps.net.
3. Selecione Fazer logon para ver sua lista de tarefas.
4. Selecione Dar consentimento para acessar o aplicativo.
5. Crie uma lista inserindo um nome na caixa de texto rotulada Criar uma lista e selecionando Salvar.
6. Crie uma tarefa digitando um título na caixa de texto rotulada Criar um item e selecionando Salvar.
7. Confirme se a tarefa é exibida (isso pode levar algum tempo).
8. Marque a tarefa como concluída selecionando a marca de seleção. A tarefa é movida para a seção Itens concluídos da página.
9. Atualize a página para confirmar que um banco de dados está sendo usado.

Limpar os recursos

Se você não quiser continuar usando este aplicativo, exclua o grupo de recursos por meio das seguintes etapas:

1. Volte para o portal do Azure.
2. Selecione Grupos de recursos.
3. Clique em aswa-mongoose.
4. Selecione Excluir grupo de recursos.
5. Insira aswa-mongoose na caixa de texto.
6. Selecione Excluir.

Próximas etapas

Prossiga para o próximo artigo para aprender a configurar o desenvolvimento local...

Configurar desenvolvimento local