Avvio rapido: Creare la prima app Web statica
App Web statiche di Azure consente di pubblicare un sito Web in un ambiente di produzione creando app da un repository Azure DevOps o GitHub. In questa guida di avvio rapido si distribuisce un'applicazione Web in App Web statiche di Azure usando il portale di Azure.
Prerequisiti
- Se non si ha una sottoscrizione di Azure, creare un account per una versione di prova gratuita.
- Account GitHub
- Se non si ha una sottoscrizione di Azure, creare un account per una versione di prova gratuita.
- Organizzazione DevOps di Azure
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.
- Passare al percorso seguente per creare un nuovo repository:
- Assegnare al repository il nome my-first-static-web-app
Nota
Con App Web statiche di Azure è necessario almeno un file HTML per creare un'app Web. Il repository creato in questo passaggio include un singolo file index.html.
Selezionare Create repository.
Creare un repository
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.
Accedere a Azure DevOps.
Selezionare Nuovo repository.
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. Seleziona Crea.
Selezionare la voce di menu Repos.
Selezionare la voce di menu File.
Nella scheda Importa repository selezionare Importa.
Copiare un URL del repository per il framework preferito e incollarlo nella casella Clona URL.
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.
- Vai al portale di Azure.
- Selezionare Crea una risorsa.
- Cercare App Web statiche.
- Selezionare App Web statiche.
- Seleziona Crea.
Per iniziare, nella sezione Informazioni di base configurare la nuova app e collegarla a un repository GitHub.
| 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. |
Se necessario, accedere con GitHub e immettere le informazioni seguenti sul repository.
| Impostazione | Valore |
|---|---|
| Organizzazione | Selezionare l'organizzazione. |
| Repository | Selezionare my-first-web-static-app. |
| Ramo | Selezionare main. |
Nota
Se non viene visualizzato un elenco di repository:
Potrebbe essere necessario autorizzare App Web statiche di Azure in GitHub. Passare al profilo 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. |
| Dettagli di Funzioni di Azure e della gestione temporanea | Selezionare un'area vicina. |
| Origine | Selezionare Azure 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.
- Nel menu a discesa Set di impostazioni compilazione, selezionare Personalizzato.
- Nella casella Percorso app immettere ./src.
- Lasciare vuota la casella Percorso API.
- Nella casella Percorso output immettere ./src.
Selezionare Rivedi e crea.
Seleziona Crea.
Nota
Per modificare questi valori dopo aver creato l'app, è possibile modificare il file del flusso di lavoro .
Seleziona Crea.
Selezionare 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 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.
Selezionando il banner Selezionare qui per controllare lo stato delle esecuzioni di GitHub Actions, vengono visualizzate le esecuzioni di GitHub Actions nel repository. Dopo aver verificato il completamento del processo di distribuzione, è possibile andare al sito Web tramite l'URL generato.
Una volta completato il flusso di lavoro di GitHub Actions, è possibile selezionare il collegamento 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:
- Apri il portale di Azure.
- Cercare my-first-web-static-app nella barra di ricerca in alto.
- Selezionare il nome dell'app.
- Selezionare Elimina.
- Selezionare Sì per confermare l'azione di eliminazione. L'operazione potrebbe richiedere alcuni istanti.