Distribuire un sito Gatsby in App Web statiche di Azure

Questo articolo illustra come creare e distribuire un'applicazione Web Gatsby in App Web statiche di Azure. Il risultato finale è un nuovo sito di App Web statiche che include le azioni di GitHub Actions associate per controllare la creazione e la pubblicazione dell'app.

In questa esercitazione apprenderai a:

• Creare un'app Gatsby
• Configurare un sito di App Web statiche di Azure
• Distribuire l'app Gatsby in Azure

Se non si ha una sottoscrizione di Azure, creare un account Azure gratuito prima di iniziare.

Prerequisiti

• Un account Azure con una sottoscrizione attiva. Se non si ha un account, è possibile crearne uno gratuito.
• Un account GitHub. Se non si ha un account, è possibile crearne uno gratuito.
• Installazione di Git installata. Se non è disponibile, è possibile installare Git.
• Node.js installato.

Creare un'app Gatsby

Creare un'app Gatsby usando l'interfaccia della riga di comando di Gatsby:

1. Aprire un terminale

2. Usare lo strumento npx per creare una nuova app con l'interfaccia della riga di comando di Gatsby. Il processo può richiedere alcuni minuti.

   npx gatsby new static-web-app
   

3. Passare all'app appena creata

   cd static-web-app
   

4. Inizializzare un repository Git

   git init
   git add -A
   git commit -m "initial commit"
   

Nota

Se si usa la versione più recente di Gatsby, potrebbe essere necessario modificare package.json per includere "engines": { "node": ">=18.0.0" },

Eseguire il push dell'applicazione in GitHub

Per creare una nuova risorsa di App Web statiche di Azure, è necessario avere un repository in GitHub.

1. Creare da https://github.com/new un repository GitHub vuoto denominato gatsby-static-web-app (non creare un file LEGGIMI).

2. Aggiungere quindi il repository GitHub appena creato come repository remoto al repository locale. Assicurarsi di sostituire il segnaposto <YOUR_USER_NAME> nel comando seguente con il proprio nome utente di GitHub.

   git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
   

3. Eseguire il push del repository locale in GitHub.

   git push --set-upstream origin main
   

Distribuire l'app Web

I passaggi seguenti illustrano come creare una nuova app del sito statica e distribuirla in un ambiente di produzione.

Creare l'applicazione

1. Accedere al portale di Azure

2. Selezionare Crea una risorsa

3. Cercare App Web statiche

4. Selezionare App Web statiche

5. Selezionare Crea.

6. Nella scheda Informazioni di base immettere i valori seguenti.

   Proprietà	valore
   Abbonamento	Il nome della sottoscrizione di Azure.
   Gruppo di risorse	my-gatsby-group
   Nome	my-gatsby-app
   Tipo di piano	Gratuito
   Area per Funzioni di Azure ambienti di gestione temporanea e API	Selezionare un'area più vicina.
   Origine	GitHub

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

8. Immettere i valori di GitHub seguenti.

   Proprietà	valore
   Azienda	Selezionare l'organizzazione GitHub desiderata.
   Repository	Selezionare gatsby-static-web-app.
   Ramo	Selezionare main.

   Nota

   Se non è visualizzato alcun 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. Per concedere le autorizzazioni per i repository dell'organizzazione, è necessario essere un proprietario dell'organizzazione.

9. Nella sezione Dettagli compilazione selezionare Gatsby dall'elenco a discesa Build Presets (Impostazioni di compilazione) e mantenere i valori predefiniti.

Rivedi e crea

1. Selezionare Rivedi e crea per verificare che i dettagli siano tutti corretti.

2. Selezionare Crea per avviare la creazione del servizio app'app Web statica ed eseguire il provisioning di GitHub Actions per la distribuzione.

3. Al termine della distribuzione, selezionare Vai alla risorsa.

4. Nella schermata della risorsa selezionare il collegamento URL per aprire l'applicazione distribuita. Potrebbe essere necessario attendere un minuto o due per il completamento di GitHub Actions.

   

Pulire le risorse

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

1. Aprire il portale di Azure
2. Nella barra di ricerca superiore cercare l'applicazione in base al nome specificato in precedenza
3. Fare clic sull'app
4. Fare clic sul pulsante Elimina
5. Fare clic su Sì per confermare l'azione di eliminazione

Passaggi successivi

Aggiungere un dominio personalizzato