Executar e depurar aplicativos habilitados para a Azure Developer CLI

  • Artigo

Execute e depure aplicativos em seu computador local usando a extensão Visual Studio Code para a CLI do Desenvolvedor do Azure (azd). Neste guia, você usará o modelo React Web App with Node.js API e MongoDB no Azure . Você pode aplicar os princípios aprendidos neste artigo a qualquer um dos modelos da CLI do Desenvolvedor do Azure.

Pré-requisitos

Instalar a extensão de código do Visual Studio para a CLI do desenvolvedor do Azure

Via Visual Studio Code

  1. Abra o Visual Studio Code.

  2. No menu Exibir , selecione Extensões.

  3. No campo de pesquisa, digite Azure Developer CLI.

  4. Selecione Instalar.

Via Marketplace

  1. Usando seu navegador, vá para a página Azure Developer CLI - VS Code Extension .

  2. Selecione Instalar.

Inicializar um novo aplicativo

  1. Crie e abra um novo diretório no Visual Studio Code.

  2. No menu Exibir, selecione Paleta de Comandos....

  3. Digite e escolha Azure Developer: init.

    Screenshot of the option to initialize a new app.

  4. Selecione o modelo Azure-Samples/todo-nodejs-mongo.

    Screenshot of selecting the todo-nodejs-mongo sample template.

Explore os seguintes arquivos incluídos no .vscode diretório:

Arquivo Descrição
launch.json Define as configurações de depuração, como Debug Web e Debug API. para ver as opções de configuração de depuração, selecione Executar no menu Exibir . As configurações de depuração disponíveis estão listadas na parte superior do painel. Para saber mais sobre depuração no Visual Studio Code, consulte Depuração.
tasks.json Define as configurações para iniciar o servidor Web ou de API. Para ver essas opções de configuração, abra a Paleta de Comandos e execute Tarefa: executar tarefa. Para saber mais sobre as tarefas de código do Visual Studio, consulte Integrar com ferramentas externas por meio de tarefas.

Observação

Se você estiver usando o modelo C# SWA-FUNC MS SQL, será necessário iniciar manualmente a tarefa Iniciar API e, em seguida, Depurar API (F5). Quando solicitado a escolher em uma lista de processos .NET em execução, procure o nome do seu aplicativo e selecione-o.

provisionar os recursos do Azure

Antes de iniciar a depuração, provisione os recursos necessários do Azure.

  1. Abra a Paleta de Comandos.

  2. Insira o Azure Developer: provisione recursos do Azure.

    Screenshot of option to provision the Azure resources for a new app.

Depurar uma API

A API de depuração de configuração de depuração executa automaticamente o servidor de API e anexa o depurador. Para testar esse padrão, execute as seguintes etapas:

  1. No diretório do src/api/src/routes seu projeto, abra lists.tso .

  2. Defina um ponto de interrupção na linha 16.

  3. Na Barra de Atividades, selecione Executar e Depurar Configuração de depuração da API Iniciar seta de depuração>>.

    Screenshot of setting the debug configuration to Debug API.

  4. No menu Exibir , selecione Console de Depuração.

  5. Aguarde a mensagem indicando que o depurador está escutando na porta 3100.

    Screenshot of the message in the Debug Console indicating the debugger is listening on port 3100.

  6. No shell de terminal preferido, digite o seguinte comando: curl http://localhost:3100/lists

    Screenshot of using cURL to connect to the API server.

  7. Quando o ponto de interrupção definido anteriormente for atingido, a execução do aplicativo será pausada. Neste ponto, você pode executar tarefas de depuração padrão, como:

    • Inspecionar variáveis
    • Olhe para a pilha de chamadas
    • Defina outros pontos de interrupção.

  8. Pressione <F5> para continuar executando o aplicativo. O aplicativo de exemplo retorna uma lista vazia.

Depurar um aplicativo React Frontend

Para usar a configuração da Web de Depuração, você deve iniciar ambos:

  • O servidor de API
  • O servidor web de desenvolvimento

Para testar esse padrão, execute as seguintes etapas:

  1. Abra a Paleta de Comandos e execute Tarefa: Executar tarefa.

    Screenshot of running a Visual Studio Code Task.

  2. Insira e selecione Iniciar API e Web

    Screenshot of selecting the option to Start API and Web.

    Você pode verificar se o servidor Web local está em execução navegando até a seguinte URL em um navegador da Web: http://localhost:3000.

  3. No diretório do src/web/src/components projeto, abra todoItemListPane.tsxo .

  4. Defina um ponto de interrupção na linha 150 (a primeira linha da deleteItems função).

  5. Na Barra de Atividade, selecione Executar e Depurar Depurar>Configuração > de depuração da Web a seta Iniciar Depuração.

    Screenshot of setting the debug configuration to Debug Web.

  6. A execução do aplicativo Web fará com que seu navegador padrão abra a seguinte URL: http://localhost:3000. Agora você pode depurar o aplicativo adicionando um item, selecionando-o na lista e selecionando Excluir.

    Screenshot of the sample Node JS Mongo DB app.

  7. Quando o ponto de interrupção definido anteriormente for atingido, a execução do aplicativo será pausada. Neste ponto, você pode executar tarefas de depuração padrão, como:

    • Inspecionar variáveis
    • Olhe para a pilha de chamadas
    • Definir outros pontos de interrupção

  8. Pressione <F5> para continuar executando o aplicativo e o item selecionado será excluído.

Execute e depure aplicativos criados em seu computador local usando o Visual Studio e a CLI do Desenvolvedor do Azure (azd). Neste guia, você usará o aplicativo Web React com API C# e o modelo MongoDB no Azure . Você pode aplicar os princípios aprendidos neste artigo a qualquer um dos modelos da CLI do Desenvolvedor do Azure.

Pré-requisitos

Instalar e habilitar o recurso de visualização

  1. Instalar o Visual Studio Preview

    Observação

    Isso é diferente do Visual Studio. Se você tiver a versão não visualizada do Visual Studio, você ainda precisará instalá-lo.

  2. Abra o Visual Studio Preview.

  3. No menu Ferramentas, selecione Opções>de visualização de recursos.

  4. Verifique se a Integração com azd, a CLI do Desenvolvedor do Azure está habilitada.

    Screenshot of the Visual Studio option to turn on integration with the Azure Developer CLI.

Abra a solução de API

  1. Abra a Todo.Api.sln/src/api solução no diretório.

    Se você ativou o recurso de integração, o azure.yamlazd arquivo será detectado. O Visual Studio inicializa automaticamente o modelo de aplicativo e executa azd env refresho .

  2. Expanda Serviços Conectados para ver todas as dependências.

    Embora o front-end da Web em execução no Serviço de Aplicativo do Azure não faça parte da solução de API, ele é detectado e incluído em Dependências de Serviço

    Screenshot of the message indicating the Azure Developer CLI is initialized.

Executar e depurar

  1. No diretório do src/api seu projeto, abra ListController.cso .

  2. Defina um ponto de interrupção na linha 20.

    Screenshot of the breakpoint set in the sample code.

  3. Pressione <F5>.

  4. Aguarde a mensagem indicando que o servidor Web está escutando na porta 3101.

    Screenshot of the status bar message indicating the debugger is listening on port 3101.

  5. No navegador de sua preferência, digite o seguinte endereço: https://localhost:3101/lists

  6. Quando o ponto de interrupção definido anteriormente for atingido, a execução do aplicativo será pausada. Neste ponto, você pode executar tarefas de depuração padrão, como:

    • Inspecionar variáveis
    • Olhe para a pilha de chamadas
    • Definir outros pontos de interrupção

  7. Pressione <F5> para continuar executando o aplicativo.

    O aplicativo de exemplo retorna uma lista (ou uma lista vazia [] se você não tiver iniciado o front-end da Web antes):

    [{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]

Outras azd integrações

Gerenciar azd ambiente

Para gerenciar o azd ambiente:

  1. Selecione ... no canto superior direito do painel Dependências de Serviço.

  2. Selecione uma das seguintes opções no menu suspenso:

    • Criar um ambiente
    • Selecionar e definir um ambiente específico como o ambiente ativo atual
    • Desprovisionar um ambiente

    Screenshot of the options to manage the Azure Developer CLI environment in Visual Studio.

Provisionar recursos do ambiente

Você pode provisionar recursos do Azure para seu ambiente.

  1. Em Serviços Conectados, clique no ícone no canto superior direito para restaurar/provisionar recursos do ambiente.

    Screenshot of option to provision Azure Developer CLI environment resources in Visual Studio.

  2. Confirme o nome do ambiente, a assinatura e o local.

Publicar seu aplicativo

Se você fizer alguma atualização, poderá publicar seu aplicativo executando as seguintes etapas:

  1. No Gerenciador de Soluções, expanda Serviços Conectados.

  2. Selecione Publicar.

  3. Selecione Adicionar um perfil de publicação.

  4. Selecione um Destino do Azure e selecione Avançar.

  5. Selecione Ambiente da CLI do Desenvolvedor do Azure e selecione Avançar.

    Screenshot of message in Debug Console indicating debugger is listening on port 3100.

  6. Selecione o ambiente.

  7. Selecione Concluir.

Outros recursos

Solicitar ajuda

Para obter informações sobre como registrar um bug, solicitar ajuda ou propor um novo recurso para a CLI do Desenvolvedor do Azure, visite a página de solução de problemas e suporte .

Próximas etapas

Configurar um pipeline e atualizações por push usando ações do GitHub