Início Rápido: Criar uma função JavaScript no Azure com o Visual Studio Code

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

A conclusão deste início rápido implica um pequeno custo de alguns cêntimos de USD ou menos na sua conta do Azure.

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

Configurar o ambiente

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

Criar o projeto local

Nesta secção, vai utilizar o Visual Studio Code para criar um projeto de Funções do Azure local no JavaScript. Mais adiante neste artigo, irá publicar o seu código de função no Azure.

  1. Selecione o ícone do Azure na Barra de atividade. Em seguida, na área Área de Trabalho (local ), selecione o + botão e selecione Criar Função no menu pendente. Quando lhe for pedido, selecione Criar novo projeto.

    Captura de ecrã a mostrar a janela criar um novo projeto.

  2. Selecione a localização do diretório para a área de trabalho do projeto e selecione Selecionar. Deve criar uma nova pasta ou escolher uma pasta vazia para a área de trabalho do projeto. Não escolha uma pasta de projeto que já faça parte de uma área de trabalho.

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

    Prompt Seleção
    Selecionar um idioma para o projeto de função Selecione JavaScript.
    Selecionar um modelo para a primeira função do projeto Selecione HTTP trigger.
    Indique um nome de função Escreva HttpExample.
    Nível de autorização Selecione Anonymous, o que permite que qualquer pessoa chame o ponto final da função. Para saber mais sobre o nível de autorização, veja Chaves de autorização.
    Selecione como pretende abrir o projeto Selecione Add to workspace.

    Com estas informações, o Visual Studio Code gera um projeto Funções do Azure com um acionador HTTP. Pode ver os ficheiros do projeto local no Explorador. Para saber mais sobre os ficheiros criados, veja Ficheiros de projeto gerados.

Executar a função localmente

O Visual Studio Code integra-se nas ferramentas Funções do Azure Core para lhe permitir executar este projeto no seu computador de desenvolvimento local antes de publicar no Azure.

  1. Para iniciar a função localmente, prima F5 ou o ícone Executar e Depurar na Barra de atividade do lado esquerdo. O painel Terminal apresenta a Saída das Ferramentas Principais. A sua aplicação é iniciada no painel Terminal . Pode ver o ponto final do URL da função acionada por HTTP em execução localmente.

    Captura de ecrã a mostrar a saída do VS Code da função local.

    Se tiver problemas em execução no Windows, certifique-se de que o terminal predefinido do Visual Studio Code não está definido como WSL Bash.

  2. Com as Ferramentas Principais ainda em execução no Terminal, selecione o ícone do Azure na barra de atividade. Na área Área de Trabalho, expandaFunçõesde Projeto> Local. Clique com o botão direito do rato (Windows) ou Ctrl - clique (macOS) na nova função e selecione Executar Função Agora....

    Executar a função agora a partir do Visual Studio Code

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

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

  5. Com o painel Terminal focado, prima Ctrl + C para parar as Ferramentas Principais e desligar o depurador.

Depois de verificar se a função é executada corretamente no seu computador local, está na altura de utilizar o Visual Studio Code para publicar o projeto diretamente no Azure.

Iniciar sessão no Azure

Antes de poder publicar a aplicação, tem de iniciar sessão no Azure.

  1. Se ainda não tiver sessão iniciada, selecione o ícone do Azure na Barra de atividade. Em seguida, na área Recursos , selecione Iniciar sessão no Azure....

    Captura de ecrã a mostrar a janela de início de sessão no Azure no VS Code.

    Se já tiver sessão iniciada e conseguir ver as subscrições existentes, aceda à secção seguinte. Se ainda não tiver uma conta do Azure, selecione Criar e Conta do Azure.... Os estudantes podem escolher Criar e Conta do Azure para Estudantes....

  2. Quando lhe for pedido no browser, escolha a sua conta do Azure e inicie sessão com as credenciais da 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 subscrições que pertencem à sua conta do Azure são apresentadas na barra lateral.

Criar a aplicação de funções no Azure

Nesta secção, vai criar uma aplicação de funções e recursos relacionados na sua subscrição do Azure.

  1. Selecione o ícone do Azure na Barra de atividade. Em seguida, na área Recursos , selecione o + ícone e selecione a opção Criar Aplicação de Funções no Azure .

    Criar um recurso na sua subscrição do Azure

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

    Prompt Seleção
    Selecionar subscrição Escolha a subscrição a utilizar. Não verá este pedido quando tiver apenas uma subscrição visível em Recursos.
    Introduza um nome globalmente exclusivo para a aplicação de funções Escreva um nome válido num caminho de URL. O nome que escrever é validado para se certificar de que é exclusivo no Funções do Azure.
    Selecionar uma pilha de runtime Selecione a versão de idioma na qual tem estado a executar localmente.
    Selecionar uma localização para novos recursos Para um melhor desempenho, escolha uma região perto de si.

    A extensão mostra o estado dos recursos individuais à medida que estão a ser criados no Azure no painel Azure: Registo de Atividades .

    Registo da criação de recursos do Azure

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

    • Um grupo de recursos, que é um contentor lógico para recursos relacionados.
    • Uma conta de Armazenamento do Azure padrão, que mantém o estado e outras informações sobre os seus projetos.
    • Uma aplicação de funções, que fornece o ambiente para executar o código de função. Uma aplicação de funções permite-lhe agrupar funções como uma unidade lógica para facilitar a gestão, implementação e partilha de recursos no mesmo plano de alojamento.
    • Um plano Serviço de Aplicações, que define o anfitrião subjacente para a sua aplicação de funções.
    • Uma instância do Application Insights ligada à aplicação de funções, que controla a utilização das suas funções na aplicação.

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

    Dica

    Por predefinição, os recursos do Azure exigidos pela sua aplicação de funções são criados com base no nome da aplicação de funções que fornecer. Por predefinição, também são criados no mesmo novo grupo de recursos com a aplicação de funções. Se quiser personalizar os nomes destes recursos ou reutilizar recursos existentes, tem de publicar o projeto com opções avançadas de criação .

Implementar o projeto no Azure

Importante

A implementação numa aplicação de funções existente substitui sempre o conteúdo dessa aplicação no Azure.

  1. Selecione o ícone do Azure na Barra de atividade e, em seguida, na área Área de Trabalho, selecione a pasta do projeto e selecione o botão Implementar...

    Implementar projeto a partir da área de trabalho do Visual Studio Code

  2. Selecione Implementar na Aplicação de Funções..., selecione a aplicação de funções que acabou de criar e selecione Implementar.

  3. Após a conclusão da implementação, selecione Ver Saída para ver os resultados de criação e implementação, incluindo os recursos do Azure que criou. Se perder a notificação, selecione o ícone de sino no canto inferior direito para vê-la novamente.

    Captura de ecrã a mostrar a janela Ver Saída.

Executar a função no Azure

  1. De volta à área Recursos na barra lateral, expanda a sua subscrição, a sua nova aplicação de funções e Funções. Clique com o botão direito do rato (Windows) ou Ctrl - clique (macOS) na HttpExample função e selecione Executar Função Agora....

    Captura de ecrã da execução da função no Azure a partir do Visual Studio Code.

  2. Em Introduzir corpo do pedido , verá o valor do corpo da mensagem de pedido 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 devolve uma resposta, é levantada uma notificação no Visual Studio Code.

Alterar o código e reimplementar para o Azure

  1. No Visual Studio Code, na vista Explorador, selecione o ./HttpExample/index.js ficheiro.

  2. Substitua o ficheiro pelo seguinte código para construir um objeto JSON e devolvê-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 a aplicação de funções localmente.

  4. Na linha de comandos , Introduza corpo do pedido, altere o corpo da mensagem de pedido 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. Reimplementar a função para o Azure.

Resolução de problemas

Utilize a tabela abaixo para resolver os problemas mais comuns encontrados ao utilizar este início rápido.

Problema Solução
Não consegue criar um projeto de função local? Certifique-se de que tem a extensão Funções do Azure instalada.
Não consegue executar a função localmente? Certifique-se de que tem o Funções do Azure Core Tools instalado.
Ao executar no Windows, certifique-se de que a shell de terminal predefinida do Visual Studio Code não está definida como WSL Bash.
Não consegue implementar a função no Azure? Reveja a Saída para obter informações de erro. O ícone de sino no canto inferior direito é outra forma de ver a saída. Publicou numa aplicação de funções existente? Essa ação substitui o conteúdo dessa aplicação no Azure.
Não foi possível executar a aplicação de Funções baseada na cloud? Lembre-se de utilizar a cadeia de consulta para enviar parâmetros.

Limpar os recursos

Quando continuar para o passo seguinte e adicionar um enlace de fila do Armazenamento do Azure à sua função, terá de manter todos os seus recursos implementados para basear-se no que já fez.

Caso contrário, pode utilizar os seguintes passos para eliminar a aplicação de funções e os respetivos 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 grupo de recursos.
  3. Clique com o botão direito do rato no grupo de recursos e selecione Eliminar.

Para saber mais sobre os custos das Funções, veja Estimar custos do plano de Consumo.

Passos seguintes

Utilizou o Visual Studio Code para criar uma aplicação de funções com uma função simples acionada por HTTP. No artigo seguinte, vai expandir essa função ao ligar ao Azure Cosmos DB ou ao Armazenamento do Azure. Para saber mais sobre como ligar a outros serviços do Azure, veja Adicionar enlaces a uma função existente no Funções do Azure. Se quiser saber mais sobre segurança, consulte Proteger Funções do Azure.