Adicionar uma API a aplicativos Web Estáticos do Azure com o Azure Functions

Artigo
06/01/2023

Você pode adicionar APIs sem servidor a Aplicativos Web Estáticos do Azure por meio da integração com o Azure Functions. Este artigo demonstra como adicionar e implantar uma API em um site de Aplicativos Web Estáticos do Azure.

Observação

As funções fornecidas por padrão em Aplicativos Web Estáticos são pré-configuradas para fornecer pontos de extremidade de API seguros e dar suporte apenas a funções disparadas por HTTP. Confira Suporte à API com Azure Functions para obter informações sobre como eles diferem de aplicativos Azure Functions autônomos.

Pré-requisitos

Conta do Azure com uma assinatura ativa.
- Se não tiver uma conta, crie uma gratuitamente.
Visual Studio Code
Extensão dos Aplicativos Web Estáticos do Azure para Visual Studio Code
Extensão do Azure Functions para Visual Studio Code
Node.js para execução do aplicativo de front-end e da API

Criar o aplicativo da web estático

Antes de adicionar uma API, crie e implante um aplicativo de front-end para Aplicativos Web Estáticos do Azure. Use um aplicativo existente que você já implantou ou crie um seguindo o guia de início rápido Criando seu primeiro site estático com Aplicativos Web Estáticos do Azure.

No Visual Studio Code, abra a raiz do repositório do aplicativo. A estrutura de pastas contém a origem do aplicativo front-end e o fluxo de trabalho do GitHub de Aplicativos Web Estáticos na pasta.github/workflows.

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)

Criar a API

Você cria um projeto Azure Functions para sua API do aplicativo Web estático. Por padrão, a extensão Aplicativos Web estáticos Visual Studio Code cria o projeto em uma pasta chamada api na raiz do repositório.

Pressione F1 para abrir a Paleta de comandos.
Selecione Aplicativos Web Estáticos do Azure: Criar função HTTP.... Se for solicitado que você instale a extensão Azure Functions, instale-a e execute novamente este comando.
Quando precisar, insira os seguintes valores:

Prompt Valor

Selecionar um idioma JavaScript

Selecione um modelo de programação V3

Forneça um nome de função message

Dica

Você pode saber mais sobre as diferenças entre modelos de programação no guia do desenvolvedor do Azure Functions

Um projeto Azure Functions é gerado com uma função disparada por HTTP. Seu aplicativo agora tem uma estrutura de projeto similar ao exemplo a seguir.
```
├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
├── api
│   ├── message
│   │   ├── function.json
│   │   └── index.js
│   ├── host.json
│   ├── local.settings.json
│   └── package.json
│
└── (folders and files from your static web app)
```
Em seguida, você mudará a messagefunção para retornar uma mensagem para o front-end. Atualize a função em api/message/index.js com o código a seguir.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

Prompt	Valor
Selecionar um idioma	JavaScript
Selecione um modelo de programação	V3
Forneça um nome de função	message

Dica

Você pode adicionar mais funções de API executando o comando Aplicativos Web Estáticos do Azure: criar função HTTP... novamente.

Atualizar o aplicativo front-end para chamar a API

Atualize seu aplicativo de front-end para chamar a API em /api/message e exibir a mensagem de resposta.

Se você usou os inícios rápidos para criar o aplicativo, use as instruções a seguir para aplicar as atualizações.

Atualize o conteúdo do arquivo src/index.html com o código a seguir para buscar o texto da função da API e exibi-lo na tela.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Vanilla JavaScript App</title>
</head>

<body>
    <main>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <b id="name">...</b></p>
    </main>

    <script>
    (async function() {
        const { text } = await( await fetch(`/api/message`)).json();
        document.querySelector('#name').textContent = text;
    }());
    </script>
</body>

</html>

Atualize o conteúdo desrc/app/app.module.ts com o seguinte código para habilitar HttpClient em seu aplicativo.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Atualize o conteúdo desrc/app/app.component.ts com o seguinte código para buscar o texto da função da API e exibi-lo na tela.

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div>{{message}}</div>`,
})
export class AppComponent {
  message = '';

  constructor(private http: HttpClient) {
    this.http.get('/api/message')
      .subscribe((resp: any) => this.message = resp.text);
  }
}

Atualize o conteúdo desrc/App.js com o seguinte código para buscar o texto da função da API e exibi-lo na tela.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function () {
      const { text } = await( await fetch(`/api/message`)).json();
      setData(text);
    })();
  });

  return <div>{data}</div>;
}

export default App;

Atualize o conteúdo desrc/App.vue com o seguinte código para buscar o texto da função da API e exibi-lo na tela.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  },
  async mounted() {
    const { text } = await (await fetch("/api/message")).json();
    this.message = text;
  }
};
</script>

Executar o front-end e a API localmente

Para executar seu aplicativo de front-end e a API juntos localmente, o Aplicativos Web Estáticos do Azure fornece uma CLI que emula o ambiente de nuvem. A CLI usa o Azure Functions Core Tools para executar a API.

Instalar ferramentas de linha de comando

Verifique se você tem as ferramentas de linha de comando necessárias instaladas.

npm install -D @azure/static-web-apps-cli

Criar aplicativo de front-end

Se seu aplicativo usar uma estrutura, compile o aplicativo para gerar a saída antes de executar a CLI estática de aplicativos Web.

Não é necessário compilar o aplicativo.

Instale as dependências do npm e compile o aplicativo na pasta dist/angular-basic.

npm install
npm run build --prod

Instale as dependências do npm e compile o aplicativo na pasta build.

npm install
npm run build

Instale as dependências do npm e compile o aplicativo na pasta dist.

npm install
npm run build

Iniciar a CLI

Execute o aplicativo front-end e a API juntos, iniciando o aplicativo com a CLI estática de aplicativos Web. Executar as duas partes do seu aplicativo dessa maneira permite que a CLI sirva a saída da compilação de front-end de uma pasta e torna a API acessível ao aplicativo em execução.

Na raiz do seu repositório, inicie a CLI de aplicativos Web estáticos com o start comando. Ajuste os argumentos se seu aplicativo tiver uma estrutura de pastas diferente.
- Nenhuma estrutura
- Angular
- React
- Vue
Passe a pasta atual (src) e a pasta de API (api) para a CLI.
```
swa start src --api-location api
```
Passe a pasta de saída de compilação(dist/angular-basic) e a pasta de API (api) para a CLI.
```
swa start dist/angular-basic --api-location api
```
Passe a pasta de saída de compilação(build) e a pasta de API (api) para a CLI.
```
swa start build --api-location api
```
Passe a pasta de saída de compilação(dist) e a pasta de API (api) para a CLI.
```
swa start dist --api-location api
```
Quando os processos da CLI iniciarem, acesse seu aplicativo em http://localhost:4280/. Observe como a página chama a API e exibe sua saída, Hello from the API.
Para interromper a CLI, digite Ctrl + C.

Adicionar local de API ao fluxo de trabalho

Antes de implantar seu aplicativo no Azure, atualize o fluxo de trabalho de ações do GitHub do repositório com o local correto da sua pasta de API.

Abra o fluxo de trabalho em .github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml.
Adicione a propriedade api_location e defina o valor como api.
Salve o arquivo.

Implantar alterações

Para publicar alterações em seu aplicativo Web estático no Azure, confirme e envie por push seu código para o repositório GitHub remoto.

Pressione F1 para abrir a Paleta de comandos.
Selecione o comando Git: Commit All.
Quando for solicitado que você insira uma mensagem de commit, insira feat: adicionar API e faça commit de todas as alterações no repositório git local.
Pressione F1 para abrir a Paleta de comandos.
Selecione o comandoGit: push.

Suas alterações são enviadas por push para o repositório remoto no GitHub, disparando o fluxo de trabalho de ações do GitHub de Aplicativos Web Estáticos para criar e implantar seu aplicativo.
Abra seu repositório no GitHub para monitorar o status da sua análise de fluxo de trabalho.
Quando a execução do fluxo de trabalho for concluída, visite seu aplicativo Web estático para exibir as alterações.

Próximas etapas

Definir as configurações do aplicativo