Exercício - Criar um projeto do Azure Functions

6 minutos

Seu aplicativo 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:

Crie uma ramificação enquanto se prepara para fazer alterações no seu aplicativo Web.
Explore o projeto Azure Function.
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 proxy de solicitações HTTP para a API.
Execute a API e o aplicativo Web.

Obter a aplicação Function

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

Criar uma ramificação da API

Antes de fazer alterações em um aplicativo, é uma boa prática criar uma nova ramificação para as alterações. Você está prestes a concluir a API para seu aplicativo, então agora é um bom momento para criar uma ramificação.

No Visual Studio Code, abra a paleta de comandos pressionando F1.
Digite e selecione Git: Checkout para....
Selecione Criar nova ramificação.
Digite api para o novo nome de ramificação e pressione Enter.

Você acabou de criar a ramificação git api.

Conclua a API de 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 de Static Web Apps.

No Visual Studio Code, abra a paleta de comandos pressionando F1.
Entre e selecione Terminal: Create New Terminal (In Ative Workspace).
Verifique se você está na pasta raiz do projeto.
Execute o seguinte comando git para renomear a api-starter pasta para api.
```
git mv api-starter api
```
Abra a paleta de comandos pressionando F1.
Insira e selecione Git: Commit All.
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 seu projeto do Azure Functions, juntamente com três funções.

Diretório e ficheiro	Método	Percurso
api/produtos-post	PUBLICAR	`products`
api/produtos-put	INSERIR	`products/:id`
API/Produtos-Excluir	SUPRIMIR	`products/:id`

Criar a função HTTP GET

Sua API tem rotas para manipular os produtos para a lista de compras, mas não tem uma rota para obter os produtos. Vamos acrescentar isso agora.

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

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

Vá para o Visual Studio Marketplace e instale a extensão do Azure Functions para Visual Studio Code.
Quando a guia de extensão for carregada no Visual Studio Code, selecione Instalar.
Após a conclusão da instalação, selecione Recarregar.

Observação

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

Criar a função

Agora você estende a sua aplicação Azure Functions com uma função para obter os seus produtos.

No Visual Studio Code, abra a paleta de comandos pressionando F1.
Insira e selecione Azure Functions: Criar Função.
Quando solicitado a criar uma função, selecione Acionador HTTP.
Digite 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, o que o separa dos projetos individuais do aplicativo Web. Todos os aplicativos Web que usam as estruturas front-end fazem chamadas para a mesma API. Você pode decidir como estruturar seu aplicativo, mas para este exemplo é útil vê-los separados.

Configurar o método HTTP e o endpoint de rota

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

O endpoint da rota tem o mesmo nome que a pasta que aloja a função, por convençã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, você deseja que o ponto de extremidade seja produtos.

Configure a 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 apenas solicitações GET.
Adicione uma entrada "route": "products" após a matriz de métodos.

Agora, a sua função é ativada por uma solicitação HTTP GET para produtos . O seu function.json deve assemelhar-se 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 lógica que é executada quando você faz uma solicitação HTTP para a rota.

Você precisa atualizar a lógica do sistema 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 de extremidade da função para retornar os produtos:

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

Substitua o seu 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 devolve com um código de status de 200, quando bem-sucedido.

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

Agora, diga ao Azure Functions para 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 ficheiro:

{
  "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 está listado no arquivo .gitignore , o que impede que esse arquivo seja enviado por push para o GitHub. O arquivo está listado em .gitignore porque você pode armazenar segredos nele que você não gostaria no GitHub. Esta listagem é a razão pela qual você teve que criar o arquivo quando criou seu repositório a partir do modelo.

Executar a API

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

Observação

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

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

Executar o aplicativo Web

Sua API está em execução. Agora você precisa configurar seu aplicativo front-end para fazer sua solicitação HTTP para sua API. O aplicativo front-end é executado em uma porta e a API é executada em uma porta diferente (7071). Cada framework front-end pode ser configurado para fazer proxy de solicitações HTTP para uma porta de forma segura.

Configurar a porta proxy

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

Abra o arquivo angular-app/proxy.conf.json.
Localize a configuração target: 'http://localhost:7071'.
Note que a porta de 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',.
Note que a porta de destino aponta para 7071.

Inicie a sua aplicação web front-end

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

Abra uma segunda instância do terminal git.
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
```

Execute o aplicativo cliente front-end:

npm start

npm start

npm run dev

npm run serve

Navegue até seu aplicativo

É hora de ver seu aplicativo sendo executado 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 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.

Comentários

Esta página foi útil?

Exercício - Criar um projeto do Azure Functions

Obter a aplicação Function

Criar uma ramificação da API

Conclua a API de Funções do Azure

Criar a função HTTP GET

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

Criar a função

Configurar o método HTTP e o endpoint de rota

Atualizar a lógica da função

Configurar o CORS (Cross-Origin Resource Sharing) localmente

Executar a API

Executar o aplicativo Web

Configurar a porta proxy

Inicie a sua aplicação web front-end

Navegue até seu aplicativo

Próximos passos

Comentários