Guia de início rápido: criar uma função JavaScript no Azure usando o Visual Studio Code

Use o Visual Studio Code para criar uma função JavaScript que responda a solicitações HTTP. Teste o código localmente e, em seguida, implante-o no ambiente sem servidor do Azure Functions.

Importante

O conteúdo deste artigo muda com base na sua escolha do modelo de programação Node.js no seletor na parte superior da página. O modelo v4 está geralmente disponível e foi projetado para ter uma experiência mais flexível e intuitiva para desenvolvedores JavaScript e TypeScript. Saiba mais sobre as diferenças entre v3 e v4 no guia de migração.

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

Há também uma versão baseada em CLI deste artigo.

Configurar o seu ambiente

Antes de começar, certifique-se de que tem os seguintes requisitos:

• Uma conta do Azure com uma subscrição ativa. Crie uma conta gratuitamente.

• Node.js 14.x ou superior. Use o node --version comando para verificar sua versão.

• Visual Studio Code numa das plataformas suportadas.

• A extensão das Funções do Azure para o Visual Studio Code. Esta extensão instala as Ferramentas Principais do Azure Functions para você na primeira vez que executar localmente suas funções.

• Uma conta do Azure com uma subscrição ativa. Crie uma conta gratuitamente.

• Node.js 18.x ou superior. Use o node --version comando para verificar sua versão.

• Visual Studio Code numa das plataformas suportadas.

• A extensão do Azure Functions v1.10.4 ou superior para Visual Studio Code. Esta extensão instala as Ferramentas Principais do Azure Functions para você na primeira vez que executar localmente suas funções. Node.js v4 requer a versão 4.0.5382 ou uma versão posterior do Core Tools.

Instalar ou atualizar as ferramentas principais

A extensão do Azure Functions para Visual Studio Code integra-se com as Ferramentas Principais do Azure Functions para que você possa executar e depurar suas funções localmente no Visual Studio Code usando o tempo de execução do Azure Functions. Antes de começar, é uma boa ideia instalar o Core Tools localmente ou atualizar uma instalação existente para usar a versão mais recente.

No Visual Studio Code, selecione F1 para abrir a paleta de comandos e, em seguida, procure e execute o comando Azure Functions: Install or Update Core Tools.

Este comando inicia uma instalação baseada em pacote da versão mais recente das Ferramentas Principais.

Criar o seu projeto local

Nesta seção, você usa o Visual Studio Code para criar um projeto local do Azure Functions em JavaScript. Mais adiante neste artigo, você publica seu código de função no Azure.

1. Escolha o ícone do Azure na barra de atividades. Em seguida, na área Espaço de trabalho (local), selecione o + botão, escolha Criar função na lista suspensa. Quando solicitado, escolha Criar novo projeto.

   

2. Escolha o local do diretório para o espaço de trabalho do projeto e escolha Selecionar. Você deve criar uma nova pasta ou escolher uma pasta vazia para o espaço de trabalho do projeto. Não escolha uma pasta de projeto que já faça parte de um espaço de trabalho.

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

   Pedido	Seleção
   Selecione um idioma para o seu projeto de função	Selecione JavaScript.
   Selecione um modelo de programação JavaScript	Escolher Model V3
   Selecione um modelo para a primeira função do seu projeto	Selecione HTTP trigger.
   Fornecer um nome de função	Escreva 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, consulte Chaves de autorização.
   Selecione como gostaria de abrir o seu projeto	Selecione Open in current window.

   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, consulte Arquivos de projeto gerados.

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

   Pedido	Seleção
   Selecione um idioma para o seu projeto de função	Selecione JavaScript.
   Selecione um modelo de programação JavaScript	Escolher Model V4
   Selecione um modelo para a primeira função do seu projeto	Selecione HTTP trigger.
   Fornecer um nome de função	Escreva HttpExample.
   Selecione como gostaria de abrir o seu projeto	Escolher Open in current window

   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, consulte Guia do desenvolvedor JavaScript do Azure Functions.

Executar a função localmente

O Visual Studio Code integra-se com as ferramentas principais do Azure Functions para permitir que você execute este projeto em seu computador de desenvolvimento local antes de publicar no Azure.

1. Para iniciar a função localmente, pressione F5 ou o ícone Executar e Depurar na barra de atividades do lado esquerdo. O painel Terminal exibe a saída das ferramentas principais. Seu aplicativo é iniciado no painel Terminal . Você pode ver o ponto de extremidade de URL da sua função acionada por HTTP em execução localmente.

   

   Se você tiver problemas para executar no Windows, verifique se o terminal padrão do Visual Studio Code não está definido como WSL Bash.

2. Com as Ferramentas Principais ainda em execução no Terminal, escolha o ícone do Azure na barra de atividades. Na área Espaço de trabalho, expanda Funções do projeto>local. Clique com o botão direito do mouse (Windows) ou Ctrl - clique em (macOS) na nova função e escolha Executar função agora....

   

3. Em Inserir corpo da solicitação, você verá o valor do corpo da mensagem da solicitação de { "name": "Azure" }. Prima Enter para enviar esta mensagem de pedido para a sua 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. Com o painel Terminal focado, pressione Ctrl + C para parar as Ferramentas Principais e desconectar o depurador.

Depois de verificar se a função é executada corretamente em seu computador local, é hora de usar o Visual Studio Code para publicar o projeto diretamente no Azure.

Iniciar sessão no Azure

Antes de criar recursos do Azure ou publicar seu aplicativo, você deve entrar no Azure.

1. Se você ainda não estiver conectado, escolha o ícone do Azure na barra de atividades. Em seguida, na área Recursos, escolha Entrar no Azure....

   

   Se já tiver sessão iniciada e conseguir ver as suas subscrições existentes, vá para a secção seguinte. Se você ainda não tiver uma conta do Azure, escolha Criar uma Conta do Azure.... Os alunos podem escolher Criar uma Conta do Azure para Estudantes....

2. Quando solicitado no navegador, escolha sua conta do Azure e entre usando suas credenciais de conta do Azure. Se criar uma nova conta, pode iniciar sessão depois de a sua conta ser criada.

3. Depois de iniciar sessão com êxito, pode fechar a nova janela do browser. As assinaturas que pertencem à sua conta do Azure são exibidas na barra lateral.

Criar o aplicativo de função no Azure

Nesta seção, você cria um aplicativo de função e recursos relacionados em sua assinatura do Azure.

1. Escolha o ícone do Azure na barra de atividades. Em seguida, na área Recursos , selecione o + ícone e escolha a opção Criar Aplicativo de Função no Azure .

   

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

   Pedido	Seleção
   Selecionar subscrição	Escolha a subscrição a utilizar. Você não verá esse prompt quando tiver apenas uma assinatura visível em Recursos.
   Insira um nome globalmente exclusivo para o aplicativo de função	Digite um nome válido em um caminho de URL. O nome digitado é validado para garantir que seja exclusivo no Azure Functions.
   Selecione uma pilha de tempo de execução	Escolha a versão de idioma na qual você está executando localmente.
   Selecione um local para novos recursos	Para um melhor desempenho, escolha uma região perto de si.

   A extensão mostra o status de recursos individuais à medida que eles estão sendo criados no Azure no painel Azure: Log de Atividades .

   

3. Quando a criação estiver concluída, os seguintes recursos do Azure serão criados na sua subscrição. Os recursos são nomeados com base no nome do aplicativo de função:

   • 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 aplicativo de função, que fornece o ambiente para executar seu código de função. Um aplicativo de função 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.
   • Um plano do Serviço de Aplicativo, que define o host subjacente para seu aplicativo de função.
   • Uma instância do Application Insights conectada ao aplicativo de função, que rastreia o uso de suas funções no aplicativo.

   Depois de criar a aplicação de funções, é apresentada uma notificação e o pacote de implementação é aplicado.

   Gorjeta

   Por padrão, os recursos do Azure exigidos pelo seu aplicativo de função são criados com base no nome do aplicativo de função fornecido. Por padrão, eles também são criados no mesmo novo grupo de recursos com o aplicativo de função. Se você quiser personalizar os nomes desses recursos ou reutilizar recursos existentes, você precisa publicar o projeto com opções de criação avançadas .

Implementar o projeto no Azure

Importante

A implantação em um aplicativo de função existente sempre substitui o conteúdo desse aplicativo no Azure.

1. Na área Recursos da atividade do Azure, localize o recurso de aplicativo de função que você acabou de criar, clique com o botão direito do mouse no recurso e selecione Implantar no aplicativo funcional....

2. Quando solicitado sobre a substituição de implantações anteriores, selecione Implantar para implantar seu código de função no novo recurso de aplicativo de função.

3. Após a conclusão da implantação, selecione Exibir saída para exibir os resultados da criação e 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.

   

Executar a função no Azure

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

   

2. Em Inserir corpo da solicitação, você verá o valor do corpo da mensagem da solicitação de { "name": "Azure" }. Prima Enter para enviar esta mensagem de pedido para a sua função.

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

Alterar o código e reimplantar no Azure

1. No Visual Studio Code no modo de exibição Explorer, selecione o ./HttpExample/index.js arquivo.

2. Substitua o arquivo pelo código a seguir para construir um objeto JSON e retorná-lo.

   module.exports = async function (context, req) {
   
       try {
           context.log('JavaScript HTTP trigger function processed a request.');
   
           // Read incoming data
           const name = (req.query.name || (req.body && req.body.name));
           const sport = (req.query.sport || (req.body && req.body.sport));
   
           // fail if incoming data is required
           if (!name || !sport) {
   
               context.res = {
                   status: 400
               };
               return;
           }
   
           // Add or change code here
           const message = `${name} likes ${sport}`;
   
           // Construct response
           const responseJSON = {
               "name": name,
               "sport": sport,
               "message": message,
               "success": true
           }
   
           context.res = {
               // status: 200, /* Defaults to 200 */
               body: responseJSON,
               contentType: 'application/json'
           };
       } catch(err) {
           context.res = {
               status: 500
           };
       }
   }
   

3. Execute novamente o aplicativo de função localmente.

4. No prompt Enter request body, altere o corpo da mensagem de request para { "name": "Tom","sport":"basketball" }. Prima Enter para enviar esta mensagem de pedido para a sua função.

5. Veja a resposta na notificação:

   {
     "name": "Tom",
     "sport": "basketball",
     "message": "Tom likes basketball",
     "success": true
   }
   

6. Reimplante a função no Azure.

Resolução de Problemas

Use a tabela a seguir para resolver os problemas mais comuns encontrados ao usar este início rápido.

Problema	Solução
Não é possível criar um projeto de função local?	Verifique se você tem a extensão do Azure Functions instalada.
Não é possível executar a função localmente?	Certifique-se de que tem instalada a versão mais recente das Ferramentas Principais do Azure Functions. Ao executar no Windows, certifique-se de que o shell de terminal padrão para Visual Studio Code não está definido como WSL Bash.
Não é possível implantar a função no Azure?	Revise a Saída para obter informações de erro. O ícone de sino no canto inferior direito é outra maneira de visualizar a saída. Você publicou em um aplicativo de função existente? Essa ação substitui o conteúdo desse aplicativo no Azure.
Não foi possível executar o aplicativo Function baseado em nuvem?	Lembre-se de usar a cadeia de caracteres de consulta para enviar parâmetros.

Clean up resources (Limpar recursos)

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

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

1. No Visual Studio Code, selecione o ícone do Azure para abrir o explorador do Azure.
2. Na secção Grupos de Recursos, localize o seu grupo de recursos.
3. Clique com o botão direito do mouse no grupo de recursos e selecione Excluir.

Para saber mais sobre os custos do Functions, consulte Estimando os custos do plano de consumo.

Próximos passos

Você usou o Visual Studio Code para criar um aplicativo de função com uma função simples acionada por HTTP. No próximo artigo, você expande essa função conectando-se ao Azure Cosmos DB ou ao Armazenamento do Azure. Para saber mais sobre como se conectar a outros serviços do Azure, consulte Adicionar associações a uma função existente no Azure Functions. Se quiser saber mais sobre segurança, consulte Protegendo o Azure Functions.

Conectar-se ao Azure Cosmos DB

Conectar-se ao Armazenamento de Filas do Azure

Você usou o Visual Studio Code para criar um aplicativo de função com uma função simples acionada por HTTP.

Saiba mais sobre as funções JavaScript