Início rápido: criar uma função no Azure com o TypeScript usando o Visual Studio Code

Neste artigo, você usará o Visual Studio Code para criar uma função do TypeScript que responde a solicitações HTTP. Após testar o código localmente, implante-o no ambiente sem servidor do Azure Functions.

A realização deste início rápido gera um pequeno custo de alguns centavos de dólar ou menos em sua conta do Azure.

Também há uma versão baseada na CLI deste artigo.

Configurar seu ambiente

Antes de começar, verifique se você tem os seguintes requisitos implementados:

Criar seu projeto local

Nesta seção, você usará o Visual Studio Code para criar um projeto local do Azure Functions em TypeScript. Mais adiante neste artigo, você publicará o código de função no Azure.

  1. Escolha o ícone do Azure na Barra de atividade e, em seguida, na área Azure: Functions e selecione o ícone Criar projeto... .

    Escolher Criar um projeto

  2. Escolha um local de diretório para o workspace do projeto e escolha Selecionar.

    Observação

    Estas etapas foram projetadas para serem concluídas fora de um workspace. Nesse caso, não selecione uma pasta de projeto que faz parte de um workspace.

  3. Forneça as seguintes informações nos prompts:

    • Selecione uma linguagem de programação para o seu projeto de função: Escolha TypeScript.

    • Selecione um modelo para a primeira função do projeto: Escolha HTTP trigger.

    • Forneça um nome de função: Digite HttpExample.

    • Nível de autorização: Escolha Anonymous, que permite que qualquer pessoa chame seu ponto de extremidade de função. Para saber mais sobre o nível de autorização, confira Chaves de autorização.

    • Selecione como você gostaria de abrir seu projeto: Escolha Add to workspace.

  4. Usando essas informações, o Visual Studio Code gera um projeto do Azure Functions com um gatilho HTTP. Você pode exibir os arquivos de projeto locais no Explorer. Para saber mais sobre os arquivos criados, confira Arquivos de projeto gerados.

Executar a função localmente

O Visual Studio Code integra-se ao Azure Functions Core Tools para permitir que você execute esse projeto em seu computador de desenvolvimento local antes da publicação no Azure.

  1. Para chamar sua função, pressione F5 para iniciar o projeto de aplicativo de funções. A saída do Core Tools é exibida no painel Terminal. Seu aplicativo é iniciado no painel Terminal. Você pode ver o ponto de extremidade de URL de sua função disparada por HTTP localmente.

    Saída do VS Code de função local

    Se você tiver problemas com a execução no Windows, verifique se o terminal padrão do Visual Studio Code não está definido como bash WSL.

  2. Com o Core Tools em execução, acesse a área Azure: Funções. Em Funções, expanda Projeto Local > Funções. Clique com o botão direito do mouse (Windows) ou clique em CTRL - (macOS) na função HttpExample e escolha Função Executar Agora... .

    Executar a função agora por meio do Visual Studio Code

  3. Em Insira o corpo da solicitação, você verá o valor do corpo da mensagem de solicitação igual a { "name": "Azure" }. Clique em ENTER para enviar essa mensagem de solicitação à função.

  4. Quando a função é executada localmente e retorna uma resposta, uma notificação é gerada no Visual Studio Code. As informações sobre a execução da função são mostradas no painel Terminal.

  5. Pressione Ctrl + C para parar o Core Tools e desconectar o depurador.

Após verificar se a função foi executada corretamente no computador local, é hora de usar o Visual Studio Code para publicar o projeto diretamente no Azure.

Entrar no Azure

Antes de poder publicar seu aplicativo, você precisa entrar no Azure.

  1. Se ainda não estiver conectado, escolha o ícone do Azure na barra Atividade e, em seguida, na área Azure: Functions, escolha Entrar no Azure… . Se você ainda não tiver uma, poderá Criar uma conta gratuita do Azure . Os alunos podem criar uma conta gratuita do Azure for Students .

    Entrar no Azure por meio do VS Code

    Se você já tiver entrado, vá para a próxima seção.

  2. Quando solicitado no navegador, escolha sua conta do Azure e entre usando suas credenciais de conta do Azure.

  3. Após entrar com êxito, você poderá fechar a nova janela do navegador. As assinaturas que pertencem à sua conta do Azure são exibidas na barra lateral.

Publicar o projeto no Azure

Nesta seção, você criará um aplicativo de funções e os recursos relacionados em sua assinatura do Azure e, em seguida, implantará seu código.

Importante

Publicar em um aplicativo de funções existente substitui o conteúdo desse aplicativo no Azure.

  1. Escolha o ícone do Azure na Barra de atividade e, em seguida, na área Azure: Functions, escolha o botão Implantar no aplicativo de funções... .

    Publicar seu projeto no Azure

  2. Forneça as seguintes informações nos prompts:

    • Selecione a pasta: escolha uma pasta do seu workspace ou navegue até uma que contenha seu aplicativo de funções. Você não verá isso se já tiver um aplicativo de funções válido aberto.

    • Selecione a assinatura: Escolha a assinatura a ser usada. Essa opção não será exibida caso você possua apenas uma assinatura.

    • Selecione o aplicativo de funções no Azure: Escolha + Create new Function App. (Não escolha a opção Advanced, que não é abordada neste artigo.)

    • Insira um nome exclusivo globalmente para o aplicativo de funções: Digite um nome que seja válido em um caminho de URL. O nome que você digitar é validado para ter certeza de que ele é exclusivo no Azure Functions.

    • Selecione um runtime: Escolha a versão do Node.js em que você está executando localmente. É possível usar o comando node --version para verificar sua versão.

    • Selecione uma localização para novos recursos: Para obter um melhor desempenho, escolha uma região perto de você.

    A extensão mostra o status de recursos individuais conforme eles são criados no Azure na área de notificação.

    Notificação de criação de recurso do Azure

  3. Quando concluído, os seguintes recursos do Azure serão criados em sua assinatura, usando nomes baseados em seu nome do aplicativo de funções:

    • Um grupo de recursos, que é um contêiner lógico para recursos relacionados.
    • Uma conta de armazenamento do Azure padrão, que mantém o estado e outras informações sobre seus projetos.
    • Um plano de consumo, que define o host subjacente para o aplicativo de funções sem servidor.
    • Um aplicativo de funções, que fornece o ambiente para a execução do código de função. Um aplicativo de funções lhe permite agrupar funções como uma unidade lógica para facilitar o gerenciamento, a implantação e o compartilhamento de recursos dentro do mesmo plano de hospedagem.
    • Uma instância do Application Insights conectada ao aplicativo de funções, que controla o uso de sua função sem servidor.

    Uma notificação é exibida depois que seu aplicativo de funções é criado e o pacote de implantação é aplicado.

    Dica

    Por padrão, os recursos do Azure necessários para o aplicativo de funções são criados com base no nome do aplicativo de funções fornecido por você. Por padrão, eles também são criados no mesmo grupo de recursos com o aplicativo de funções. Se desejar personalizar os nomes desses recursos ou reutilizar os recursos existentes, você precisará publicar o projeto com opções de criação avançadas.

  4. Escolha Exibir Saída nessa notificação para exibir a criação e os resultados da implantação, incluindo os recursos do Azure que você criou. Se você perder a notificação, selecione o ícone de sino no canto inferior direito para vê-lo novamente.

    Criar notificação completa

Executar a função no Azure

  1. De volta na área Azure: Funções na barra lateral, expanda sua assinatura, o novo aplicativo de funções e Funções. Clique com o botão direito do mouse (Windows) ou clique em CTRL - (macOS) na função HttpExample e escolha Função Executar Agora... .

    Executar a função agora no Azure por meio do Visual Studio Code

  2. Em Insira o corpo da solicitação, você verá o valor do corpo da mensagem de solicitação igual a { "name": "Azure" }. Clique em ENTER para enviar essa mensagem de solicitação à função.

  3. Quando a função é executada no Azure e retorna uma resposta, uma notificação é gerada no Visual Studio Code.

Limpar recursos

Quando você passar para a próxima etapa e adicionar uma associação de fila do Armazenamento do Azure à sua função, você precisará manter todos os seus recursos em vigor para se basear no que você já fez.

Caso contrário, você poderá usar as etapas a seguir para excluir o aplicativo de funções e recursos relacionados para evitar incorrer em custos adicionais.

  1. No Visual Studio Code, pressione F1 para abrir a paleta de comandos. Na paleta de comandos, pesquise e selecione Azure Functions: Open in portal.

  2. Escolha seu aplicativo de funções e pressione Enter. A página do aplicativo de funções é aberta no portal do Azure.

  3. Na guia Visão geral, selecione o link nomeado ao lado de Grupo de recursos.

    Selecione o grupo de recursos a ser excluído da página do aplicativo de funções.

  4. Na página Grupo de recursos, examine a lista de recursos incluídos e verifique se eles são aqueles que deseja excluir.

  5. Selecione Excluir grupo de recursos e siga as instruções.

    A exclusão poderá levar alguns minutos. Ao ser concluída, uma notificação será exibida por alguns segundos. Também é possível selecionar o ícone de sino na parte superior da página para exibir a notificação.

Para saber mais sobre os custos do Functions, confira Estimar os custos do plano de consumo.

Próximas etapas

Você usou o Visual Studio Code para criar um aplicativo de funções com uma função simples disparada por HTTP. No próximo artigo, você expandirá essa função conectando-se ao Armazenamento do Azure. Para saber mais sobre como se conectar a outros serviços do Azure, confira Adicionar associações a uma função existente no Azure Functions.