Distribuire un sito Jekyll in App Web statiche di Azure

Articolo
10/22/2023

Questo articolo illustra come creare e distribuire un'applicazione Web Jekyll in App Web statiche di Azure.

In questa esercitazione apprenderai a:

Creare un sito Web Jekyll
Configurare una risorsa App Web statiche di Azure
Distribuire l'app Jekyll in Azure

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

Prerequisiti

Installare Jekyll
- Se necessario, è possibile usare il sottosistema Windows per Linux e seguire le istruzioni di Ubuntu.
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.

Crea l'app Jekyll

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

Dal terminale eseguire l'interfaccia della riga di comando di Jekyll per creare una nuova app.
```
jekyll new static-app
```
Passare all'app appena creata.
```
cd static-app
```
Inizializzare un nuovo repository Git.
```
 git init
```

Esegui il commit delle modifiche.

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

Eseguire il push dell'applicazione in GitHub

App Web statiche di Azure usa GitHub per pubblicare il sito Web. I passaggi seguenti illustrano come creare un repository GitHub.

Creare da https://github.com/new un repository GitHub vuoto denominato jekyll-azure-static (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>/jekyll-azure-static
```
Eseguire il push del repository locale in GitHub.
```
git push --set-upstream origin main
```
Nota

Il ramo Git può essere denominato in modo diverso da main. Sostituire main in questo comando con il valore corretto.

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

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
Abbonamento	Il nome della sottoscrizione di Azure.
Gruppo di risorse	jekyll-static-app
Nome	jekyll-static-app
Tipo di piano	Gratuito
Area per Funzioni di Azure ambienti di gestione temporanea e API	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

Azienda Selezionare l'organizzazione GitHub desiderata.

Repository Selezionare jekyll-static-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.
Nella sezione Dettagli compilazione selezionare Personalizzato nell'elenco a discesa Set di impostazioni di compilazione e mantenere i valori predefiniti.
Nella casella Percorso app immettere ./.
Lasciare vuota la casella Percorso API.
Nella casella Percorso output immettere _site.

Proprietà	valore
Azienda	Selezionare l'organizzazione GitHub desiderata.
Repository	Selezionare jekyll-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 del servizio app'app Web statica ed eseguire il provisioning di 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 di GitHub Actions.

Impostazioni Jekyll personalizzate

Quando si genera un'app Web statica, viene generato un file del flusso di lavoro che contiene le impostazioni di configurazione di pubblicazione per l'applicazione.

Per configurare le variabili di ambiente, ad esempio JEKYLL_ENV, aggiungere una env sezione all'App Web statiche di Azure GitHub Actions nel flusso di lavoro.

- name: Build And Deploy
   id: builddeploy
   uses: Azure/static-web-apps-deploy@v1
   with:
      azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
      repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
      action: "upload"
      ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
      # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

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

Condividi tramite