Creare una nuova app Web statica in Azure con Node.js

Articolo
02/13/2025

App Web statiche di Azure è un servizio che compila e distribuisce automaticamente app Web stack complete in Azure da un repository di codice.

app client: le app Web statiche vengono comunemente compilate usando librerie e framework come Angular, React, Svelte, Vue o Blazor in cui il rendering lato server non è obbligatorio.
API: gli endpoint API sono ospitati usando un'architettura serverless, evitando così la necessità di un server back-end completo.

serie video:

Esempi:

Esempi dalla community delle app Web statiche sono un ottimo modo per trovare un codice da utilizzare come punto di partenza per il tuo progetto.
progetti starter per le app Web statiche sono un altro ottimo modo per avviare il tuo progetto.

Che cos'è un'app Web statica?

Un'app Web statica di Azure è un'app ospitata con i file client statici generati e gli endpoint API facoltativi. Quando si crea l'app Web statica, si includono le informazioni necessarie per un'azione GitHub per compilare i file statici dal repository GitHub e quindi distribuirlo in Azure.

Creare l'app Web statica con uno dei seguenti elementi:

modelli dell'interfaccia della riga di comando per sviluppatori di Azure
dell'estensione Visual Studio Code
CLI di Azure
del portale di Azure

Usare la CLI di App Web Statiche

L'interfaccia della riga di comando di app Web statiche , nota anche come interfaccia della riga di comando di SWA, funge da strumento di sviluppo locale per app Web statiche di Azure. Può:

Fornire asset statici dell'app o proxy al server di sviluppo dell'app
Gestire le richieste API o il proxy per le API in esecuzione in Azure Functions Core Tools
Emulare l'autenticazione e l'autorizzazione
Emulazione della configurazione di App Web statiche, incluso il routing

Includi API per un'app full-stack

L'inclusione di Funzioni di Azure consente di sviluppare un sito Web full-stack senza dover gestire la configurazione lato server di un intero ambiente di hosting Web. Altre informazioni su app per le funzioni di Azure con JavaScript.

Le Funzioni di Azure sono disponibili per l'app Web statica in due modi:

Funzioni gestite: queste API vengono fornite in App Web statiche facoltativamente e in genere risiedono in una cartella denominata /api.
Funzioni collegate: queste app per le funzioni separate ma collegate consentono di usare tali API senza dover gestire contemporaneamente lo stesso codice sorgente e distribuirle contemporaneamente.

Esempi:

Sviluppare con Visual Studio Code

Usare l'estensione di Visual Studio Code per App Web statiche per creare la struttura di cartelle locali e le dipendenze iniziali.

Creare un fork di un modello di repository GitHub in base alla scelta del client e dell'API oppure creare un nuovo repository.
In Visual Studio Code creare una nuova app Web statica.
Nella fase di creazione, selezionare il fork del repository e il ramo.

Quando si esegue il push in questo repository e in questo ramo, il codice viene distribuito anche nell'app Web statica. È comune avere un ramo live o deploy a tale scopo.
Nei passaggi di creazione selezionare la struttura del progetto, il percorso del codice dell'applicazione e la directory di compilazione.

In genere è possibile accettare i valori predefiniti se la struttura di cartelle segue la struttura di cartelle tipica per il tipo di progetto.
Al termine dei passaggi di creazione, il fork del repository include un'azione GitHub per compilare e distribuire nell'app Web statica, che si trova nella directory /.github/workflows.

Esercitazioniche utilizzano l'estensione App Web Statiche di Azure includono:

Configurare le variabili di ambiente client

GitHub Action controlla variabili di ambiente inserite nel progetto in fase di compilazione. Queste variabili lato client devono essere configurate nel yaml di GitHub Action nella sezione env. I segreti devono essere archiviati nei segreti di GitHub ed essere inseriti nella sezione 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"

Configurare le variabili di ambiente dell'API

Le variabili di ambiente dell'API sono variabili di runtime configurate nel portale di Azure o nell'interfaccia della riga di comando di Azure.

Portale di Azure: su Impostazioni e poi Configurazione
Estensione di Visual Studio Code: in Produzione quindi Impostazioni Applicazione
CLI di Azure: utilizzo del comando az staticwebapp appsettings set

Distribuire in Azure

La distribuzione di un'app Web statica in Azure viene avviata eseguendo il push nel ramo specifico del repository del codice sorgente, elencato in GitHub Action in pull_requests:branches. Il push dal computer locale deve utilizzare il repository dell'app Web statica o un fork di un repository. Se il tuo account utente GitHub non ha l'autorizzazione per eseguire il push nel ramo specificato del repository dell'organizzazione indicata, come l'organizzazione GitHub della tua azienda, dovresti creare un fork del repository e poi configurare la tua GitHub Action per utilizzare il tuo fork.

Visualizzare l'esito positivo della distribuzione da GitHub Action.

Abilitare i log

Attivare di Application Insights nel portale di Azure per raccogliere la registrazione da parte dell'app Web statica. La registrazione integrata di Application Insights raccoglie una grande quantità di informazioni, senza apportare modifiche al codice.

Sviluppare la registrazione personalizzata

Per aggiungere la registrazione personalizzata dall'app ad Application Insights, aggiungere il pacchetto @microsoft/applicationinsights-web npm e quindi aggiungere il codice JavaScript per acquisire informazioni personalizzate.

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'});

Passaggi successivi

Ulteriori informazioni su app Web statiche

Condividi tramite