Esercizio - Attività iniziali

  • 7 minuti

In questo esercizio si crea un'istanza di App Web statica di Azure, inclusa un'azione GitHub che compila e pubblica automaticamente il sito Web.

Questo modulo usa le risorse rese disponibili tramite la sandbox, che fornisce 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. Durante l'esecuzione degli esercizi in questo modulo, ogni unità dipende dal contenuto creato in un esercizio precedente. Per questo motivo, selezionare un framework JavaScript e usarlo per tutti gli esercizi successivi.

Creare un repository

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

  1. Passare alla pagina Crea da modello.

  2. Se viene richiesto proprietario, selezionare uno degli account GitHub.

  3. Per Nome repository inserisci my-static-web-app-and-api.

  4. Selezionare Crea repository.

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

Esegui l'app localmente

Hai ora un repository GitHub denominato my-static-web-app-and-api nell'account GitHub. Successivamente, clonare il repository GitHub ed eseguire il codice in locale nel computer.

  1. Aprire una finestra del terminale nel computer.

    Se si usa Windows, è possibile immettere cmd nella casella di ricerca della barra delle applicazioni.

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

    Annotazioni

    Se si verificano 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à verificare che sia selezionata l'opzione Usa CTRL+MAIUSC+C/V come Copia/Incolla .

  3. Passare alla directory per il codice sorgente clonato.

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

  4. Accedi alla directory per il framework frontend 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. Avviare l'applicazione client front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Accedi alla tua app

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

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

Screenshot dell'host locale per l'app Web Angular.

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

Screenshot dell'host locale per l'applicazione web React.

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

Screenshot dell'host locale per l'app Web Svelte.

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

Screenshot dell'host locale per la tua applicazione web Vue.

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

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

Congratulazioni! Hai compilato la tua applicazione e l'hai eseguita in locale nel tuo browser. È quindi possibile pubblicare l'applicazione in App Web statiche di Azure.

Creare un'app Web statica

Hai creato il tuo 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. Apri Visual Studio Code.

  2. Nel 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: Accedere e seguire le istruzioni per l'autenticazione.

    Importante

    Assicurarsi di accedere ad Azure usando lo stesso account usato per attivare 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 sottoscrizione

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

  2. Immettere Azure: selezionare Sottoscrizioni e deselezionare tutte le selezioni ad eccezione della sottoscrizione Concierge.

    Screenshot con l'opzione Sottoscrizione Concierge selezionata.

Eseguire il commit delle modifiche

Quando sono state installate le dipendenze dell'applicazione, alcuni dei file nel progetto sono stati aggiornati nel processo. 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 Commit All.

  3. Inserisci il commit iniziale nella parte superiore del file.

  4. Salvare e chiudere il file di commit Git.

    Non preoccuparti 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

Le sessioni autenticate correnti di Azure e GitHub sono necessarie per creare un'app Web statica. Se non hai già effettuato l'accesso a entrambi i provider, l'estensione ti invita ad accedere durante la 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 statiche....

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

    Rapido Valore
    Abbonamento Selezionare la sottoscrizione Concierge
    Nome Immettere my-static-web-app-and-api
    Area geografica Selezionare l'area più vicina
    Preimpostazione 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 statiche....

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

    Rapido Valore
    Abbonamento Selezionare la sottoscrizione Concierge
    Nome Immettere my-static-web-app-and-api
    Area geografica Selezionare l'area più vicina
    Preimpostazione 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 statiche....

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

    Rapido Valore
    Abbonamento Selezionare la sottoscrizione Concierge
    Nome Immettere my-static-web-app-and-api
    Area geografica Selezionare l'area più vicina
    Preimpostazione 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 statiche....

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

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

Annotazioni

Questo repository è diverso da altri progetti a cui potrebbe essere usato. Questo 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. Questa struttura è un ottimo esempio di come le Azure Static Web Apps consentono di configurare le posizioni inizialmente, dandoti il controllo totale su come viene costruita l'app.

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

    Screenshot del pulsante Apri azioni in GitHub o della finestra popup Visualizza/Modifica configurazione.

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

    Screenshot che mostra lo stato di produzione in attesa della distribuzione.

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

    Screenshot che mostra come vedere 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 usare l'estensione di Visual Studio Code per esplorare l'app Web statica.

    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.

Congratulazioni! L'app viene distribuita su Azure Static Web Apps.

Annotazioni

Non preoccuparti se viene visualizzata una pagina Web che indica che l'app non è ancora stata compilata e distribuita. Provare ad aggiornare il browser dopo un minuto. Il servizio GitHub Action 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

Scaricare le modifiche più recenti da GitHub per ottenere il file del flusso di lavoro creato dal servizio Azure Static Web Apps.

  1. Aprire il riquadro comandi premendo CTRL+MAIUSC+P.

  2. Immettere e selezionare Git: Pull.

  3. Premere Invio.

Passaggi successivi

Si apprenderà quindi come compilare ed eseguire l'API usando un progetto di Funzioni di Azure.