Criar um aplicativo Web Estático no Azure com o Node.js

Artigo
08/28/2024

Os Aplicativos Web Estáticos do Azure são um serviço que cria e implanta automaticamente aplicativos Web de pilha completa no Azure de um repositório de códigos.

Aplicativos Cliente: normalmente, os aplicativos Web estáticos são criados usando bibliotecas e estruturas como Angular, React, Svelte, Vue ou Blazor, nas quais a renderização do lado do servidor não é necessária.
APIs: os pontos de extremidade da API são hospedados usando uma arquitetura sem servidor, o que evita a necessidade de um servidor de back-end completo.

Série de vídeos:

Exemplos:

Exemplos da comunidade de Aplicativos Web Estáticos são uma ótima forma de encontrar um código para começar o seu projeto.
Projetos iniciais de aplicativos Web Estáticos são outra ótima forma de começar o seu projeto.

O que é um aplicativo Web Estático?

Um Aplicativo Web Estático do Azure é um aplicativo hospedado com os arquivos do cliente estático gerados e os pontos de extremidade de API opcionais. Ao criar o Aplicativo Web Estático, você inclui as informações necessárias para uma Ação do GitHub criar os arquivos estáticos do repositório GitHub e implantá-los no Azure.

Crie o Aplicativo Web Estático com uma das seguintes opções:

Usar a CLI de Aplicativos Web Estáticos

A CLI dos Aplicativos Web Estáticos, também conhecida como CLI do SWA, serve como uma ferramenta de desenvolvimento local para Aplicativos Web Estáticos do Azure. Ele pode:

Servir ativos de aplicativos estáticos ou fazer proxy para o servidor de desenvolvimento de aplicativos
Atender solicitações de API ou usar um proxy para APIs em execução no Azure Functions Core Tools
Emular autenticação e autorização
Emular a configuração de Aplicativos Web Estáticos, incluindo o roteamento

Incluir APIs para um aplicativo de pilha completa

A inclusão do Azure Functions permite que você desenvolva um site completo sem precisar lidar com a configuração do lado do servidor de um ambiente inteiro de hospedagem na Web. Saiba mais sobre os aplicativos de funções do Azure com JavaScript.

O Azure Function está disponível para o Aplicativo Web Estático de duas maneiras:

Funções gerenciadas: essas APIs são fornecidas em Aplicativos Web Estáticos opcionalmente e geralmente ficam em uma pasta chamada /api.
Funções vinculadas: esses aplicativos de função separada, mas vinculada, permitem que você use essas APIs sem precisar gerenciar a partir do mesmo código-fonte e implantar ao mesmo tempo.

Exemplos:

Desenvolvimento com o Visual Studio Code

Use a extensão Visual Studio Code para Aplicativos Web Estáticos para criar sua estrutura de pastas local e dependências iniciais.

Crie um fork de um dos repositórios de modelos do GitHub para sua escolha de cliente e API ou crie um repositório.
No Visual Studio Code, crie um novo Aplicativo Web Estático.
Nas etapas de criação, selecione o fork e o branch do repositório.

Quando você efetua push para esse repositório e branch, seu código também é implantado no Aplicativo Web Estático. É comum ter um branch live ou deploy para essa finalidade.
Nas etapas de criação, escolha a estrutura do projeto, o local do código do aplicativo e o diretório de build.

Normalmente, você poderá obter os valores padrão se a estrutura de pastas seguir a estrutura de pastas típica do tipo de projeto.
Quando você concluir as etapas de criação, o fork do repositório terá uma Ação do GitHub para compilar e implantar em seu aplicativo Web Estático, localizada no diretório /.github/workflows.

Os tutoriais que usam a extensão de Aplicativos Web Estáticos do Azure incluem:

Configurar as variáveis de ambiente do cliente

A Ação do GitHub controla as variáveis de ambiente injetadas em seu projeto no momento do build. Essas variáveis do lado do cliente precisam ser configuradas no yaml da ação do GitHub na seção env. Os segredos devem ser armazenados nos segredos do GitHub e transferidos para a seção env.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### 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: "search-website" # App source code path
          api_location: "search-website/api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: # Add environment variables here
          # Inject vars at build time
          myvarname: 'myvarvalue' 
          # Inject secrets at build time from GitHub Secrets
          password: ${{ secrets.PASSWORD }}

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
          action: "close"

Configurar as variáveis de ambiente de API

As variáveis de ambiente de API são variáveis de runtime configuradas no portal do Azure ou na CLI do Azure.

Portal do Azure: em Configurações e Configuração
Extensão do Visual Studio Code: em Produção e depois em Configurações de Aplicativo
CLI do Azure: usando az staticwebapp appsettings set

Implantar no Azure

A implantação de um Aplicativo Web Estático no Azure é iniciada por push para o branch específico do repositório de código-fonte, listado na Ação do GitHub em pull_requests:branches. O push do computador local precisa usar o repositório do Aplicativo Web Estático ou o fork de um repositório. Se a sua conta de usuário do GitHub não tiver permissão para efetuar push para o branch especificado no repositório da organização, como a organização do GitHub da sua empresa, você deverá criar um fork do repositório e, em seguida, configurar sua Ação do GitHub para usar seu fork.

Veja o sucesso da implantação na Ação do GitHub.

Habilitar logs

Ative o Application Insights no portal do Azure para o seu Aplicativo Web Estático coletar o registro em log. O registro em log integrado do Application Insights coleta uma grande quantidade de informações para você, sem nenhuma alteração em seu código.

Desenvolver registro em log personalizado

Para adicionar o registro personalizado do seu aplicativo ao Application Insights, adicione o pacote npm @microsoft/applicationinsights-web e, em seguida, adicione o código JavaScript para capturar informações personalizadas.

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.trackTrace({message: 'some trace'});

Próximas etapas

Saiba mais sobre os Aplicativos Web Estáticos

Compartilhar via