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