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

Artigo
05/13/2024

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 de Aplicativos Web Estáticos do Azure para Visual Studio Code.
Extensão do Azure Functions para Visual Studio Code.
Node.js v18 para executar o aplicativo de front-end e a API.

Dica

É possível usar a ferramenta nvm para gerenciar diversas versões do Node.js no sistema de desenvolvimento. No Windows, o NVM para Windows pode ser instalado via Winget.

Criar o aplicativo da web estático

Antes de adicionar uma API, crie e implante um aplicativo de front-end para os Aplicativos Web Estáticos do Azure seguindo o início rápido Criar seu primeiro site estático com os Aplicativos Web Estáticos do Azure.

Depois de implantar um aplicativo de front-end nos Aplicativos Web Estáticos do Azure, clone o repositório de aplicativos. Por exemplo, faça o seguinte para clonar com a linha de comando git:

git clone https://github.com/my-username/my-first-static-web-app

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

Selecionar um modelo de programação V3

Forneça um nome de função message

Dica

Saiba mais sobre as diferenças entre os 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
Selecionar 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 -g @azure/static-web-apps-cli

Dica

Se preferir não instalar a linha de comando swa globalmente, use npx swa em vez de swa nas instruções a seguir.

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

Executar o aplicativo localmente

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
```
O Firewall do Windows pode solicitar que o runtime do Azure Functions tenha acesso à Internet. Selecione Permitir.
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.

###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "api" # Api source code path - optional
output_location: "build" # Built app content directory - optional
###### End of Repository/Build Configurations ######

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

Compartilhar via

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

Pré-requisitos

Criar o aplicativo da web estático

Criar a API

Atualizar o aplicativo front-end para chamar a API

Executar o front-end e a API localmente

Instalar ferramentas de linha de comando

Criar aplicativo de front-end

Executar o aplicativo localmente

Adicionar local de API ao fluxo de trabalho

Implantar alterações

Próximas etapas

Comentários

Recursos adicionais