Esercitazione: Pubblicare un sito VuePress in App Web statiche di Azure

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

In questa esercitazione si apprenderà come:

• Creare un'app VuePress
• Configurare una risorsa di App Web statiche di Azure
• Distribuire l'app VuePress in Azure

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 effettuata. Se non è disponibile, è possibile installare Git.
• Node.js installato.

Creare un'app VuePress

Creare un'app VuePress dall'interfaccia della riga di comando:

1. Creare una nuova cartella per l'app VuePress.

   mkdir static-site
   

2. Aggiungere un file README.md nella cartella.

   echo '# Hello From VuePress' > README.md
   

3. Inizializzare il file package.json.

   npm init -y
   

4. Aggiungere VuePress come valore di devDependency.

   npm install --save-dev vuepress
   

5. Aprire il file package.json in un editor di testo e aggiungere un comando di compilazione alla sezione scripts.

   ...
   "scripts": {
       "build": "vuepress build"
   }
   ...
   

6. Creare un file con estensione .gitignore per escludere la cartella node_modules.

   echo 'node_modules' > .gitignore
   

7. Inizializzare un repository Git.

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

Eseguire il push dell'applicazione in GitHub

Per connettersi ad App Web statiche di Azure, è necessario un repository in GitHub. I passaggi seguenti illustrano come creare un repository per il sito.

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

2. Aggiungere il repository GitHub 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>/vuepress-static-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 digitare i valori seguenti.

   Proprietà	Value
   Subscription	Il nome della sottoscrizione di Azure.
   Gruppo di risorse	my-vuepress-group
   Nome	vuepress-static-app
   Tipo di piano	Free
   Area per API Funzioni di Azure ambienti di staging	Selezionare un'area vicina.
   Origine	GitHub

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

8. Immettere i valori di GitHub seguenti.

   Proprietà	Value
   Organizzazione	Selezionare l'organizzazione GitHub desiderata.
   Repository	Selezionare vuepress-static-app.
   Ramo	Selezionare main.

   Annotazioni

   Se non è visualizzato alcun repository, potrebbe essere necessario autorizzare App Web statiche di Azure in GitHub. Passare al repository GitHub e quindi a Impostazioni > Applicazioni > App OAuth autorizzate, selezionare App Web statiche di Azure e infine Concedi. Per concedere le autorizzazioni per i repository dell'organizzazione, è necessario essere un proprietario dell'organizzazione.

9. Nella sezione Dettagli compilazione selezionare VuePress dall'elenco a discesa Set di impostazioni di compilazione e mantenere i valori predefiniti.

Rivedi e crea

1. Selezionare Rivedi + Crea per verificare che i dettagli siano tutti corretti.

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

3. Al termine della distribuzione selezionare Vai al gruppo di risorse.

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