Condividi tramite


Avvio rapido: Creare il 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 di avvio rapido si distribuisce un'applicazione in App Web statiche di Azure usando l'estensione per 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 di avvio 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 del pulsante Crea repository.

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 in Marketplace digitare App Web statiche di Azure.
  3. Selezionare Installa per App Web statiche di Azure.

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.

    Logo di Azure

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

  5. Seleziona la tua sottoscrizione di Azure.

  6. Immettere my-first-static-web-app come nome dell'applicazione.

  7. Selezionare l'area più vicina.

  8. Immettere i valori delle impostazioni corrispondenti alla scelta del framework.

    Impostazione Valore
    Framework Selezionare Personalizza
    Percorso del codice dell'applicazione Immetti /src
    Percorso della build Immetti /src
  9. Al termine della creazione dell'app, in Visual Studio Code verrà visualizzata una notifica di conferma.

    Conferma della creazione

    Se GitHub presenta un pulsante con l'etichetta Abilita azioni in questo repository, selezionare il pulsante per consentire l'esecuzione dell'azione di compilazione nel repository.

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

    In attesa della distribuzione

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

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

    Esplorazione del sito

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