Exercício – Criar um projeto do Azure Functions

6 minutos

Seu aplicativo Web de lista de compras precisa de uma API. Nesse exercício, você vai compilar e executar 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.

Nesse exercício, você irá executar as seguintes tarefas:

Crie um branch durante a preparação para fazer alterações no aplicativo Web.
Explore o projeto de Função do Azure.
Crie a função HTTP GET.
Substitua o código inicial da função pela lógica para obter produtos.
Configure o aplicativo Web para usar um proxy de solicitações HTTP para a API.
Execute a API e o aplicativo Web.

Obter o aplicativo de Funções

Agora, adicione uma API e conecte-a ao seu aplicativo de front-end. A pasta api-starter inclui um projeto incompleto do Azure Functions. Então, vamos concluir isso agora.

Criar um branch de API

Antes de fazer alterações em um aplicativo, é uma boa prática criar um branch para as alterações. Você está prestes a concluir a API do aplicativo, portanto, este é um bom momento para criar um branch.

No Visual Studio Code, abra a paleta de comandos pressionando F1.
Insira e selecione Git: fazer check-out em....
Selecione Criar branch.
Insira api como o nome do branch e pressione Enter.

Você acabou de criar o GIT branch da api.

Concluir a API do Azure Functions

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

No Visual Studio Code, abra a paleta de comandos pressionando F1.
Insira e selecione Terminal: criar terminal (no workspace ativo).
Verifique se você está na pasta raiz do projeto.
Execute o comando do Git a seguir para renomear a pasta api-starter para api.
```
git mv api-starter api
```
Abra a paleta de comandos pressionando F1.
Insira e selecione Git: confirmar tudo.
Insira a mensagem de commit de api e pressione Enter.

Agora, você verá uma pasta API no Visual Studio Code Explorer. A pasta api contém seu projeto Azure Functions com três funções.

Pasta e arquivo	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 API tem rotas para manipular os produtos da lista de compras, mas não tem uma rota para obtê-los. Vamos acrescentar isso agora.

Instalar a extensão do Azure Functions para o Visual Studio Code

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

Acesse o Visual Studio Marketplace e instale a extensão Azure Functions para Visual Studio Code.
Quando a guia de extensão for carregada no Visual Studio Code, selecione Instalar.
Quando a instalação for concluída selecione Recarregar.

Observação

Certifique-se de instalar o Azure Functions Core Tools, que permite que você execute o Azure Functions localmente.

Criar a função

Agora você estende seu aplicativo de Funções do Azure com uma função para obter seus produtos.

No Visual Studio Code, abra a paleta de comandos pressionando F1.
Insira e selecione Azure Functions: criar função.
Quando for solicitada a criação de uma função, selecione Gatilho HTTP.
Insira products-get como o nome da função.
Selecione Anônimo como o nível de autenticação.

Observação

O aplicativo Functions está na pasta api, que o separa de projetos individuais de aplicativo Web. Todos os aplicativos Web que usam as estruturas de front-end fazem chamadas para a mesma API. Você pode decidir como estruturar seu aplicativo, mas, para este exemplo, ajuda vê-los separados.

Configurar o método HTTP e o ponto de extremidade de rota

Observe que a pasta api/products-get contém o arquivo function.json. Esse arquivo contém a configuração de sua função.

O ponto de extremidade de rota tem o mesmo nome que a pasta que contém a função, por convenção. Como a função é criada na pasta products-get, o ponto de extremidade de rota é gerado como products-get, por padrão. No entanto, você quer que o ponto de extremidade seja products.

Configure sua função:

Abra o arquivo api/products-get/function.json.
Observe que os métodos permitem GET e POST.
Altere a matriz de métodos para permitir somente solicitações GET.
Adicione uma entrada "route": "products" após a matriz de métodos.

Agora, a função é disparada em uma solicitação HTTP GET para products. Seu 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 da função

O arquivo index.js na pasta api/products-get contém a lógica que é executada quando você faz uma solicitação HTTP para a rota.

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

Agora, altere o ponto de extremidade da função para retornar os produtos:

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

Substitua o conteúdo 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 retorna com um código de status de 200, quando bem-sucedida.

Você não precisa se preocupar com o CORS ao publicar nos Aplicativos Web Estáticos do Azure. Os Aplicativos Web Estáticos do Azure configuram automaticamente o aplicativo para que ele possa se comunicar com sua API no Azure usando um proxy inverso. Mas, ao executar localmente, você precisa configurar o CORS para permitir que o aplicativo Web e a API se comuniquem.

Agora, instrua o Azure Functions a permitir que seu aplicativo Web faça solicitações HTTP para a API em seu computador.

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

Adicione o seguinte conteúdo ao arquivo:

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

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

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

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

Observação

O arquivo local.settings.json é listado no arquivo .gitignore, o que impede que ele arquivo seja enviado por push para o GitHub. Isso ocorre porque você pode armazenar segredos nesse arquivo que não deseja que estejam no GitHub. Por isso você precisou criar o arquivo quando criou o repositório com base no modelo.

Executar a API

Agora, é hora de ver o aplicativo Web e o projeto do Azure Functions funcionarem juntos. Comece executando o projeto do Azure Functions localmente seguindo estas etapas:

Observação

Certifique-se de instalar o Azure Functions Core Tools, que permite que você execute o Azure Functions localmente.

Abra um terminal git e acesse a pasta api:
```
cd api
```
Execute o aplicativo do Azure Functions localmente:
```
npm install
```
```
npm start
```

Execute o aplicativo Web

Sua API está em execução. Agora, você precisa configurar o aplicativo de front-end para fazer sua solicitação HTTP para a API. O aplicativo de front-end é executado em uma porta e a API é executada em uma outra porta (7071). Cada estrutura de front-end pode ser configurada para usar um proxy das solicitações HTTP para uma porta com segurança.

Configurar a porta de proxy

Configure o proxy de seu aplicativo de front-end com as seguintes etapas:

Abra o arquivo angular-app/proxy.conf.json.
Localize a configuração target: 'http://localhost:7071'.
Observe que a porta do destino aponta para 7071.

Abra o arquivo react-app/package.json.
Localize a configuração "proxy": "http://localhost:7071/",.
Observe que a porta do proxy aponta para 7071.

Abra o arquivo svelte-app/rollup.config.js.
Localize a linha de código const api = 'http://localhost:7071/api';.
Observe que a porta da API aponta para 7071.

Abra o arquivo vue-app/vue.config.js.
Localize a configuração target: 'http://localhost:7071',.
Observe que a porta do destino aponta para 7071.

Executar o aplicativo Web de front-end

A API já está em execução na porta 7071. Agora, quando você executa seu aplicativo Web, ele faz solicitações HTTP à sua API. Execute seu aplicativo Web seguindo estas etapas:

Abra uma segunda instância do terminal git.
Em seguida, insira este comando para acessar a pasta da sua estrutura de front-end preferida:
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```

Execute o aplicativo cliente de front-end:

npm start

npm start

npm run dev

npm run serve

Navegar até o aplicativo

É hora de ver o aplicativo em execução localmente na API do Azure Functions.

Navegue até http://localhost:4200.

Navegue até http://localhost:3000.

Navegue até http://localhost:5000.

Navegue até http://localhost:8080.

Você criou o aplicativo, que agora está em execução localmente fazendo solicitações HTTP GET para a API. Agora, pare o aplicativo e a API em execução pressionando Ctrl-C nos terminais.

Próximas etapas

O aplicativo funciona localmente, e a próxima etapa é publicar o aplicativo e a API.

Exercício – Criar um projeto do Azure Functions

Obter o aplicativo de Funções

Criar um branch de API

Concluir a API do Azure Functions

Criar a Função HTTP GET

Instalar a extensão do Azure Functions para o Visual Studio Code

Criar a função

Configurar o método HTTP e o ponto de extremidade de rota

Atualizar a lógica da função

Configurar o CORS (Compartilhamento de Recursos entre Origens) localmente

Executar a API

Execute o aplicativo Web

Configurar a porta de proxy

Executar o aplicativo Web de front-end

Navegar até o aplicativo

Próximas etapas

Comentários