Adicionar uma API aos Aplicativos Web Estáticos do Azure com o Azure Functions

Artigo
05/08/2024

Você pode adicionar APIs sem servidor aos Aplicativos Web Estáticos do Azure que são alimentados pelo Azure Functions. Este artigo demonstra como adicionar e implantar uma API em um site de Aplicativos Web Estáticos do Azure.

Nota

As funções fornecidas por padrão em Static Web Apps são pré-configuradas para fornecer pontos de extremidade de API seguros e suportam apenas funções acionadas por HTTP. Consulte Suporte de API com o Azure Functions para obter informações sobre como eles diferem dos aplicativos autônomos do Azure Functions.

Pré-requisitos

Conta do Azure com uma assinatura ativa.
- Se não tiver uma conta, pode criar 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 frontend e a API.

Gorjeta

Você pode usar a ferramenta nvm para gerenciar várias versões do Node.js em seu sistema de desenvolvimento. No Windows, o NVM para Windows pode ser instalado via Winget.

Criar o aplicativo Web estático

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

Depois de ter um aplicativo front-end implantado nos Aplicativos Web Estáticos do Azure, clone seu repositório de aplicativos. Por exemplo, para clonar usando a linha de git comando:

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

No Visual Studio Code, abra a raiz do repositório do seu aplicativo. A estrutura de pastas contém a origem do seu aplicativo frontend e o fluxo de trabalho 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 do Azure Functions para a API do seu aplicativo Web estático. Por padrão, a extensão Static Web Apps Visual Studio Code cria o projeto em uma pasta chamada api na raiz do repositório.

Prima F1 para abrir a Paleta de Comandos.
Selecione Aplicativos Web Estáticos do Azure: Criar Função HTTP.... Se lhe for pedido para instalar a extensão do Azure Functions, instale-a e execute novamente este comando.
Quando solicitado, insira os seguintes valores:

Pedido Value

Escolha um idioma JavaScript

Selecione um modelo de programação V3

Fornecer um nome de função mensagem

Gorjeta

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

Um projeto do Azure Functions é gerado com uma função acionada por HTTP. Seu aplicativo agora tem uma estrutura de projeto semelhante 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, altere a message função para retornar uma mensagem para o frontend. 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"
    });
};
```

Pedido	Value
Escolha um idioma	JavaScript
Selecione um modelo de programação	V3
Fornecer um nome de função	mensagem

Gorjeta

Você pode adicionar mais funções de API executando o comando Azure Static Web Apps: Create HTTP Function... novamente.

Atualizar o aplicativo frontend para chamar a API

Atualize seu aplicativo frontend para chamar a API e exibir a mensagem de /api/message 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 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 do src/app/app.module.ts com o código a seguir 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 do src/app/app.component.ts com o código a seguir para buscar o texto da função 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 do src/App.js com o código a seguir para buscar o texto da função 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 de src/App.vue com o código a seguir para buscar o texto da função 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>

Execute o frontend e a API localmente

Para executar seu aplicativo frontend e sua API juntos localmente, os Aplicativos Web Estáticos do Azure fornecem uma CLI que emula o ambiente de nuvem. A CLI usa as Ferramentas Principais do Azure Functions para executar a API.

Instalar ferramentas de linha de comandos

Certifique-se de ter as ferramentas de linha de comando necessárias instaladas.

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

Gorjeta

Se você não quiser instalar a swa linha de comando globalmente, você pode usar npx swa em vez de swa nas instruções a seguir.

Criar aplicativo frontend

Se seu aplicativo usa uma estrutura, crie o aplicativo para gerar a saída antes de executar a CLI de Aplicativos Web estáticos.

Não há necessidade de criar o aplicativo.

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

npm install
npm run build --prod

Instale as dependências do npm e crie o aplicativo na pasta de compilação .

npm install
npm run build

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

npm install
npm run build

Executar a aplicação localmente

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

Na raiz do 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.
- Sem enquadramento
- Angular
- React
- Vue
Passe a pasta atual (src) e a pasta API (api) para a CLI.
```
swa start src --api-location api
```
Passe a pasta de saída da compilação (dist/angular-basic) e a pasta da API (api) para a CLI.
```
swa start dist/angular-basic --api-location api
```
Passe a pasta de saída da compilação (build) e a pasta da API (api) para a CLI.
```
swa start build --api-location api
```
Passe a pasta de saída da compilação (dist) e a pasta da API (api) para a CLI.
```
swa start dist --api-location api
```
O Firewall do Windows pode solicitar que o tempo de execução do Azure Functions possa acessar a Internet. Selecione Permitir.
Quando os processos da CLI forem iniciados, 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 parar a CLI, digite Ctrl + C.

Adicionar local da 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 pasta da API.

Abra seu fluxo de trabalho em .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME<>.yml.

Procure 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 ######

Guarde o ficheiro.

Implementação de alterações

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

Prima F1 para abrir a Paleta de Comandos.
Selecione o comando Git: Commit All (Git: Confirmar tudo ).
Quando for solicitada uma mensagem de confirmação, digite feat: add API e confirme todas as alterações no repositório git local.
Prima F1 para abrir a Paleta de Comandos.
Selecione o comando Git: push .

Suas alterações são enviadas por push para o repositório remoto no GitHub, acionando o fluxo de trabalho Static Web Apps GitHub Actions para criar e implantar seu aplicativo.
Abra seu repositório no GitHub para monitorar o status da execução do fluxo de trabalho.
Quando a execução do fluxo de trabalho for concluída, visite seu aplicativo Web estático para exibir suas alterações.

Próximos passos

Definir definições da aplicação

Partilhar via

Adicionar uma API aos Aplicativos Web Estáticos do Azure com o Azure Functions

Pré-requisitos

Criar o aplicativo Web estático

Criar a API

Atualizar o aplicativo frontend para chamar a API

Execute o frontend e a API localmente

Instalar ferramentas de linha de comandos

Criar aplicativo frontend

Executar a aplicação localmente

Adicionar local da API ao fluxo de trabalho

Implementação de alterações

Próximos passos

Comentários

Comentários

Recursos adicionais