Esercizio - Creare un'app Web statica di Azure

  • 5 minuti

In questo esercizio si creerà un'istanza di App Web statiche di Azure che include un flusso di lavoro di GitHub Actions per la compilazione e la pubblicazione automatiche dell'applicazione.

Creare un'app Web statica

Ora che è stato creato il repository GitHub, è possibile creare un'istanza di App Web statiche di Azure dal portale di Azure.

Installare l'estensione App Web statiche di Azure per Visual Studio Code

  1. Passare a Visual Studio Marketplace e installare l'estensione App Web statiche di Azure per Visual Studio Code.

  2. Quando la scheda dell'estensione viene caricata in Visual Studio Code, selezionare il pulsante Installa .

  3. Al termine dell'installazione, selezionare Riavvia per aggiornare se richiesto.

Accedere ad Azure in Visual Studio Code

  1. In Visual Studio Code accedere ad Azure selezionando Visualizza>riquadro comandi e immettendo Azure: Accedi.

  2. Seguire le istruzioni per copiare e incollare il codice fornito nel Web browser, che autentica la sessione di Visual Studio Code.

Selezionare la sottoscrizione

  1. Apri Visual Studio Code e seleziona File > Apri e apri il repository che hai clonato sul tuo computer nell'editor.

  2. Verificare di aver eseguito l'accesso alla sottoscrizione di Azure preferita aprendo il riquadro comandi e immettendo Azure: Select Subscriptionse premendo INVIO.

  3. Selezionare la sottoscrizione (dovrebbe apparire un segno di spunta accanto) e fare clic su OK.

Creare un'app Web statica

  1. Aprire Visual Studio Code e selezionare File > Apri per aprire nel computer il repository clonato nell'editor.

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

    Screenshot del logo di Azure in VS Code.

    Nota

    È necessario accedere ad Azure e GitHub. Se non è già stato effettuato l'accesso ad Azure e GitHub da Visual Studio Code, l'estensione richiederà di accedere a entrambi durante il processo di creazione.

  3. Posizionare il mouse sull'intestazione App Web statiche , fare clic con il pulsante destro del mouse e selezionare Crea app Web statica.

    Screenshot che mostra dove passare per creare un'app Web.

  4. Immettere my-first-static-web-app e premere INVIO.

    Screenshot che mostra come creare un'app Web statica.

  5. Selezionare la posizione e premere INVIO.

    Screenshot che mostra come selezionare una sottoscrizione.

  1. Selezionare l'opzione Angular e premere INVIO.

    Screenshot che mostra l'opzione angular selezionata.

  2. Immettere /angular-app come percorso per il codice dell'applicazione e premere INVIO.

    Screenshot che mostra la posizione del codice inserito come applicazione Angular.

  3. Immettere dist/angular-app come percorso di output della build in cui vengono compilati i file per la produzione nell'app e premere INVIO.

    Screenshot che mostra come inserire il percorso di output della build per Angular.

  1. Selezionare l'opzione React e premere INVIO.

    Screenshot che mostra l'opzione react selezionata.

  2. Immettere /react-app come percorso per il codice dell'applicazione e premere INVIO.

    Screenshot che mostra il percorso del codice immesso come app React.

  3. Immettere build come percorso di output della build in cui vengono compilati i file per la produzione nell'app e premere INVIO.

    Screenshot che mostra come immettere il percorso di output del build per React.

  1. Selezionare l'opzione Svelte e premere INVIO.

    Screenshot che mostra l'opzione Svelte selezionata.

  2. Immettere /svelte-app come percorso per il codice dell'applicazione e premere INVIO.

    Screenshot che visualizza la posizione del codice immesso come app Svelte.

  3. Immettere public come percorso di output della build in cui vengono compilati i file per la produzione nell'app e premere INVIO.

    Screenshot che mostra come inserire il percorso di output della build per Svelte.

  1. Selezionare l'opzione Vue e premere INVIO.

    Screenshot che mostra l'opzione Vue selezionata.

  2. Immettere /vue-app come percorso per il codice dell'applicazione e premere INVIO.

    Screenshot che mostra la posizione del codice immessa come app Vue.

  3. Immettere dist come percorso di output della build in cui i file vengono compilati per la produzione nell'app e premere invio.

    Screenshot che come inserire il percorso di destinazione della build per Vue

Nota

Il repository potrebbe essere leggermente diverso da quelli usati in precedenza. Contiene quattro diverse app in quattro cartelle diverse. Ogni cartella contiene un'app creata in un framework JavaScript diverso. In genere, è presente un'app nella radice del repository ed è necessario specificare / per il percorso dell'app. Questo è un ottimo esempio del motivo per cui App Web statiche di Azure permette innanzitutto di configurare i percorsi: per assicurare il controllo completo sulla compilazione dell'app.

  1. Al termine della creazione dell'app, in Visual Studio Code verrà visualizzata una notifica di conferma.

    Screenshot del codice di conferma che chiede all'utente di aprire le azioni in GitHub o Visualizza/Modifica configurazione.

  2. È possibile visualizzare lo stato di avanzamento della distribuzione usando GitHub Actions espandendo il menu Azioni .

    Screenshot che mostra come controllare lo stato di avanzamento tramite GitHub Actions.

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

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

    Screenshot che mostra come accedere al sito dell'app Web statica.

Congratulazioni. È stata distribuita la prima app in App Web statiche di Azure.

Nota

Se viene visualizzata una pagina Web che indica che l'app non è stata ancora compilata e distribuita, nessun problema. Aggiornare il browser dopo un minuto. GitHub Actions viene eseguito automaticamente quando viene creata l'istanza di App Web statiche di Azure. Se viene visualizzata la pagina iniziale, l'app è ancora in fase di distribuzione.