Esercizio: Ottenere l'applicazione di esempio

  • 10 minuti

Prepararsi per iniziare a creare una pipeline CI con Microsoft Azure Pipelines. Il primo passaggio consiste nel compilare ed eseguire l'app Web di Space Game sul computer locale. Capire come compilare il software localmente consente di ripetere il processo nella pipeline.

Mara eseguirà esattamente questa operazione che può essere replicata seguendo le procedure.

Creare un token di accesso personale di Azure DevOps

  1. Accedere all'organizzazione (https://dev.azure.com/{yourorganization}). Se non si ha un'organizzazione Azure DevOps, creare un'organizzazione gratuita prima di iniziare. Dopo aver eseguito l'accesso, se sono presenti più organizzazioni, scegliere Azure DevOps e passare all'organizzazione che si prevede di usare per il completamento di questo modulo. In questo esempio, il nome dell'organizzazione è fabrikam.

    Screenshot a piacere dell'organizzazione Azure DevOps.

  2. Dalla home page, aprire le impostazioni utente e selezionare Token di accesso personale.

  3. Selezionare + Nuovo token.

  4. Assegnare un nome al token usandone uno qualsiasi a piacere. Il token viene usato quando Codespace registra l'agente con l'organizzazione Azure DevOps, in modo da mantenere la scadenza predefinita.

  5. Scegliere Definito personalizzato e selezionare Mostra tutti gli ambiti.

    Screenshot di visualizzazione di tutti gli ambiti per un token di accesso personale.

  6. Selezionare l’ambito seguente: Pool di agenti (Lettura e gestione) e scegliere Creare.

    Screenshot di selezione delle autorizzazioni del pool di agenti per un token di accesso personale.

  7. Al termine, copiare il token e archiviarlo in una posizione sicura. A scopo di sicurezza, non verrà nuovamente visualizzato.

Avviso

Un token di accesso personale deve essere trattato e usato al pari di una password e deve essere tenuto segreto.

Creare un fork

Il primo passaggio per l'uso di un progetto in Git consiste nel creare una copia tramite fork in modo da poter usare e modificare i file di origine. Un fork è una copia di un repository GitHub. La copia esiste nell'account e consente di apportare le modifiche desiderate senza influire sul progetto originale.

Sebbene sia possibile proporre modifiche al progetto originale, in questa lezione si usa il progetto Web Space Game come se fosse il progetto originale di proprietà di Mara e del suo team.

Nota

Se in precedenza è stata creata una copia tramite fork di questo repository, ad esempio se è stato completato in precedenza questo modulo o un altro modulo di training di Tailspin Toys, è consigliabile eliminare il fork e crearne uno nuovo usando la procedura seguente. Se non si vuole eliminare il fork, assicurarsi di sincronizzarlo.

Per creare un fork del progetto Web Space Game nell'account GitHub:

  1. In un Web browser passare a GitHub ed eseguire l'accesso.

  2. Andare al progetto Web di Space Game.

  3. Seleziona Fork:

    Screenshot di GitHub che mostra la posizione del pulsante Fork.

  4. Per creare una copia tramite fork del repository nel proprio account, seguire le istruzioni.

Configurare i segreti per l'agente self-hosted

Prima di creare il proprio Codespace, vengono creati vari segreti che consentono l'esecuzione dell'agente Azure DevOps self-hosted. In produzione, non si consiglia di usare un agente self-hosted in GitHub Codespaces. Tuttavia, poiché il team usa Codespaces per il test, è una soluzione temporanea ottimale da usare durante la creazione delle pipeline.

  1. Passare al repository GitHub copiato tramite fork e selezionare Impostazioni>Segreti e variabili>Codespaces.

    Screenshot dei segreti di GitHub Codespaces.

  2. Creare i seguenti segreti del repository Codespaces.

    Nome Valore
    ADO_ORG Nome dell'organizzazione Azure DevOps che si sta usando per completare questo modulo. In questo esempio, è fabrikam il nome dell'organizzazione. Questo nome dell'organizzazione deve essere lo stesso usato durante la creazione del PAT nel passaggio precedente.
    ADO_PAT Il token di accesso personale creato nel passaggio precedente.

    Suggerimento

    In questo modulo di training, l'agente viene assegnato al pool di agenti Default. Se non si vuole eseguire l'agente nel pool Default, ad esempio si esegue questo modulo di training usando l'ambiente Azure DevOps di produzione e si hanno altri agenti nel pool Default, è possibile creare un segreto denominato ADO_POOL_NAME e specificare il nome del pool di agenti da usare. Se questo segreto non è specificato, viene usato il pool Default.

Configurare Codespaces

Viene quindi configurato Codespaces in modo che sia possibile creare il sito Web, usare i file di origine ed eseguire la pipeline tramite un agente self-hosted.

  1. Nel repository GitHub copiato tramite fork, selezionare Codice, scegliere di nuovo Codice, selezionare la scheda Codespaces e scegliere + di creare un nuovo Codespace.

    Screenshot di creazione di un nuovo Codespace con le opzioni.

  2. Attendere la compilazione di Codespace. Questa compilazione può richiedere alcuni istanti, ma è necessario eseguirla una volta sola in questo passaggio del modulo di training.

    Al termine della compilazione, si viene reindirizzati a una versione online di Visual Studio Code. Codespace include una nuova installazione di Visual Studio Code, simile a una nuova istallazione di Visual Studio Code nel computer locale. Al primo avvio di Codespace, Visual Studio Code online potrebbe richiedere di fornire determinate configurazioni o informazioni sulle preferenze dell'utente. È possibile scegliere le preferenze che soddisfano lo stile di utilizzo personale di Visual Studio Code.

Impostare il repository remoto upstream

Un repository remoto è un repository Git in cui i membri del team collaborano (simile a un repository in GitHub). Qui sono elencati i repository remoti ed è possibile aggiungerne uno che punta alla copia Microsoft del repository in modo che sia possibile ottenere il codice di esempio più recente.

  1. Nell'editor online di Visual Studio Code passare alla finestra del terminale e scegliere bash dal lato destro.

    Screenshot della finestra del terminale nell'editor online di Visual Studio Code.

  2. Eseguire il comando git remote per elencare i repository remoti:

    git remote -v

    Sono disponibili sia l'accesso di recupero (download) che l'accesso push (caricamento) al repository:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    Origin specifica il repository in GitHub. Quando si crea una copia tramite fork del codice da un altro repository, il repository remoto originale (quello da cui è stata eseguita la copia) viene spesso denominato upstream.

  3. Per creare un repository remoto denominato upstream che punta al repository Microsoft, eseguire questo comando git remote add:

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  4. Eseguire git remote una seconda volta per visualizzare le modifiche:

    git remote -v

    Si noterà che sono ancora disponibili sia l'accesso di tipo fetch (download) sia quello di tipo push (upload) al repository. Sarà disponibile anche l'accesso di recupero e push al repository Microsoft:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

Compilare ed eseguire l'app Web

  1. Nell'editor online di Visual Studio Code, passare alla finestra del terminale e, per compilare l'app, eseguire questo comando dotnet build:

    dotnet build --configuration Release

  2. Nella finestra del terminale eseguire il comando dotnet run per eseguire l'app:

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

    I file della soluzione .NET possono contenere più di un progetto. L'argomento --project specifica il progetto per l'app Web di Space Game.

Verificare se l'applicazione è in esecuzione

In modalità di sviluppo il sito Web di Space Game è configurato per l'esecuzione sulla porta 5000.

Viene visualizzato un nuovo messaggio nell'editor di Visual Studio. L'applicazione in esecuzione sulla porta 5000 è disponibile. Selezionare Aprire nel browser per passare all'app in esecuzione.

Screenshot del messaggio di port forwarding di Codespaces.

Nella nuova finestra del browser verrà visualizzato il sito Web Space Game:

Screenshot di un Web browser che mostra il sito Web di Space Game.

Si può interagire con la pagina, incluso il tabellone punteggi. Selezionare il nome di un giocatore per visualizzare i dettagli che lo riguardano:

Screenshot di un Web browser con il tabellone punteggi del sito Web di Space Game.

Al termine, tornare alla finestra del terminale e premere CTRL + C per arrestare l'app in esecuzione.

Preparare Visual Studio Code

Prima di tutto, configurare Visual Studio Code in modo da poter creare il sito Web localmente e usare i file di origine.

Visual Studio Code è dotato di un terminale integrato per poter modificare i file e lavorare dalla riga di comando in un'unica posizione.

  1. Avviare Visual Studio Code.

  2. Nel menu Visualizza selezionare Terminale.

  3. Nel menu a discesa, selezionare bash:

    Screenshot della selezione della shell Bash in Visual Studio Code.

    Nella finestra del terminale può essere selezionata qualsiasi shell installata nel sistema, ad esempio Bash, Zsh e PowerShell.

    In questo caso usare Bash. Git per Windows offre Git Bash, che semplifica l'esecuzione di comandi Git.

    Nota

    In Windows, se Git Bash non è elencato come opzione, assicurarsi di aver installato Git e quindi riavviare Visual Studio Code.

  4. Eseguire il comando cd per passare alla directory in cui si vuole lavorare, ad esempio la home directory (~). In alternativa, può essere selezionata una directory diversa.

    cd ~

Configurazione di Git

Se non si ha familiarità con Git e GitHub, è prima di tutto necessario eseguire alcuni comandi per associare l'identità a Git ed eseguire l'autenticazione con GitHub.

Il documento Configurare Git illustra il processo in modo più dettagliato.

È necessario completare almeno i passaggi seguenti. Eseguire questi comandi dal terminale integrato di Visual Studio Code.

  1. Impostare il nome utente.
  2. Impostare l'indirizzo di posta elettronica di commit.
  3. Memorizzare nella cache la password di GitHub.

Nota

Se si usa già l'autenticazione a due fattori con GitHub, creare un token di accesso personale e, quando richiesto in un secondo momento, usare il token al posto della password.

Considerare il token di accesso come una password e conservarlo in un luogo sicuro.

Ottenere il codice sorgente

A questo punto, si ottiene il codice sorgente da GitHub e si configura Visual Studio Code in modo che sia possibile eseguire l'app e usare i file di codice sorgente.

Creare un fork

Il primo passaggio per l'uso di un progetto in Git consiste nel creare una copia tramite fork in modo da poter usare e modificare i file di origine. Un fork è una copia di un repository GitHub. La copia esiste nell'account e consente di apportare le modifiche desiderate senza influire sul progetto originale.

Sebbene sia possibile proporre modifiche al progetto originale, in questa lezione si usa il progetto Web Space Game come se fosse il progetto originale di proprietà di Mara e del suo team.

Per creare un fork del progetto Web Space Game nell'account GitHub:

  1. In un Web browser andare su GitHub ed eseguire l'accesso.

  2. Andare al progetto Web di Space Game.

  3. Seleziona Fork:

    Screenshot di GitHub che mostra la posizione del pulsante Fork.

  4. Per creare una copia tramite fork del repository nel proprio account, seguire le istruzioni.

Clonare il fork in locale

Una volta inserita la copia del progetto Web Space Game nell'account GitHub, è possibile scaricare, o clonare, una copia nel computer in modo da poterla usare in locale.

Proprio come una copia fork, un clone è la copia di un repository. Quando si clona un repository, è possibile apportare modifiche, verificare che funzionino come previsto e quindi caricare tali modifiche in GitHub. È anche possibile sincronizzare la copia locale con le modifiche apportate da altri utenti autenticati alla copia di GitHub del repository.

Per clonare il progetto Web di Space Game nel computer:

  1. Andare al fork del progetto Web Space Game su GitHub.

  2. Sulla barra dei comandi selezionare Clona. Viene visualizzato un riquadro che mostra l'opzione Clona con le schede per i tipi di clonazione. Nella scheda HTTPS selezionare l'icona della copia accanto all'URL per copiare l'URL negli Appunti.

    Screenshot dell'individuazione dell'URL e del pulsante Copia dal repository GitHub.

  3. In Visual Studio Code passare alla finestra del terminale e immettere git clone, quindi incollare l'URL dagli Appunti. L'aspetto sarà simile al seguente:

    git clone https://github.com/username/mslearn-tailspin-spacegame-web.git

  4. Al termine dell'operazione Cloning 'mslearn-tailspin-spacegame-web'..., immettere il comando seguente per passare alla directory mslearn-tailspin-spacegame-web. La directory radice del repository.

    cd mslearn-tailspin-spacegame-web

Impostare il repository remoto upstream

Un repository remoto è un repository Git in cui i membri del team collaborano (simile a un repository in GitHub). Qui sono elencati i repository remoti ed è possibile aggiungerne uno che punta alla copia Microsoft del repository in modo che sia possibile ottenere il codice di esempio più recente.

  1. Eseguire il comando git remote per elencare i repository remoti:

    git remote -v

    Sono disponibili sia l'accesso di recupero (download) che l'accesso push (caricamento) al repository:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    Origin specifica il repository in GitHub. Quando si crea una copia tramite fork del codice da un altro repository, il repository remoto originale (quello da cui è stata eseguita la copia) viene spesso denominato upstream.

  2. Per creare un repository remoto denominato upstream che punta al repository Microsoft, eseguire questo comando git remote add:

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  3. Eseguire git remote una seconda volta per visualizzare le modifiche:

    git remote -v

    Si noterà che sono ancora disponibili sia l'accesso di tipo fetch (download) sia quello di tipo push (upload) al repository. Sarà disponibile anche l'accesso di recupero e push al repository Microsoft:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

Aprire il progetto in Esplora file

In Visual Studio Code la finestra del terminale punta alla directory radice del progetto Web di Space Game. Si procederà ora all'apertura del progetto per visualizzarne la struttura e utilizzare i file.

  1. Il modo più semplice per aprire il progetto è riaprire Visual Studio Code nella directory corrente. A questo scopo, eseguire il comando seguente nel terminale integrato:

    code -r .

    In Esplora file vengono visualizzati la directory e l'albero dei file.

  2. Riaprire il terminale integrato. Il terminale posiziona l'utente alla radice del progetto Web.

Se il comando code non riesce, è necessario aggiungere Visual Studio Code al percorso di sistema. A questo scopo:

  1. In Visual Studio Code selezionare F1 o Visualizza>Riquadro comandi per accedere al riquadro comandi.

  2. Nel riquadro comandi immettere Comando della shell: Installa il comando 'code' in PATH.

  3. Ripetere la procedura precedente per aprire il progetto in Esplora file.

Compilare ed eseguire l'app Web

Ora che l'app Web è disponibile, può essere compilata ed eseguita localmente.

  1. In Visual Studio Code passare alla finestra del terminale ed eseguire il comando dotnet build per compilare l'app:

    dotnet build --configuration Release

    Nota

    Se il comando dotnet non viene trovato, verificare i prerequisiti all'inizio di questo modulo. Potrebbe essere necessario installare .NET SDK.

    I progetti .NET sono in genere dotati di due configurazioni della build, Debug e Release. Le build di Debug non sono ottimizzate per le prestazioni. Semplificano il tracciamento del programma e la risoluzione dei problemi. In questo caso selezionare la configurazione Release solo per vedere l'app Web in azione.

  2. Nella finestra del terminale eseguire il comando dotnet run per eseguire l'app:

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

    I file della soluzione .NET possono contenere più di un progetto. L'argomento --project specifica il progetto per l'app Web di Space Game.

Verificare se l'applicazione è in esecuzione

In modalità di sviluppo il sito Web di Space Game è configurato per l'esecuzione sulla porta 5000.

Da una nuova scheda del browser passare a http://localhost:5000 per visualizzare l'app in esecuzione:

Screenshot di un Web browser che mostra il sito Web di Space Game.

Suggerimento

Se nel browser viene visualizzato un errore correlato a un errore di privacy o di certificato, per arrestare l'app in esecuzione, selezionare CTRL + C dal terminale.

Successivamente, eseguire dotnet dev-certs https --trust e selezionare Sì quando richiesto. Per ulteriori informazioni, vedi questo post di blog.

Quando il computer considera attendibile il certificato SSL locale, per vedere l'app in esecuzione, eseguire il comando dotnet run una seconda volta e passare a http://localhost:5000 in una nuova scheda del browser.

Si può interagire con la pagina, incluso il tabellone punteggi. Selezionare il nome di un giocatore per visualizzare i dettagli che lo riguardano:

Screenshot di un Web browser con il tabellone punteggi del sito Web di Space Game.

Al termine, tornare alla finestra del terminale e premere CTRL+C per arrestare l'app in esecuzione.