Condividi tramite

Distribuire un'app Angular in App Web statiche di Azure

Questo articolo illustra come distribuire un'applicazione Angular in App Web statiche di Azure usando il portale di Azure.

Prerequisiti

Conto risorse Note
Sottoscrizione di Azure Se non si ha una sottoscrizione di Azure, creare un account per una versione di prova gratuita.
Account GitHub Se non si dispone di un account GitHub, è possibile crearne uno gratuitamente.
Conto risorse Note
Sottoscrizione di Azure Se non si ha una sottoscrizione di Azure, creare un account per una versione di prova gratuita.
Account di Azure DevOps Se non si ha un account GitHub, è possibile crearne uno.

Creare un repository

In questo articolo si usa un repository di modelli GitHub per semplificare le operazioni. Il modello include un'app di avvio da distribuire in App Web statiche di Azure.

  1. Passare al percorso seguente per creare un nuovo repository:

    https://github.com/staticwebdev/angular-basic/generate

  2. Assegnare al repository il nome my-first-static-web-app

  3. Selezionare Create repository from template (Crea repository da modello).

    Screenshot del pulsante Crea repository da modello.

Questo articolo usa un repository di Azure DevOps per semplificare l'avvio. Il modello include un'app di partenza usata per la distribuzione con App Web statiche di Azure.

  1. Accedere a Azure DevOps.

  2. Selezionare Nuovo repository.

  3. Nella finestra Crea nuovo progetto espandere menu Avanzate e selezionare le opzioni seguenti:

    Impostazione Valore
    Project Immettere my-first-web-static-app.
    Visibilità Selezionare Private (Privato).
    Controllo della versione selezionare Git.
    Processo dell'elemento di lavoro Selezionare l'opzione più adatta ai metodi di sviluppo.

  4. Seleziona Crea.

  5. Selezionare la voce di menu Repos.

  6. Selezionare la voce di menu File.

  7. Nella scheda Importa repository selezionare Importa.

  8. Copiare un URL del repository per il framework preferito e incollarlo nella casella Clona URL.

    https://github.com/staticwebdev/angular-basic.git

  9. Selezionare Importa e attendere il completamento del processo di importazione.

Creare un'app Web statica

Dopo aver creato il repository, è possibile creare un'app Web statica dal portale di Azure.

  1. Vai al portale di Azure.
  2. Selezionare Crea una risorsa.
  3. Cercare App Web statiche.
  4. Selezionare App Web statiche.
  5. Seleziona Crea.

Per iniziare, nella sezione Informazioni di base configurare la nuova app e collegarla a un repository GitHub.

Screenshot della sezione Dati principali nel portale di Azure.

Impostazione Valore
Abbonamento Seleziona la tua sottoscrizione di Azure.
Gruppo di risorse Selezionare il collegamento Crea nuovo e immettere static-web-apps-test nella casella di testo.
Nome Immettere my-first-static-web-app nella casella di testo.
Tipo di piano Selezionare Gratuito.
Origine Selezionare GitHub e accedere a GitHub, se necessario.

Dopo aver eseguito l'accesso con GitHub, immettere le informazioni sul repository.

Impostazione Valore
Organizzazione Selezionare l'organizzazione.
Repository Selezionare my-first-web-static-app.
Ramo Selezionare main.

Screenshot dei dettagli del repository nel portale di Azure.

Nota

Se non viene visualizzato alcun repository:

  • Potrebbe essere necessario autorizzare App Web statiche di Azure in GitHub. Passare al repository GitHub e quindi a Impostazioni > Applicazioni > App OAuth autorizzate, selezionare App Web statiche di Azure e infine Concedi.
  • Potrebbe essere necessario autorizzare App Web statiche di Azure nell’organizzazione Azure DevOps. Per concedere le autorizzazioni, è necessario essere un proprietario dell'organizzazione. Richiedere l’accesso ad applicazioni di terzi tramite OAuth. Per altre informazioni, vedere Autorizzare l'accesso alle API REST con OAuth 2.0.

Per iniziare, nella sezione Dati principali configurare la nuova app e collegarla a un repository Azure DevOps.

Impostazione Valore
Abbonamento Seleziona la tua sottoscrizione di Azure.
Gruppo di risorse Selezionare il collegamento Crea nuovo e immettere static-web-apps-test nella casella di testo.
Nome Immettere my-first-static-web-app nella casella di testo.
Tipo di piano Selezionare Gratuito.
Origine Selezionare DevOps.
Organizzazione Selezionare l'organizzazione.
Project Seleziona il progetto.
Repository Selezionare my-first-web-static-app.
Ramo Selezionare main.

Nota

Assicurarsi che il ramo in uso non sia protetto e che si disponga di autorizzazioni sufficienti per eseguire un comando push. Per verificare, andare al repository DevOps e andare a Repos ->Rami e selezionare Altre opzioni. Selezionare quindi il ramo e successivamente Criteri ramo per assicurarsi che i criteri richiesti non siano abilitati.

Nella scheda Dettagli compilazione aggiungere i dettagli di configurazione specifici del framework front-end preferito.

  1. Selezionare Angular nel menu a discesa Set di impostazioni compilazione.

  2. Mantenere il valore predefinito nella casella Percorso app.

  3. Lasciare vuota la casella Percorso API.

  4. Digitare dist/angular-basic nella casella Percorso di output.

Nota

Se si usano queste istruzioni con il proprio codice e Angular 17 o versione successiva, il valore del percorso di output deve terminare con /browser.

Selezionare Rivedi e crea.

Screenshot del pulsante Crea.

Nota

Per modificare questi valori dopo aver creato l'app, è possibile modificare il file del flusso di lavoro .

Seleziona Crea.

Screenshot del pulsante Crea.

Selezionare Vai alla risorsa.

Screenshot del pulsante

Visualizzare il sito Web

La distribuzione di un'app statica è un processo in due passaggi. Il primo crea le risorse di Azure sottostanti che costituiscono l'app. Il secondo è un flusso di lavoro che compila e pubblica l'applicazione.

Prima di poter andare al nuovo sito statico, deve terminare l'esecuzione della compilazione di distribuzione.

La finestra Panoramica di App Web statiche visualizza una serie di link che consentono di interagire con l'app Web.

Screenshot della finestra di panoramica di App Web statiche di Azure.

  1. La selezione delle esecuzioni di GitHub Action nella panoramica consente di accedere a GitHub Actions in esecuzione nel repository. Verificare che l'azione di distribuzione sia stata completata prima di continuare.

  2. Una volta completato il flusso di lavoro di GitHub Actions, è possibile selezionare il link URL per aprire il sito Web nella nuova scheda.

Una volta completato il flusso di lavoro, è possibile selezionare il link URL per aprire il sito Web nella nuova scheda.

Pulire le risorse

Se non si intende continuare a usare questa applicazione, è possibile eliminare l'istanza di App Web statiche di Azure seguendo questa procedura:

  1. Apri il portale di Azure.
  2. Cercare my-first-web-static-app nella barra di ricerca in alto.
  3. Selezionare il nome dell'app.
  4. Selezionare Elimina.
  5. Selezionare Sì per confermare l'azione di eliminazione. L'operazione potrebbe richiedere alcuni istanti.

Passaggi successivi

Aggiungere un'API all'applicazione

  • Last updated on