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

Você pode adicionar APIs sem servidor aos Aplicativos Web Estáticos do Azure da plataforma do 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, você pode clonar seu repositório usando a linha de comando git.

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 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.

1. Pressione F1 para abrir a Paleta de comandos.

2. 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.

3. Quando precisar, insira os seguintes valores:

   Prompt	Valor
   Selecionar um idioma	JavaScript
   Selecionar um modelo de programação	V4
   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
   ├── └──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)
   

4. Em seguida, você mudará a messagefunção para retornar uma mensagem para o front-end. Atualize a função em src/functions/message.js com o seguinte código.

   const { app } = require('@azure/functions');
   
   app.http('message', {
       methods: ['GET', 'POST'],
       authLevel: 'anonymous',
       handler: async (request, context) => {
           return { body: `Hello, from the API!` };
       }
   });
   

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.

Nenhuma estrutura

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>

Angular

1. 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 {}
   

2. 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);
     }
   }
   

React

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;

Vue

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.

Importante

Para melhorar a segurança das implantações da CLI de Aplicativos Web Estáticos, foi introduzida uma alteração 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

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.

Nenhuma estrutura

Não é necessário compilar o aplicativo.

Angular

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

npm install
npm run build --prod

React

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

npm install
npm run build

Vue

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.

1. 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

   Passe a pasta atual (src) e a pasta de API (api) para a CLI.

   swa start src --api-location api
   

   Angular

   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
   

   React

   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
   

   Vue

   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
   

2. O Firewall do Windows pode solicitar que o runtime do Azure Functions possa acessar a Internet. Selecione Permitir.

3. 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.

4. 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.

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

2. 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: "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 ######
   

   Observação: os valores acima de api_location, app_location e output_location são para nenhuma estrutura e esses valores mudam de acordo com sua estrutura.

3. 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.

1. Pressione F1 para abrir a Paleta de comandos.

2. Selecione o comando Git: Commit All.

3. 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.

4. Pressione F1 para abrir a Paleta de comandos.

5. 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.

6. Abra seu repositório no GitHub para monitorar o status da sua análise de fluxo de trabalho.

7. 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