Guida introduttiva: Creazione del primo sito statico con l'interfaccia della riga di comando di Azure

Articolo
04/07/2024

App Web statiche di Azure pubblica siti Web in produzione creando app da un repository di codice.

In questa guida di avvio rapido si distribuisce un'applicazione Web in App Web statiche di Azure usando l'interfaccia della riga di comando di Azure.

Prerequisiti

Account GitHub .
Account Azure.
- Se non si ha una sottoscrizione di Azure, è possibile creare un account di valutazione gratuito.
Interfaccia della riga di comando di Azure installata (versione 2.29.0 o successiva).
Configurazione di Git.

Definire le variabili di ambiente

Il primo passaggio di questa guida introduttiva consiste nel definire le variabili di ambiente.

export RANDOM_ID="$(openssl rand -hex 3)"
export MY_RESOURCE_GROUP_NAME="myStaticWebAppResourceGroup$RANDOM_ID"
export REGION=EastUS2
export MY_STATIC_WEB_APP_NAME="myStaticWebApp$RANDOM_ID"

Creare un repository (facoltativo)

(Facoltativo) Questo articolo usa un repository di modelli GitHub come un altro modo per semplificare l'avvio. Il modello include un'app iniziale da distribuire in App Web statiche di Azure.

Passare al percorso seguente per creare un nuovo repository: https://github.com/staticwebdev/vanilla-basic/generate.
Assegnare al repository my-first-static-web-appil nome .

Nota

Con App Web statiche di Azure è necessario almeno un file HTML per creare un'app Web. Il repository creato in questo passaggio include un singolo index.html file.

Selezionare Create repository.

Distribuire un'app Web statica

Distribuire l'app come app Web statica dall'interfaccia della riga di comando di Azure.

Crea un gruppo di risorse.

az group create \
  --name $MY_RESOURCE_GROUP_NAME \
  --location $REGION

Risultati:

{
  "id": "/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/my-swa-group",
  "location": "eastus2",
  "managedBy": null,
  "name": "my-swa-group",
  "properties": {
    "provisioningState": "Succeeded"
  },
  "tags": null,
  "type": "Microsoft.Resources/resourceGroups"
}

Distribuire una nuova app Web statica dal repository.

az staticwebapp create \
    --name $MY_STATIC_WEB_APP_NAME \
    --resource-group $MY_RESOURCE_GROUP_NAME \
    --location $REGION

La distribuzione di un'app statica è un processo in due passaggi. La prima operazione crea le risorse di Azure sottostanti che costituiscono l'app. Il secondo è un flusso di lavoro che compila e pubblica l'applicazione.

Prima di poter passare al nuovo sito statico, la compilazione della distribuzione deve prima terminare l'esecuzione.

Tornare alla finestra della console ed eseguire il comando seguente per elencare l'URL del sito Web.

export MY_STATIC_WEB_APP_URL=$(az staticwebapp show --name  $MY_STATIC_WEB_APP_NAME --resource-group $MY_RESOURCE_GROUP_NAME --query "defaultHostname" -o tsv)

runtime="1 minute";
endtime=$(date -ud "$runtime" +%s);
while [[ $(date -u +%s) -le $endtime ]]; do
    if curl -I -s $MY_STATIC_WEB_APP_URL > /dev/null ; then 
        curl -L -s $MY_STATIC_WEB_APP_URL 2> /dev/null | head -n 9
        break
    else 
        sleep 10
    fi;
done

Risultati:

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8 />
<meta name=viewport content="width=device-width, initial-scale=1.0" />
<meta http-equiv=X-UA-Compatible content="IE=edge" />
<title>Azure Static Web Apps - Welcome</title>
<link rel="shortcut icon" href=https://appservice.azureedge.net/images/static-apps/v3/favicon.svg type=image/x-icon />
<link rel=stylesheet href=https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/css/bootstrap.min.css crossorigin=anonymous />

echo "You can now visit your web server at https://$MY_STATIC_WEB_APP_URL"

Usare un modello GitHub

È stata distribuita correttamente un'app Web statica in App Web statiche di Azure usando l'interfaccia della riga di comando di Azure. Ora che si ha una conoscenza di base di come distribuire un'app Web statica, è possibile esplorare funzionalità e funzionalità più avanzate di App Web statiche di Azure.

Se si vuole usare il repository di modelli GitHub, seguire questa procedura:

Passare a https://github.com/login/device e immettere il codice ottenuto da GitHub per attivare e recuperare il token di accesso personale di GitHub.

Vai a https://github.com/login/device.
Immettere il codice utente come visualizzato nel messaggio della console.
Selezionare Continue.
Selezionare Authorize AzureAppServiceCLI.

Visualizzare il sito Web tramite Git

Quando si ottiene l'URL del repository durante l'esecuzione dello script, copiare l'URL del repository e incollarlo nel browser.
Selezionare la scheda Actions.

A questo punto, Azure sta creando le risorse per supportare l'app Web statica. Attendere fino a quando l'icona accanto al flusso di lavoro in esecuzione diventa un segno di spunta con sfondo verde. L'esecuzione di questa operazione potrebbe richiedere alcuni minuti.
Quando viene visualizzata l'icona di operazione riuscita, il flusso di lavoro è completo ed è possibile tornare alla finestra della console.
Eseguire il comando seguente per eseguire una query sull'URL del sito Web.

   az staticwebapp show \
     --name $MY_STATIC_WEB_APP_NAME \
     --query "defaultHostname"

Copiare l'URL nel browser per passare al sito Web.

Pulire le risorse (facoltativo)

Se non si intende continuare a usare questa applicazione, eliminare il gruppo di risorse e l'app Web statica usando il comando az group delete .

Passaggi successivi

Aggiungere un'API

Share via