Guida introduttiva: Creare la prima app Web statica

App Web statiche di Azure pubblica 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 di Azure DevOps

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.

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

   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
Subscription	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 più vicina.
Origine	Selezionare GitHub.

Selezionare Accedi con GitHub ed eseguire l'autenticazione con GitHub.

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.
Filiale	Selezionare <branch_name>.

Nota

Se non vengono visualizzati repository:

• Potrebbe essere necessario autorizzare App Web statiche di Azure in GitHub. Passare al profilo 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
Subscription	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 più vicina.
Origine	Selezionare DevOps.
Organizzazione	Selezionare l'organizzazione.
Project	Selezionare il progetto.
Repository	Selezionare my-first-web-static-app.
Filiale	Selezionare <branch_name>.

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.

Nessun framework

1. Selezionare Personalizzato nell'elenco a discesa Build Presets (Impostazioni di compilazione ).
2. Digitare ./src nella casella Percorso app.
3. Lasciare vuota la casella Percorso API.
4. Digitare la casella percorso artefatto dell'app ./src.

Angular

1. Selezionare Angular 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 dist/angular-basic nella casella Percorso artefatto app.

Blazor

1. Selezionare Blazor nell'elenco a discesa Build Presets (Impostazioni di compilazione ).
2. Mantenere il valore predefinito client nella casella Percorso app.
3. Lasciare vuota la casella Percorso API.
4. Mantenere il valore predefinito di wwwroot nella casella Percorso artefatto app.

React

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.

Vue

1. Selezionare Vue.js dall'elenco a discesa Compila preimpostazioni .
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.

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

1. Selezionando il banner indicato, selezionare qui per controllare lo stato delle esecuzioni di GitHub Actions per passare all'esecuzione di GitHub Actions nel repository. Dopo aver verificato il completamento del processo di distribuzione, è possibile passare 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.

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