Exercício – Criar um projeto das Funções do Azure

  • 6 minutos

A sua aplicação Web de lista de compras precisa de uma API. Neste exercício, você cria e executa sua API usando um projeto do Azure Functions. A partir daí, você estende a API com uma nova função usando a extensão Azure Functions para Visual Studio Code.

Neste exercício, conclua as seguintes etapas:

  1. Crie uma ramificação enquanto se prepara para fazer alterações no seu aplicativo Web.
  2. Explore o projeto Azure Function.
  3. Crie a função HTTP GET.
  4. Substitua o código inicial da função pela lógica para obter produtos.
  5. Configure o aplicativo Web para proxy de solicitações HTTP para a API.
  6. Execute a API e o aplicativo Web.

Obter a aplicação de funções

Agora, adicione uma API e conecte-a ao seu aplicativo front-end. A pasta api-starter inclui um projeto incompleto das Funções do Azure, Então, vamos completar isso agora.

Criar uma ramificação da API

Antes de fazer alterações a uma aplicação, recomenda-se criar um novo ramo para as alterações. Está prestes a completar a API da sua aplicação, por isso agora é uma boa altura para criar um ramo.

  1. No Visual Studio Code, abra a paleta de comandos pressionando F1.

  2. Entre e selecione Git: Checkout para....

  3. Selecione Criar nova ramificação.

  4. Insira api para o novo nome de ramificação e pressione Enter.

Acabou de criar um ramo git api.

Completar a API das Funções do Azure

Para concluir a API, comece movendo o código inicial da API para uma pasta chamada api. Você inseriu esse nome de pasta para o api_location quando criou a instância Static Web Apps.

  1. No Visual Studio Code, abra a paleta de comandos pressionando F1.

  2. Entre e selecione Terminal: Create New Terminal (In Ative Workspace).

  3. Verifique se você está na pasta raiz do projeto.

  4. Execute o seguinte comando git para renomear a pasta api-starter para api.

    git mv api-starter api

  5. Abra a paleta de comandos ao premir F1.

  6. Digite e selecione Git: Confirmar tudo.

  7. Digite a api de mensagem de confirmação e pressione Enter.

Agora, você vê uma pasta api no explorador de código do Visual Studio. A pasta api contém o seu projeto das Funções do Azure juntamente com três funções.

Pasta e ficheiro Método Rota
api/products-post POST products
api/products-put PUT products/:id
api/products-delete DELETE products/:id

Criar a função HTTP GET

A sua API tem rotas para manipular os produtos para a lista de compras, mas falta-lhe uma rota para obter os produtos. Vamos acrescentar isso agora.

Instalar a extensão Funções do Azure para o Visual Studio Code

Você pode criar e gerenciar aplicativos do Azure Functions usando a extensão do Azure Functions para Visual Studio Code.

  1. Vá para o Visual Studio Marketplace e instale a extensão do Azure Functions para Visual Studio Code.

  2. Quando a guia de extensão for carregada no Visual Studio Code, selecione Instalar.

  3. Após a conclusão da instalação, selecione Recarregar.

Nota

Certifique-se de instalar as Ferramentas Principais do Azure Functions, que permitem executar o Azure Functions localmente.

Criar a função

Agora você estende seu aplicativo Azure Function com uma função para obter seus produtos.

  1. No Visual Studio Code, abra a paleta de comandos pressionando F1.

  2. Insira e selecione Azure Functions: Create Function.

  3. Quando solicitado a criar uma função, selecione Gatilho HTTP.

  4. Digite products-get como o nome da função.

  5. Selecione Anônimo como o nível de autenticação.

Nota

A aplicação de Funções encontra-se na pasta api, que a separa dos projetos individuais da aplicação Web. Todas as aplicações Web que utilizam as arquiteturas de front-end fazem chamadas para a mesma API. Pode decidir como quer estruturar a sua aplicação, mas no caso deste exemplo, é útil vê-las separadas.

Configurar o método HTTP e o ponto final da rota

Repare que a pasta api/products-get contém o ficheiro function.json. Este ficheiro contém a configuração para a sua função.

Por convenção, o ponto final da rota terá o mesmo nome da pasta que contém a função. Como a função é criada na pasta products-get, o ponto de extremidade da rota é gerado como products-get, por padrão. No entanto, pretende que o ponto final seja products.

Configurar a função:

  1. Abra o arquivo api/products-get/function.json.

  2. Observe que os métodos permitem ambos e GETPOST.

  3. Altere a matriz de métodos para permitir GET apenas solicitações.

  4. Adicione uma "route": "products" entrada após a matriz de métodos.

Agora, a sua função é acionada num pedido HTTP GET para products. O ficheiro function.json deve ser semelhante ao seguinte código:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Atualizar a lógica de função

O ficheiro index.js na pasta api/products-get contém a lógica que é executada quando faz um pedido HTTP à rota.

Você precisa atualizar a lógica para obter seus produtos. Há lógica de acesso a dados no módulo JavaScript /shared/product-data.js. O módulo product-data expõe uma função getProducts para obter os produtos para a lista de compras.

Agora, altere o ponto final da função para devolver os produtos:

  1. Abra o arquivo api/products-get/index.js.

  2. Substitua os respetivos conteúdos pelo seguinte código:

    const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

Sua função obtém os produtos e os devolve com um código de status de 200, quando bem-sucedido.

Configurar o CORS (Cross-Origin Resource Sharing) localmente

Você não precisa se preocupar com CORS ao publicar nos Aplicativos Web Estáticos do Azure. As Aplicações Web Estáticas do Azure configuram automaticamente a sua aplicação para que possa comunicar com a sua API no Azure com recurso a um proxy inverso. Porém, no caso de ser executada localmente, é necessário configurar a CORS para permitir a comunicação entre a aplicação Web e a API.

Agora, tem de indicar às Funções do Azure que permite que a sua aplicação Web faça pedidos HTTP à API no seu computador.

  1. Crie um arquivo chamado api/local.settings.json.

  2. Adicione o seguinte conteúdo ao ficheiro:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Nota

O ficheiro local.settings.json está listado no ficheiro .gitignore, o que impede a emissão deste ficheiro para o GitHub. Isso ocorre porque você pode armazenar segredos neste arquivo que você não gostaria no GitHub. Foi por isso que teve de criar o ficheiro quando criou o seu repositório a partir do modelo.

Executar a API

Chegou a altura de ver a sua aplicação Web e o projeto das Funções do Azure a funcionarem em conjunto. Comece por executar o seu projeto das Funções do Azure localmente ao seguir estes passos:

Nota

Certifique-se de instalar as Ferramentas Principais do Azure Functions, que permitem executar o Azure Functions localmente.

  1. Abra um terminal git e vá para a pasta api :

    cd api

  2. Execute o aplicativo Azure Functions localmente:

    npm install

    npm start

Executar a aplicação Web

A sua API está a ser executada. Agora tem de configurar a sua aplicação de front-end para fazer o pedido HTTP à API. O aplicativo front-end é executado em uma porta e a API é executada em uma porta diferente (7071). Cada arquitetura de front-end pode ser configurada com segurança para pedidos HTTP do proxy para uma porta.

Configurar a porta do proxy

Configure o proxy para a sua aplicação de front-end ao seguir os seguintes passos:

  1. Abra o arquivo angular-app/proxy.conf.json.

  2. Localize a target: 'http://localhost:7071' configuração.

  3. Observe que a porta do destino aponta para 7071.

  1. Abra o arquivo react-app/package.json.

  2. Localize a "proxy": "http://localhost:7071/", configuração.

  3. Observe que a porta do proxy aponta para 7071.

  1. Abra o arquivo svelte-app/rollup.config.js.

  2. Localize a linha de código const api = 'http://localhost:7071/api';.

  3. Observe que a porta da API aponta para 7071.

  1. Abra o arquivo vue-app/vue.config.js.

  2. Localize a target: 'http://localhost:7071', configuração.

  3. Observe que a porta do destino aponta para 7071.

Executar a aplicação Web de front-end

A sua API já está a ser executada na porta 7071. Agora, quando você executa seu aplicativo Web, ele faz suas solicitações HTTP para sua API. Execute a sua aplicação Web ao seguir estes passos:

  1. Abra uma segunda instância do terminal git.

  2. Em seguida, digite este comando para ir para a pasta de sua estrutura de front-end preferida:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  3. Execute o aplicativo cliente front-end:

    npm start

    npm start

    npm run dev

    npm run serve

Navegar para a aplicação

Chegou a altura de ver a sua aplicação a ser executada localmente em relação à API das Funções do Azure.

  1. Navegue para http://localhost:4200.
  1. Navegue para http://localhost:3000.
  1. Navegue para http://localhost:5000.
  1. Navegue para http://localhost:8080.
  1. Você criou seu aplicativo e agora ele está sendo executado localmente fazendo solicitações HTTP GET para sua API. Agora, pare seu aplicativo e API em execução pressionando Ctrl-C nos terminais.

Próximos passos

Seu aplicativo funciona localmente e sua próxima etapa é publicar o aplicativo com a API.