Adicionar uma API aos Aplicativos Web Estáticos do Azure com o Funções do Azure

Você pode adicionar APIs sem servidor aos Aplicativos Web Estáticos do Azure com tecnologia do Funções do Azure. 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 Aplicações Web Estáticas 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 Funções do Azure para obter informações sobre como eles diferem dos aplicativos autônomos do Funções do Azure.

Pré-requisitos

Conta do Azure com uma assinatura ativa.
- Se não tiver uma conta, pode criar uma gratuitamente.
Código do Visual Studio.
Extensão de Aplicativos Web Estáticos do Azure para Visual Studio Code.
Extensão do Funções do Azure para Visual Studio Code.
Node.js v18 para executar o aplicativo frontend e a API.

Sugestão

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 implemente uma aplicação de frontend no Aplicações Web Estáticas do Azure seguindo o guia de início rápido Criar o seu primeiro site estático com o Aplicações Web Estáticas 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, você pode clonar seu repositório usando a linha de git comando.

Antes de executar o comando a seguir, certifique-se de substituir <YOUR_GITHUB_USERNAME> pelo seu nome de usuário do GitHub.

git clone https://github.com/<YOUR_GITHUB_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 Funções do Azure para a API do seu aplicativo Web estático. Por padrão, a extensão Aplicações Web Estáticas 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 Funções do Azure, instale-a e execute novamente este comando.

Quando solicitado, insira os seguintes valores:

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

Sugestão

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

Um projeto Funções do Azure é gerado com uma função ativada 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
│   ├── src
│   │   ├── functions
│   │   │   └── message.js
│   │   └── index.js
│   ├── .funcignore
│   ├── host.json
│   ├── local.settings.json
│   ├── package-lock.json
│   └── package.json
│
└── (...plus other 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 src/functions/message.js com o código a seguir.

const { app } = require('@azure/functions');

app.http('message', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: async (request, context) => {
        return { body: JSON.stringify({ "text": `Hello, from the API!` }) };
    }
});

Sugestão

Você pode adicionar mais funções de API executando o comando Aplicações Web Estáticas do Azure: Create HTTP Function... novamente.

Atualizar o aplicativo frontend para chamar a API

Atualize a sua aplicação de frontend para chamar a API em /api/message e apresentar 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 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 Funções do Azure para executar a API.

Instalar ferramentas de linha de comandos

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

Importante

Para melhorar a segurança das implantações da CLI de Aplicativos Web Estáticos, foi introduzida uma alteração significativa que exige que você atualize para a versão mais recente (2.0.2) da CLI de Aplicativos Web Estáticos até 15 de janeiro de 2025.

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

Sugestão

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 teu repositório, inicia a CLI Aplicações Web Estáticas com o comando start. 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
```
A Firewall do Windows poderá pedir-lhe que permita ao ambiente de execução do Funções do Azure aceder à 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 o 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: "src" # App source code path
api_location: "api" # Api source code path - optional
output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######

Nota: Os valores acima de api_location, app_location, output_location aplicam-se a aplicações sem um framework. Estes valores podem variar consoante o seu enquadramento.

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.
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 Aplicações Web Estáticas 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

Comentários

Esta página foi útil?

Last updated on 2026-06-03

Adicionar uma API aos Aplicativos Web Estáticos do Azure com o Funções do Azure

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

Recursos adicionais