Esercizio - Attività iniziali

  • 7 minuti

In questo esercizio si crea un'istanza di App Web statiche di Azure che include un'azione di GitHub per la compilazione e la pubblicazione automatiche del sito Web.

Questo modulo usa le risorse rese disponibili tramite la sandbox, che offre l'accesso gratuito e temporaneo a una sottoscrizione di Azure, insieme alle risorse necessarie per completare gli esercizi. Assicurarsi di attivare la sandbox nella parte superiore di questa pagina. Quando si eseguono gli esercizi di questo modulo, ogni unità dipende dal contenuto creato in un esercizio precedente. Per questo motivo, scegliere un framework di JavaScript e usarlo per tutti gli esercizi successivi.

Creare un repository

Per iniziare, creare un repository usando un modello GitHub. È disponibile una serie di modelli di repository, che contengono un'app iniziale implementata in vari framework front-end.

  1. Passare alla pagina di creazione da modello di GitHub per il repository di modelli.

  2. Se viene chiesto un account proprietario, selezionare uno degli account GitHub.

  3. Per il nome del repository immettere my-static-web-app-and-api.

  4. Selezionare Create repository from template (Crea repository da modello).

    Quando si crea il progetto a partire da un modello, GitHub compila il repository in background.

Eseguire l'app in locale

Ora si ha un repository GitHub denominato my-static-web-app-and-api nell'account GitHub. Si clona quindi il repository GitHub e si esegue il codice in locale nel computer.

  1. Aprire una finestra di terminale sul computer.

    Se si usa Windows, è possibile immettere cmd nella casella di ricerca dell'area di notifica.

  2. Per clonare il repository nel computer, incollare il codice seguente nella finestra del prompt dei comandi.

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

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

    Nota

    Se si riscontrano problemi durante la copia nel terminale del prompt dei comandi, fare clic con il pulsante destro del mouse sull'icona nella barra del titolo e nella scheda Proprietà assicurarsi che l'opzione Usa CTRL+MAIUSC+C/V per Copia/Incolla sia selezionata.

  3. Passare alla directory per il codice sorgente clonato.

    cd my-static-web-app-and-api

  4. Passare alla directory per il framework front-end preferito.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Installare le dipendenze dell'applicazione.

    npm install

  6. Verificare che la versione più recente di ogni dipendenza sia installata con il comando seguente.

    npm audit fix

  7. Eseguire l'applicazione client front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Passare all'app

Quando il bundle dell'applicazione viene generato e compilato, viene visualizzata automaticamente una scheda del browser per visualizzare l'applicazione in esecuzione in locale.

L'host locale per angular è http://localhost:4200.

Screenshot of the local host for your Angular web app.

L'host locale per react è http://localhost:3000.

Screenshot of the local host for your React web app.

L'host locale per svelte è http://localhost:5000.

Screenshot of the local host for your Svelte web app.

L'host locale per Vue è http://localhost:8080.

Screenshot of the local host for your Vue web app.

L'app indicherà Caricamento dei dati in corso perché non esiste ancora alcun dato o API. L'API per l'app Web verrà aggiunta in seguito nel corso di questa lezione.

Nel terminale premere CTRL+C per arrestare il processo batch.

Complimenti. È stata creata l'applicazione, che è ora in esecuzione in locale nel browser. Sarà ora possibile pubblicare l'applicazione in App Web statiche di Azure.

Creare un'app Web statica

È stato creato il repository GitHub. È ora possibile creare un'app web statica usando l'estensione App Web statiche di Azure per Visual Studio Code.

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

  1. Aprire Visual Studio Code.

  2. Dal menu in alto selezionare Visualizza>Estensioni e immettere App Web statiche di Azure nella casella di ricerca.

  3. Quando la scheda dell’estensione viene caricata in Visual Studio Code, selezionare Installa.

Aprire la cartella dell'applicazione

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

  2. Immettere File: Apri cartella.

  3. Selezionare la cartella my-static-web-app-and-api.

  4. Selezionare Apri per aprire la cartella in Visual Studio Code.

Accedere ad Azure in Visual Studio Code

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

  2. Immettere Azure: Accedi e seguire le istruzioni per l'autenticazione.

    Importante

    Accedere ad Azure usando lo stesso account con cui è stata attivata la sandbox nel browser. L'uso dello stesso account rende disponibile la sottoscrizione Concierge, che consente di accedere alle risorse di Azure gratuite durante questa esercitazione.

Selezionare la propria sottoscrizione

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

  2. Immettere Azure: Seleziona sottoscrizioni e deselezionare tutte le selezioni ad eccezione di Sottoscrizione Concierge.

    Screenshot showing concierge subscription is selected.

Eseguire il commit delle modifiche

Quando sono state installate le dipendenze dell'applicazione, alcuni dei file nel progetto sono stati aggiornati. Per continuare, è necessario eseguire il commit di tali modifiche nel repository.

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

  2. Immettere e selezionare Git: Esegui commit di tutto.

  3. Immettere commit iniziale nella parte superiore del file.

  4. Salvare e chiudere il file di commit Git.

    Non preoccuparsi della sincronizzazione delle modifiche con il server a questo punto. Gli aggiornamenti vengono copiati in GitHub quando si pubblica l'app Web statica.

Creare l'app Web statica

Per creare un'app web statica sono necessarie sessioni autenticate di Azure e GitHub correnti. Se non si è già effettuato l'accesso a entrambi i provider, l'estensione richiede di accedere durante il processo di creazione.

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

  1. Immettere e selezionare App Web statiche di Azure: Crea app Web statica.

    Immettere i valori seguenti per il resto dei prompt del riquadro comandi.

    Richiesta Valore
    Subscription Selezionare la sottoscrizione Concierge
    Nome Immettere my-static-web-app-and-api
    Area Selezionare l'area più vicina
    Preset Selezionare Angular
    Posizione del codice dell'applicazione Immettere angular-app
    Percorso di output Immettere dist/angular-app

  1. Immettere e selezionare App Web statiche di Azure: Crea app Web statica.

    Immettere i valori seguenti per il resto dei prompt del riquadro comandi.

    Richiesta Valore
    Subscription Selezionare la sottoscrizione Concierge
    Nome Immettere my-static-web-app-and-api
    Area Selezionare l'area più vicina
    Preset Selezionare React
    Posizione del codice dell'applicazione Immettere react-app
    Percorso di output Immettere dist

  1. Immettere e selezionare App Web statiche di Azure: Crea app Web statica.

    Immettere i valori seguenti per il resto dei prompt del riquadro comandi.

    Richiesta Valore
    Subscription Selezionare la sottoscrizione Concierge
    Nome Immettere my-static-web-app-and-api
    Area Selezionare l'area più vicina
    Preset Selezionare Svelte
    Posizione del codice dell'applicazione Immettere svelte-app
    Percorso di output Immettere public

  1. Immettere e selezionare App Web statiche di Azure: Crea app Web statica.

    Immettere i valori seguenti per il resto dei prompt del riquadro comandi.

    Richiesta Valore
    Subscription Selezionare la sottoscrizione Concierge
    Nome Immettere my-static-web-app-and-api
    Area Selezionare l'area più vicina
    Preset Selezionare Vue
    Posizione del codice dell'applicazione Immettere vue-app
    Percorso di output Immettere dist

Nota

Questo repository è diverso da altri progetti usati in passato. Il progetto contiene quattro app diverse in quattro cartelle diverse. Ogni cartella contiene un'app creata in un framework JavaScript diverso. In genere, nella radice del repository è presente una sola app e quindi il valore di / predefinito 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 garantire all'utente il controllo completo sulla compilazione dell'app.

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

    Screenshots of the Open Actions in GitHub or View/Edit Config pop-up window.

    Durante la configurazione della compilazione, Visual Studio Code segnala lo stato di compilazione all'utente.

    Screenshot showing production status as waiting for deployment.

  2. È possibile visualizzare lo stato della distribuzione con GitHub Actions espandendo il menu Azioni.

    Screenshot showing how to see 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 showing how to use the Visual Studio Code extension to browse the static web app.

    L'app indicherà Caricamento dei dati in corso perché non esiste ancora alcun dato o API. L'API per l'app web verrà aggiunta in seguito nel corso di questo modulo.

Complimenti. L'app viene distribuita 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. Provare ad aggiornare il browser dopo un minuto. Il servizio GitHub Actions viene eseguito automaticamente quando viene creata l'app Web statica di Azure. Di conseguenza, se viene visualizzata la pagina iniziale, l'app è ancora in fase di distribuzione.

Eseguire il pull delle modifiche da GitHub

Eseguire il pull delle ultime modifiche da GitHub per interrompere il file del flusso di lavoro creato dal servizio App Web statiche di Azure.

  1. Aprire il riquadro comandi premendo la combinazione di tasti CTRL+MAIUSC+P.

  2. Digitare e selezionare Git: Pull.

  3. Premere INVIO.

Passaggi successivi

Successivamente si apprenderà come creare ed eseguire l'API usando un progetto di Funzioni di Azure.