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

Articolo
01/10/2024

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 verranno illustrate le procedure per:

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

Creare un'app VuePress

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

Creare una nuova cartella per l'app VuePress.
```
mkdir static-site
```

Aggiungere un file README.md nella cartella.

echo '# Hello From VuePress' > README.md

Inizializzare il file package.json.
```
npm init -y
```
Aggiungere VuePress come valore di devDependency.
```
npm install --save-dev vuepress
```
Aprire il file package.json in un editor di testo e aggiungere un comando di compilazione alla sezione scripts.
```
...
"scripts": {
    "build": "vuepress build"
}
...
```
Creare un file con estensione gitignore per escludere la cartella node_modules .
```
echo 'node_modules' > .gitignore
```

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.

Creare da https://github.com/new un repository GitHub vuoto denominato vuepress-static-app (non creare un file LEGGIMI).
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
```
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.

Creazione dell'applicazione

Accedere al portale di Azure
Selezionare Crea una risorsa
Cercare App Web statiche
Selezionare App Web statiche
Selezionare Crea

Nella scheda Informazioni di base immettere i valori seguenti.

Proprietà	Valore
Sottoscrizione	Il nome della sottoscrizione di Azure.
Gruppo di risorse	my-vuepress-group
Nome	vuepress-static-app
Tipo di piano	Gratuito
Region for Azure Functions API and staging environments (Area per l'API Funzioni di Azure e gli ambienti di gestione temporanea)	Selezionare un'area più vicina.
Origine	GitHub

Selezionare Accedi con GitHub ed eseguire l'autenticazione con GitHub.
Immettere i valori di GitHub seguenti.

Proprietà Valore

Organizzazione Selezionare l'organizzazione GitHub desiderata.

Repository Selezionare vuepress-static-app.

Ramo Selezionare main.

Nota

Se non vengono visualizzati repository, potrebbe essere necessario autorizzare App Web statiche di Azure in GitHub. Passare al repository GitHub e passare a Impostazioni > Applicazioni > OAuth autorizzate, 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.
Nella sezione Dettagli compilazione selezionare VuePress nell'elenco a discesa Build Presets (Compila preimpostazioni ) e mantenere i valori predefiniti.

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

Rivedi e crea

Selezionare Rivedi e crea per verificare che i dettagli siano tutti corretti.
Selezionare Crea per avviare la creazione dell'app Web statica servizio app ed effettuare il provisioning di un GitHub Actions per la distribuzione.
Al termine della distribuzione, selezionare Vai alla risorsa.
Nella schermata della risorsa selezionare il collegamento URL per aprire l'applicazione distribuita. Potrebbe essere necessario attendere un minuto o due per il completamento del 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:

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

Passaggi successivi

Aggiungere un dominio personalizzato