Condividi tramite


Guida introduttiva: Crea e distribuisci un'app web Python da GitHub Codespaces ad Azure utilizzando un modello CLI di Azure Developer.

Questa guida introduttiva illustra il modo più semplice e rapido per creare e distribuire una soluzione Web e di database Python per Azure. Seguendo le istruzioni riportate in questa guida introduttiva, è possibile:

  • Scegliere un modello Azure Developer CLI (azd) basato sul framework Web Python, sulla piattaforma di database Azure e Azure sulla piattaforma di hosting Web su cui si vuole eseguire la compilazione.
  • Creare un nuovo GitHub Codespace contenente il codice generato dal modello azd selezionato.
  • Usare GitHub Codespaces e il terminale Bash dell'Visual Studio Code online. Il terminale consente di usare Azure comandi dell'interfaccia della riga di comando per sviluppatori per eseguire un modello azd per creare un'app Web e un database di esempio e creare e configurare le risorse Azure necessarie, quindi distribuire l'app Web di esempio in Azure.
  • Modificare l'app Web in un GitHub Codespace e usare un comando azd per ridistribuire.
  • Usare un comando azd per pulire le risorse Azure.
  • Chiudere e riaprire il GitHub Codespace.
  • Pubblicare il nuovo codice in un repository GitHub.

Il completamento di questa esercitazione richiede meno di 25 minuti. Al termine, è possibile iniziare a modificare il nuovo progetto con il codice personalizzato.

Per altre informazioni su questi modelli azd per lo sviluppo di app Web Python, vedere:

Prerequisiti

Importante

Sia GitHub Codespaces che Azure sono servizi basati su sottoscrizione a pagamento. Dopo alcuni allocamenti gratuiti, è possibile che vengano addebitati costi per l'uso di questi servizi. Seguendo questa guida rapida è possibile influire su queste assegnazioni o sulla fatturazione. Quando possibile, i azd modelli usano il livello di opzioni meno costoso, ma alcuni potrebbero non essere gratuiti. Usare il calcolatore prezzi Azure per comprendere meglio i costi. Per altre informazioni, vedere prezzi GitHub Codespaces per altri dettagli.

Scegliere un modello e creare uno spazio di codice

Scegliere un modello azd basato sul framework Web Python, sulla piattaforma di hosting Web Azure e sulla piattaforma di database Azure su cui si vuole eseguire la compilazione.

  1. Nell'elenco seguente di modelli scegliere uno che usa le tecnologie da usare nella nuova applicazione Web.

    Modello Struttura Web Banca dati Piattaforma di hosting Nuovo spazio di codice
    azure-django-postgres-flexible-aca Django Server flessibile PostgreSQL Azure Container Apps New Codespace
    azure-django-postgres-flexible-appservice Django Server flessibile PostgreSQL Azure App Service New Codespace
    azure-django-cosmos-postgres-aca Django Cosmos DB (adapter PostgreSQL) Azure Container Apps New Codespace
    azure-django-cosmos-postgres-appservice Django Cosmos DB (adapter PostgreSQL) Azure App Service New Codespace
    azure-django-postgres-addon-aca Django Componente aggiuntivo Azure Container Apps PostgreSQL Azure Container Apps New Codespace

  1. Per praticità, l'ultima colonna di ogni tabella contiene un collegamento che crea un nuovo codespace e inizializza il modello azd nell'account GitHub. Fare clic con il pulsante destro del mouse sul collegamento Nuovo codespace accanto al nome del modello selezionato e selezionare Apri nella nuova scheda per avviare il processo di installazione.

    Durante questo processo, potrebbe essere richiesto di accedere all'account GitHub. Viene anche chiesto di confermare che si vuole creare codespace. Selezionare il pulsante Crea Codespace per accedere alla pagina Configurazione del codespace.

  2. Dopo alcuni minuti, una versione basata sul Web di Visual Studio Code viene caricata in una nuova scheda del browser con il modello di progetto Python per il web caricato come spazio di lavoro nella visualizzazione Esplora.

Eseguire l'autenticazione per Azure e distribuire il modello azd

Ora che si dispone di un GitHub Codespace contenente il codice appena generato, usare l'utilità azd dall'interno di Codespace per pubblicare il codice in Azure.

  1. Nel Visual Studio Code basato sul Web, il terminale è aperto per impostazione predefinita. In caso contrario, usare il tasto tilde ~ per aprire il terminale. Per impostazione predefinita, il terminale è un terminale bash. In caso contrario, passare a bash nell'area in alto a destra della finestra del terminale.

  2. Nel terminale bash immettere il comando seguente:

    azd auth login
    

    azd auth login avvia l'autenticazione di Codespace nell'account Azure.

    Start by copying the next code: XXXXXXXXX
    Then press enter and continue to log in from your browser...
    
    Waiting for you to complete authentication in the browser...
    
  3. Seguire le istruzioni, che includono:

    • Copia di un codice generato
    • Selezionando INVIO per aprire una nuova scheda del browser e incollando il codice nella casella di testo
    • Scelta dell'account Azure da un elenco
    • Conferma del tentativo di accesso a Microsoft Azure CLI
  4. Al termine, il messaggio seguente viene visualizzato di nuovo nella scheda Codespaces nel terminale:

    Device code authentication completed.
    Logged in to Azure.
    
  5. Distribuire la nuova applicazione in Azure immettendo il comando seguente:

    azd up
    

    Durante questo processo, viene chiesto di:

    • Immettere un nuovo nome di ambiente
    • Selezionare una sottoscrizione Azure da usare [Usare le frecce per spostare, digitare per filtrare]
    • Selezionare un percorso Azure da usare: [Usare le frecce per spostare, digitare per filtrare]

    Dopo aver risposto a queste domande, l'output di azd indica che la distribuzione è in corso.

    Importante

    Al termine azd up, l'app web di esempio è disponibile su internet pubblico e l'abbonamento Azure inizia ad accumulare addebiti per tutte le risorse create. I creatori dei azd modelli hanno scelto intenzionalmente livelli economici, ma non necessariamente livelli gratuiti , poiché i livelli gratuiti spesso hanno una disponibilità limitata. Al termine dell'utilizzo dell'app Web di esempio, usare azd down per rimuovere tutti i servizi creati azd up .

    Seguire le istruzioni quando viene richiesto di scegliere la sottoscrizione di Azure da utilizzare per il pagamento, quindi selezionare una località di Azure da usare. Scegliere un'area vicina geograficamente.

    L'esecuzione di azd up può richiedere alcuni minuti perché esegue il provisioning e la distribuzione di più servizi Azure. Quando viene visualizzato lo stato di avanzamento, tenere d'occhio gli errori. Se vengono visualizzati errori, vedere la sezione Risoluzione dei problemi nella parte inferiore di questo documento.

  6. Quando azd up è completato con successo, viene visualizzato un output simile:

    (✓) Done: Deploying service web
    - Endpoint: https://xxxxx-xxxxxxxxxxxxx-ca.example-xxxxxxxx.westus.azurecontainerapps.io/
    
    SUCCESS: Your application was provisioned and deployed to Azure in 11 minutes 44 seconds.
    You can view the resources created under the resource group xxxxx-rg in Azure portal:
    https://portal.azure.com/#@/resource/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/xxxxx-rg/overview
    

    Se viene visualizzata una schermata predefinita o una schermata di errore, l'app potrebbe essere avviata. Attendere 5-10 minuti per verificare se il problema si risolve prima della risoluzione dei problemi.

    1. Ctrl + fare clic sul primo URL dopo la parola - Endpoint: per visualizzare il progetto di app Web di esempio in esecuzione in Azure.
  7. Ctrl + fare clic sul secondo URL del passaggio precedente per visualizzare le risorse di cui è stato effettuato il provisioning nel portale di Azure.

Modificare e ridistribuire

Successivamente, apportare una piccola modifica all'app Web e quindi ridistribuirla.

  1. Tornare alla scheda del browser che contiene Visual Studio Code. Usare la visualizzazione Explorer di Visual Studio Code per passare alla cartella src/templates. Aprire il file index.html . Trovare la riga di codice seguente:

    <h1 id="page-title">Welcome to ReleCloud</h1>
    

    Modificare il testo all'interno di H1:

    <h1 id="page-title">Welcome to ReleCloud - UPDATED</h1>
    

    Il codice viene salvato durante la digitazione.

  2. Per ridistribuire l'app con la modifica, eseguire il comando seguente nel terminale:

    azd deploy
    
  3. Al termine del comando, aggiornare la scheda del browser con il sito Web ReleCloud per visualizzare l'aggiornamento. A seconda della piattaforma di hosting Web in uso, potrebbero essere necessari alcuni minuti prima che le modifiche siano visibili.

    È ora possibile modificare ed eliminare i file nel modello. Per altre informazioni, vedere Cosa è possibile modificare o eliminare nel modello?

Pulire le risorse

Pulire le risorse create dal modello eseguendo il comando azd down .

azd down

Il comando azd down elimina le risorse Azure e il flusso di lavoro GitHub Actions. Quando richiesto, accettare di eliminare tutte le risorse associate al gruppo di risorse.

Facoltativo: trovare lo spazio di codice

Questa sezione illustra come il codice è temporaneamente in esecuzione e persistente a breve termine in uno spazio di codice. Se si prevede di continuare a lavorare sul codice, pubblicare il codice in un nuovo repository.

  1. Chiudere tutte le schede correlate a questo articolo di Avvio rapido o arrestare completamente il Web browser.

  2. Aprire il Web browser e una nuova scheda e passare a https://github.com/codespaces.

  3. Nella parte inferiore viene visualizzato un elenco di codespace recenti. Cerca quello che hai creato in una sezione intitolata "Owned by Azure-Samples".

  4. Seleziona i puntini di sospensione a destra di questo Codespace per visualizzare un menu contestuale. Da qui è possibile rinominare lo spazio di codice, pubblicare in un nuovo repository, modificare il tipo di computer, arrestare lo spazio di codice e altro ancora.

Facoltativo: pubblicare un repository GitHub da Codespaces

A questo punto, si dispone di un codespace, che è un contenitore ospitato da GitHub che esegue l'ambiente di sviluppo Visual Studio Code con il nuovo codice generato da un modello azd. Tuttavia, il codice non viene archiviato in un repository di GitHub. Se si prevede di continuare a lavorare sul codice, classificare in ordine di priorità l'archiviazione in un repository.

  1. Dal menu di scelta rapida per lo spazio di codice selezionare Pubblica in un nuovo repository.
  2. Nella finestra di dialogo Pubblica in un nuovo repository rinominare il nuovo repository e scegliere se si vuole che sia un repository pubblico o privato. Selezionare Crea repository.
  3. Dopo alcuni istanti, il repository viene creato e il codice generato in precedenza in questa guida introduttiva viene inserito nel nuovo repository. Selezionare il pulsante Visualizza repository per passare al nuovo repository.
  4. Per riaprire e continuare a modificare il codice, selezionare l'elenco a discesa "<> Codice" verde, passare alla scheda Spazi di codice e selezionare il nome dello spazio di codice su cui si stava lavorando in precedenza. Torna al tuo ambiente di sviluppo Codespace di Visual Studio Code.
  5. Usare il riquadro Controllo del codice sorgente per creare nuovi rami e creare nuove fasi ed eseguire il commit di nuove modifiche al codice.

Risoluzione dei problemi

Se vengono visualizzati errori durante azd up, provare i passaggi seguenti:

  • Eseguire azd down per rimuovere tutte le risorse create dal comando. In alternativa, è possibile eliminare il gruppo di risorse creato nel portale di Azure.
  • Passare alla pagina Codespaces per il tuo account GitHub, trovare il Codespace creato durante questa guida introduttiva, selezionare l'ellissi a destra e scegliere Elimina dal menu di scelta rapida.
  • Nel portale di Azure, cerca Key Vaults. Selezionare Gestisci insiemi di credenziali eliminati, scegliere la sottoscrizione, selezionare tutti gli insiemi di credenziali che contengono il nome azdtest o qualunque nome che hai dato al tuo ambiente, e selezionare Elimina.
  • Ripetere i passaggi in questa guida introduttiva. Questa volta, quando ti viene richiesto, scegli un nome più semplice per l'ambiente. Provare un nome breve, lettere minuscole, nessun numero, nessuna lettera maiuscola e nessun carattere speciale.
  • Quando si ripetono i passaggi di avvio rapido, scegliere un'ubicazione diversa.

Per un elenco più completo di possibili problemi e soluzioni, vedere le domande frequenti.