Condividi tramite

Distribuire un'app React in App Web statiche di Azure

Questo articolo illustra come distribuire un'applicazione React 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 iniziale da distribuire in App Web statiche di Azure.

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

    https://github.com/staticwebdev/react-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 dal modello.

Questo articolo usa un repository Di Azure DevOps per semplificare l'avvio. Il repository include un'app iniziale 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 il menu Avanzate e effettuare le selezioni 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 Repository .

  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/react-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 statica.
  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 Informazioni di base nella 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 vengono visualizzati repository:

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

Nella sezione Informazioni di base iniziare configurando la nuova app e collegandola 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 Selezionare 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 push comando. Per verificare, passare al repository DevOps e passare a Repository ->Rami e selezionare Altre opzioni. Selezionare quindi il ramo e quindi i criteri branch 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 React dall'elenco a discesa Build Presets (Impostazioni di compilazione ).

  2. Mantenere il valore predefinito nella casella Percorso app.

  3. Lasciare vuota la casella Percorso API.

  4. Digitare build nella casella Percorso artefatto app.

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 Vai alla risorsa.

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 passare al nuovo sito statico, la compilazione della distribuzione deve prima terminare l'esecuzione.

La finestra Panoramica App Web statiche visualizza una serie di collegamenti 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. Al termine del flusso di lavoro di GitHub Actions, è possibile selezionare il collegamento URL per aprire il sito Web nella nuova scheda.

Al termine del flusso di lavoro, è possibile selezionare il collegamento 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