Esercitazione: Configurare Frontdoor di Azure per App Web statiche di Azure

  • Articolo

Aggiungendo Frontdoor di Azure come rete CDN per l'app Web statica, è possibile usufruire di un punto di ingresso sicuro per la distribuzione rapida delle applicazioni Web.

Con App Web statiche sono disponibili due opzioni per l'integrazione con Frontdoor di Azure. È possibile aggiungere Frontdoor di Azure all'app Web statica abilitando la rete perimetrale di livello aziendale, un'integrazione gestita di Frontdoor di Azure con App Web statiche. In alternativa, è possibile configurare manualmente una risorsa Frontdoor di Azure davanti all'app Web statica.

Considerare i vantaggi seguenti per determinare l'opzione più adatta alle proprie esigenze.

Edge di livello aziendale offre:

  • Nessuna modifica alla configurazione
  • Nessun tempo di inattività
  • Certificazioni SSL gestite automaticamente e domini personalizzati

Una configurazione manuale di Frontdoor di Azure offre il controllo completo sulla configurazione rete CDN, inclusa la possibilità di:

  • Limitare l'origine del traffico in base all'origine
  • Aggiungere un web application firewall (WAF)
  • Instradare più applicazioni
  • Usare funzionalità più avanzate di Frontdoor di Azure

In questa esercitazione si apprenderà come aggiungere Frontdoor di Azure all'app Web statica.

Prerequisiti

  • Dominio personalizzato configurato per l'app Web statica con durata (TTL) impostata su meno di 48 ore.
  • Applicazione distribuita con App Web statiche di Azure che usa il piano di hosting Standard.

Abilitare edge di livello aziendale nella risorsa App Web statiche

  1. Passare all'app Web statica nel portale di Azure.

  2. Selezionare Edge di livello aziendale nel menu a sinistra.

  3. Selezionare la casella Abilita edge di livello aziendale.

  4. Seleziona Salva.

  5. Selezionare OK per confermare il salvataggio.

    L'abilitazione di questa funzionalità comporta costi aggiuntivi.

Prerequisiti

  • Un account Azure con una sottoscrizione attiva. Creare un account gratuitamente
  • Sito App Web statiche di Azure. Creare la prima app Web statica
  • App Web statiche di Azure piani Standard e Frontdoor di Azure Standard/Premium. Per altre informazioni, vedere prezzi App Web statiche
  • Prendere in considerazione l'uso di edge di livello aziendale per carichi di pagine più veloci, sicurezza avanzata e affidabilità ottimizzata per le applicazioni globali.

Creare un servizio Frontdoor di Azure

  1. Accedi al portale di Azure.

  2. Nella home page o nel menu di Azure selezionare + Crea una risorsa. Cercare Frontdoor e rete CDN profili e quindi selezionare Crea>Frontdoor e rete CDN profili.

  3. Nella pagina Confronta offerte selezionare Creazione rapida e quindi continua per creare una frontdoor.

  4. Nella pagina Crea un profilo frontdoor immettere o selezionare le impostazioni seguenti.

    Impostazione Valore
    Subscription Seleziona la tua sottoscrizione di Azure.
    Resource group Immettere il nome di un gruppo di risorse. Questo nome è spesso lo stesso nome di gruppo usato dall'app Web statica.
    Percorso gruppo di risorse Se si crea un nuovo gruppo di risorse, immettere la località più vicina.
    Nome Immettere my-static-web-app-front-door.
    Livello Selezionare Standard.
    Nome endpoint Immettere un nome univoco per l'host frontdoor.
    Tipo di origine Selezionare App Web statiche.
    Nome host origine Selezionare il nome host dell'app Web statica nell'elenco a discesa.
    Memorizzazione nella cache Selezionare la casella di controllo Abilita memorizzazione nella cache .
    Comportamento di memorizzazione nella cache della stringa di query Selezionare Usa stringa di query
    Compressione Selezionare Abilita compressione
    Criteri WAF Selezionare Crea nuovo o selezionare un criterio web application firewall esistente dall'elenco a discesa se si vuole abilitare questa funzionalità.

    Nota

    Quando si crea un profilo frontdoor di Azure, è necessario selezionare un'origine dalla stessa sottoscrizione in cui viene creata frontdoor.

  5. Seleziona Rivedi e crea e quindi seleziona Crea. Il completamento del processo di creazione potrebbe richiedere alcuni minuti.

  6. Al termine della distribuzione, selezionare Vai alla risorsa.

  7. Aggiungere una condizione.

Disabilitare la cache per il flusso di lavoro di autenticazione

Nota

La scadenza della cache, la stringa di query della chiave della cache e le azioni di override del gruppo di origine sono deprecate. Queste azioni possono comunque funzionare normalmente, ma il set di regole non può cambiare. Sostituire queste sostituzioni con le nuove azioni di override della configurazione della route prima di modificare il set di regole.

Aggiungere le impostazioni seguenti per disabilitare i criteri di memorizzazione nella cache di Frontdoor dal tentativo di memorizzare nella cache le pagine correlate all'autenticazione e all'autorizzazione.

Aggiungi una condizione

  1. Da Frontdoor, in Impostazioni, selezionare Set di regole.

  2. Seleziona Aggiungi.

  3. Nella casella di testo Nome set di regole immettere Sicurezza.

  4. Nella casella di testo Nome regola immettere NoCacheAuthRequests.

  5. Selezionare Aggiungi una condizione.

  6. Selezionare Percorso richiesta.

  7. Selezionare l'elenco a discesa Operatore e quindi Inizia con.

  8. Selezionare il collegamento Modifica sopra la casella di testo Valore .

  9. Immettere /.auth nella casella di testo e quindi selezionare Aggiorna.

  10. Selezionare nessuna opzione nell'elenco a discesa Trasformazione stringa.

Aggiunge un'azione

  1. Selezionare l'elenco a discesa Aggiungi un'azione .

  2. Selezionare Override della configurazione della route.

  3. Selezionare Disabilitato nell'elenco a discesa Memorizzazione nella cache .

  4. Seleziona Salva.

Associare una regola a un endpoint

Dopo aver creato la regola, applicare la regola a un endpoint di Frontdoor.

  1. In Frontdoor selezionare Set di regole e quindi il collegamento Non associati .

    Screenshot showing selections for Rule set and Unassociated links.

  2. Selezionare il nome dell'endpoint a cui applicare la regola di memorizzazione nella cache e quindi selezionare Avanti.

  3. Selezionare Associa.

    Screenshot showing highlighted button, Associate.

Copiare l'ID frontdoor

Usare la procedura seguente per copiare l'identificatore univoco dell'istanza di Frontdoor.

  1. Da Frontdoor selezionare il collegamento Panoramica nel riquadro di spostamento a sinistra.

  2. Copiare il valore etichettato id frontdoor e incollarlo in un file per usarlo in un secondo momento.

    Screenshot showing highlighted Overview item and highlighted Front Door ID number.

Aggiornare la configurazione dell'app Web statica

Per completare l'integrazione con Frontdoor, è necessario aggiornare il file di configurazione dell'applicazione per eseguire le funzioni seguenti:

  • Limitare il traffico al sito solo tramite Frontdoor
  • Limitare il traffico al sito solo dall'istanza di Frontdoor
  • Definire quali domini possono accedere al sito
  • Disabilitare la memorizzazione nella cache per le route protette

Aprire il file staticwebapp.config.json per il sito e apportare le modifiche seguenti.

  1. Limitare il traffico solo all'uso di Frontdoor aggiungendo la sezione seguente al file di configurazione:

    "networking": {
  "allowedIpRanges": ["AzureFrontDoor.Backend"]
}

  2. Per definire quali istanze e domini di Frontdoor di Azure possono accedere al sito, aggiungere la forwardingGateway sezione .

    "forwardingGateway": {
  "requiredHeaders": {
    "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
  },
  "allowedForwardedHosts": [
    "my-sitename.azurefd.net"
  ]
}

    Prima di tutto, configurare l'app per consentire il traffico solo dall'istanza di Frontdoor. In ogni richiesta back-end Frontdoor aggiunge automaticamente un'intestazione X-Azure-FDID che contiene l'ID istanza di Frontdoor. Configurando l'app Web statica per richiedere questa intestazione, limita il traffico esclusivamente all'istanza di Frontdoor. forwardingGateway Nella sezione del file di configurazione aggiungere la requiredHeaders sezione e definire l'intestazioneX-Azure-FDID. Sostituire <YOUR-FRONT-DOOR-ID> con l'ID frontdoor impostato in precedenza.

    Aggiungere quindi il nome host di Frontdoor di Azure (non il nome host App Web statiche di Azure) nella allowedForwardedHosts matrice. Se nell'istanza di Frontdoor sono configurati domini personalizzati, includerli anche in questo elenco.

    In questo esempio sostituire my-sitename.azurefd.net con il nome host di Frontdoor di Azure per il sito.

  3. Per tutte le route protette nell'app, disabilitare la memorizzazione nella cache di Frontdoor di Azure aggiungendo "Cache-Control": "no-store" alla definizione dell'intestazione di route.

    {
    ...
    "routes": [
        {
            "route": "/members",
            "allowedRoles": ["authenticated", "members"],
            "headers": {
                "Cache-Control": "no-store"
            }
        }
    ]
    ...
}

Con questa configurazione, il sito non è più disponibile tramite il nome host generato *.azurestaticapps.net , ma esclusivamente tramite i nomi host configurati nell'istanza di Frontdoor.

Considerazioni

  • Domini personalizzati: ora che Frontdoor gestisce il sito, non si usa più la funzionalità di dominio personalizzato App Web statiche di Azure. Frontdoor di Azure include un processo separato per l'aggiunta di un dominio personalizzato. Fare riferimento a Aggiungere un dominio personalizzato alla frontdoor. Quando si aggiunge un dominio personalizzato a Frontdoor, è necessario aggiornare il file di configurazione dell'app Web statica per includerlo nell'elenco allowedForwardedHosts .

  • Statistiche sul traffico: per impostazione predefinita, Frontdoor di Azure configura i probe di integrità che possono influire sulle statistiche sul traffico. È possibile modificare i valori predefiniti per i probe di integrità.

  • Gestione delle versioni precedenti: quando si distribuiscono gli aggiornamenti ai file esistenti nell'app Web statica, Frontdoor di Azure potrebbe continuare a gestire versioni precedenti dei file fino alla scadenza del tempo di esecuzione . Ripulire la cache di Frontdoor di Azure per i percorsi interessati per assicurarsi che vengano gestiti i file più recenti.

Pulire le risorse

Se non si vogliono più usare le risorse create in questa esercitazione, eliminare le istanze di App Web statiche di Azure e Frontdoor di Azure.

Passaggi successivi

Aggiungere un'API