Partilhar via

Executar e depurar aplicações ativadas para o Azure Developer CLI

  • Artigo

Execute e depure aplicativos em sua máquina local usando a extensão de código do Visual Studio para a CLI do desenvolvedor do Azure (azd). Neste guia, você usará o modelo React Web App com Node.js API e MongoDB no Azure . Você pode aplicar os princípios aprendidos neste artigo a qualquer um dos modelos da CLI do Azure Developer.

Pré-requisitos

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

Através do código do Visual Studio

  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:

Ficheiro Description
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 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.

Nota

Se você estiver usando o modelo MS SQL C# SWA-func, precisará 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.

Aprovisionar os recursos do Azure

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

  1. Abra a Paleta de Comandos.

  2. Insira 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 Depurar console.

  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 Debug Web , 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é o seguinte URL em um navegador da Web: http://localhost:3000.

  3. No diretório do src/web/src/components seu 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 Atividades, selecione Executar e Depurar>Configuração > de Depuração da Web na 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 o 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 fazer 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 sua máquina local usando o Visual Studio e a CLI do Desenvolvedor do Azure (azd). Neste guia, você usará o React Web App 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 Azure Developer.

Pré-requisitos

Instalar e ativar o recurso de visualização

  1. Instalar o Visual Studio Preview

    Nota

    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 recursos de visualização.

  4. Certifique-se de que 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 solução no /src/api diretório.

    Se você tiver ativado o recurso de integração, o azd azure.yaml arquivo será detetado. 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 é detetado 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. Prima <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 seu navegador preferido, 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 novo ambiente
    • Selecione e defina 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 a aplicação

Se você fizer atualizações, poderá publicar seu aplicativo seguindo 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. Selecionar o ambiente.

  7. Selecione Concluir.

Outros recursos

Pedir ajuda

Para obter informações sobre como arquivar 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óximos passos

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