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.

Nessun framework

1. Passare al percorso seguente per creare un nuovo repository:
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. 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.

Angular

1. Passare al percorso seguente per creare un nuovo repository:
   1. https://github.com/staticwebdev/angular-basic/generate
2. Assegnare al repository il nome my-first-static-web-app

Blazor

1. Passare al percorso seguente per creare un nuovo repository:
   1. https://github.com/staticwebdev/blazor-basic/generate
2. Assegnare al repository il nome my-first-static-web-app

React

1. Passare al percorso seguente per creare un nuovo repository:
   1. https://github.com/staticwebdev/react-basic/generate
2. Assegnare al repository il nome my-first-static-web-app

Vue

1. Passare al percorso seguente per creare un nuovo repository:
   1. https://github.com/staticwebdev/vue-basic/generate
2. Assegnare al repository il nome my-first-static-web-app

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.

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.

   Nessun framework

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

   Angular

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

   Blazor

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

   React

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

   Vue

   https://github.com/staticwebdev/vue-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.

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.

Nessun framework

1. Nel menu a discesa Set di impostazioni compilazione, selezionare Personalizzato.
2. Nella casella Percorso app immettere ./src.
3. Lasciare vuota la casella Percorso API.
4. Nella casella Percorso output immettere ./src.

Angular

1. Nel menu a discesa Set di impostazioni compilazione, selezionare Angular.
2. Mantenere il valore predefinito nella casella Percorso app.
3. Lasciare vuota la casella Percorso API.
4. Nella casella Percorso di output, digitare dist/angular-basic.

Blazor

1. Nel menu a discesa Set di impostazioni compilazione, selezionare Blazor.
2. Mantenere il valore predefinito di Client nella casella Percorso app.
3. Lasciare vuota la casella Percorso API.
4. Mantenere il valore predefinito di wwwroot nella casella Percorso di output.

React

1. Nel menu a discesa Set di impostazioni compilazione, selezionare React.
2. Mantenere il valore predefinito nella casella Percorso app.
3. Lasciare vuota la casella Percorso API.
4. Nella casella Percorso output immettere build.

Vue

1. Nel menu a discesa Set di impostazioni compilazione, selezionare Vue.js.
2. Mantenere il valore predefinito nella casella Percorso app.
3. Lasciare vuota la casella Percorso API.
4. Mantenere il valore predefinito nella casella Percorso artefatto app.

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.

1. 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.

2. 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:

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.

Contenuto correlato

• Serie video: Distribuire siti Web nel cloud con App Web statiche di Azure

Passaggi successivi

Aggiungere un'API