Avvio rapido: Creazione del primo sito statico con App Web statiche di Azure

App Web statiche di Azure pubblica un sito Web creando un'app da un repository di codice. In questa guida introduttiva si distribuisce un'applicazione in app Web statiche di Azure usando l'estensione Visual Studio Code.

Se non si ha una sottoscrizione di Azure, creare un account per una versione di prova gratuita.

Prerequisiti

Creare un repository

In questo articolo si usa un repository di modelli GitHub per semplificare le operazioni. Il modello include un'app iniziale da distribuire in App Web statiche di Azure.

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

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 file index.html.

Selezionare Create repository.

Screenshot of the Create repository button.

Clonare il repository

Con il repository creato nell'account GitHub, clonare il progetto nel computer locale usando il comando seguente.

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

Assicurarsi di sostituire <YOUR_GITHUB_ACCOUNT_NAME> con il nome utente di GitHub.

Aprire quindi Visual Studio Code e passare a File > Apri cartella per aprire il repository clonato nell'editor.

Installare l'estensione App Web statiche di Azure

Se non si ha già l'estensione App Web statiche di Azure per Visual Studio Code, è possibile installarla in Visual Studio Code.

  1. Selezionare Visualizza>estensioni.
  2. In Cerca estensioni nel Marketplace digitare App Web statiche di Azure.
  3. Selezionare Installa per App Web statiche di Azure.
  4. L'estensione viene installata in Visual Studio Code.

Creare un'app Web statica

  1. In Visual Studio Code selezionare il logo di Azure sulla barra delle attività per aprire la finestra delle estensioni di Azure.

    Azure Logo

    Nota

    Per continuare, è necessario accedere ad Azure e GitHub in Visual Studio Code. Se non si è già autenticati, l'estensione richiede di accedere a entrambi i servizi durante il processo di creazione.

  2. Premere F1 per aprire il riquadro comandi di Visual Studio Code.

  3. Immettere Crea app Web statica nella casella di comando.

  4. Selezionare App Web statiche di Azure: Crea app Web statica....

    Impostazione valore
    Nome Immettere my-first-static-web-app
    Area Selezionare l'area più vicina.
    Framework Seleziona Personalizza.
  5. Immettere i valori delle impostazioni corrispondenti alla scelta predefinita del framework.

    Impostazione Valore
    Posizione del codice dell'applicazione Immettere /src
    Percorso di compilazione Immettere /src
  6. Al termine della creazione dell'app, in Visual Studio Code verrà visualizzata una notifica di conferma.

    Created confirmation

    Quando la distribuzione è in corso, l'estensione di Visual Studio Code segnala lo stato della compilazione.

    Waiting for deployment

    Dopo aver completato la distribuzione, è possibile passare direttamente al proprio sito Web.

  7. Per visualizzare il sito Web nel browser, fare clic con il pulsante destro del mouse sul progetto nell'estensione App Web statiche e scegliere Sfoglia sito.

    Browse site

Pulire le risorse

Se non si intende continuare a usare questa applicazione, è possibile eliminare l'istanza di App Web statiche di Azure tramite l'estensione.

Nella finestra di Azure di Visual Studio Code tornare alla sezione Risorse e in App Web statiche fare clic con il pulsante destro del mouse su my-first-static-web-app e scegliere Elimina.

Passaggi successivi