Delen via

Quickstart: Een Python-web-app maken en implementeren vanuit GitHub Codespaces naar Azure met behulp van een Azure Developer CLI-sjabloon

  • Artikel

In deze quickstart wordt u begeleid bij de eenvoudigste en snelste manier om een Python-web- en databaseoplossing te maken en te implementeren in Azure. Door de instructies in deze quickstart te volgen, gaat u het volgende doen:

  • Kies een Azure Developer CLI-sjabloon (azd) op basis van het Python-webframework, het Azure-databaseplatform en het Azure-hostingplatform waarop u wilt bouwen.
  • Maak een nieuwe GitHub Codespace met code die is gegenereerd op basis van de azd sjabloon die u hebt geselecteerd.
  • Gebruik GitHub Codespaces en de online bash-terminal van Visual Studio Code. Met de terminal kunt u Azure Developer CLI-opdrachten gebruiken om een azd sjabloon uit te voeren om een voorbeeldweb-app en -database te maken en te configureren, en de benodigde Azure-resources te maken en configureren, en vervolgens de voorbeeldweb-app implementeren in Azure.
  • Bewerk de web-app in een GitHub Codespace en gebruik een azd opdracht om opnieuw te implementeren.
  • Gebruik een azd opdracht om Azure-resources op te schonen.
  • Sluit uw GitHub Codespace en open deze opnieuw.
  • Publiceer uw nieuwe code naar een GitHub-opslagplaats.

Het duurt minder dan 25 minuten om deze zelfstudie te voltooien. Na voltooiing kunt u beginnen met het wijzigen van het nieuwe project met uw aangepaste code.

Voor meer informatie over deze azd sjablonen voor de ontwikkeling van Python-web-apps:

Vereisten

Belangrijk

GitHub Codespaces en Azure zijn betaalde services op basis van abonnementen. Na enkele gratis toewijzingen worden er mogelijk kosten in rekening gebracht voor het gebruik van deze services. Als u deze quickstart volgt, kan dit van invloed zijn op deze toewijzingen of facturering. Indien mogelijk zijn de azd sjablonen gebouwd met behulp van de minst dure laag met opties, maar sommige zijn mogelijk niet gratis. Gebruik de Azure-prijscalculator om meer inzicht te krijgen in de kosten. Zie prijzen voor GitHub Codespaces voor meer informatie.

Een sjabloon kiezen en een coderuimte maken

Kies een azd sjabloon op basis van het Python-webframework, het Azure-hostingplatform en het Azure-databaseplatform waarop u wilt bouwen.

  1. Kies in de volgende lijst met sjablonen een sjabloon die gebruikmaakt van de technologieën die u wilt gebruiken in uw nieuwe webtoepassing.

    Template Web Framework Database Hostingplatform Nieuwe Codespace
    azure-django-postgres-flexible-aca Django PostgreSQL Flexibele server Azure Container Apps Nieuwe Codespace
    azure-django-postgres-flexible-appservice Django PostgreSQL Flexibele server Azure App Service Nieuwe Codespace
    azure-django-cosmos-postgres-aca Django Cosmos DB (PostgreSQL-adapter) Azure Container Apps Nieuwe Codespace
    azure-django-cosmos-postgres-appservice Django Cosmos DB (PostgreSQL-adapter) Azure App Service Nieuwe Codespace
    azure-django-postgres-addon-aca Django Azure Container Apps PostgreSQL-invoegtoepassing Azure Container Apps Nieuwe Codespace

  1. Voor uw gemak bevat de laatste kolom van elke tabel een koppeling waarmee een nieuwe Codespace wordt gemaakt en de azd sjabloon wordt geïnitialiseerd in uw GitHub-account. Klik met de rechtermuisknop en selecteer Openen in nieuw tabblad op de koppeling 'Nieuwe coderuimte' naast de sjabloonnaam die u hebt geselecteerd om het installatieproces te starten.

    Tijdens dit proces wordt u mogelijk gevraagd u aan te melden bij uw GitHub-account en wordt u gevraagd om te bevestigen dat u de Codespace wilt maken. Selecteer de knop Codespace maken om de pagina 'Uw coderuimte instellen' te zien.

  2. Na een paar minuten wordt een webversie van Visual Studio Code geladen in een nieuw browsertabblad met de Python-websjabloon die is geladen als een werkruimte in de Verkenner-weergave.

Verifiëren bij Azure en de azd-sjabloon implementeren

Nu u een GitHub Codespace met de zojuist gegenereerde code hebt, gebruikt u het azd hulpprogramma vanuit de Codespace om de code naar Azure te publiceren.

  1. In Visual Studio Code op internet moet de terminal standaard worden geopend. Als dat niet het is, gebruikt u de tilde-sleutel ~ om de terminal te openen. Bovendien moet de terminal standaard een bash-terminal zijn. Als dit niet het is, wijzigt u in bash in de rechterbovenhoek van het terminalvenster.

  2. Voer in de bash-terminal de volgende opdracht in:

    azd auth login

    azd auth login begint het proces voor het verifiëren van uw Codespace met uw Azure-account.

    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. Volg de instructies, waaronder:

    • Een gegenereerde code kopiëren
    • Enter selecteren om een nieuw browsertabblad te openen en de code in het tekstvak te plakken
    • Uw Azure-account kiezen in een lijst
    • Bevestigen dat u zich probeert aan te melden bij Microsoft Azure CLI

  4. Als dit lukt, wordt het volgende bericht weergegeven op het tabblad Codespaces in de terminal:

    Device code authentication completed.
Logged in to Azure.

  5. Implementeer uw nieuwe toepassing in Azure door de volgende opdracht in te voeren:

    azd up

    Tijdens dit proces wordt u gevraagd het volgende te doen:

    • Voer een nieuwe omgevingsnaam in
    • Selecteer een Azure-abonnement om te gebruiken [Gebruik pijlen om te verplaatsen, typ om te filteren]
    • Selecteer een Azure-locatie die u wilt gebruiken: [Gebruik pijlen om te verplaatsen, type om te filteren]

    Zodra u deze vragen hebt beantwoord, geeft de uitvoer van azd aan dat de implementatie vordert.

    Belangrijk

    Zodra azd up dit is voltooid, is de voorbeeldweb-app beschikbaar op het openbare internet en begint uw Azure-abonnement met de kosten voor alle resources die worden gemaakt. De makers van de azd sjablonen hebben opzettelijk goedkope lagen gekozen, maar niet noodzakelijkerwijs gratis lagen, omdat gratis lagen vaak beperkte beschikbaarheid hebben. Zodra u klaar bent met het werken met de voorbeeldweb-app, kunt u alle azd down services verwijderen die zijn gemaakt door azd up.

    Volg de instructies wanneer u wordt gevraagd om een Azure-abonnement te kiezen dat u wilt gebruiken voor betaling en selecteer vervolgens een Azure-locatie die u wilt gebruiken. Kies een regio die zich geografisch bij u in de buurt bevindt.

    Het uitvoeren azd up kan enkele minuten duren sinds het inrichten en implementeren van meerdere Azure-services. Wanneer de voortgang wordt weergegeven, kijkt u naar fouten. Als u fouten ziet, raadpleegt u de sectie Probleemoplossing onderaan dit document.

  6. Wanneer azd up de bewerking is voltooid, wordt vergelijkbare uitvoer weergegeven:

    (✓) 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

    Als u een standaardscherm of foutscherm ziet, wordt de app mogelijk gestart. Wacht 5-10 minuten om te zien of het probleem zichzelf oplost voordat u het probleem oplost.

    Houd Ctrl ingedrukt en klik op de eerste URL na het woord - Endpoint: om het voorbeeldweb-app-project live uit te voeren in Azure.

  7. Houd Ctrl ingedrukt en klik op de tweede URL uit de vorige stap om de ingerichte resources in Azure Portal weer te geven.

Bewerken en opnieuw implementeren

De volgende stap is het aanbrengen van een kleine wijziging in de web-app en vervolgens opnieuw implementeren.

  1. Ga terug naar het browsertabblad met Visual Studio Code en gebruik de verkennerweergave van Visual Studio Code om naar de map src/templates te navigeren en open het bestand index.html. Zoek de volgende coderegel:

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

    Wijzig de tekst in de H1:

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

    Uw code wordt opgeslagen terwijl u typt.

  2. Als u de app opnieuw wilt implementeren met uw wijziging, voert u de volgende opdracht uit in de terminal:

    azd deploy

  3. Nadat de opdracht is voltooid, vernieuwt u het browsertabblad met de Website ReleCloud om de update te bekijken. Afhankelijk van het webhostingplatform dat wordt gebruikt, kan het enkele minuten duren voordat uw wijzigingen zichtbaar zijn.

    U kunt nu bestanden in de sjabloon bewerken en verwijderen. Zie Wat kan ik bewerken of verwijderen in de sjabloon voor meer informatie ?

Resources opschonen

Schoon de resources op die door de sjabloon zijn gemaakt door de opdracht azd down uit te voeren.

azd down

Met azd down de opdracht worden de Azure-resources en de GitHub Actions-werkstroom verwijderd. Wanneer u hierom wordt gevraagd, gaat u akkoord met het verwijderen van alle resources die zijn gekoppeld aan de resourcegroep.

Optioneel: Zoek uw codespace

In deze sectie wordt gedemonstreerd hoe uw code (tijdelijk) wordt uitgevoerd en op korte termijn wordt bewaard in een Codespace. Als u van plan bent om verder te werken aan de code, moet u de code publiceren naar een nieuwe opslagplaats.

  1. Sluit alle tabbladen met betrekking tot dit quickstart-artikel of sluit uw webbrowser volledig af.

  2. Open uw webbrowser en een nieuw tabblad en navigeer naar: https://github.com/codespaces

  3. Onderaan ziet u een lijst met recente Codespaces. Zoek de sectie die u hebt gemaakt in een sectie met de titel 'Eigendom van Azure-Samples'.

  4. Selecteer het beletselteken rechts van deze Codespace om een contextmenu weer te geven. Hier kunt u de naam van de coderuimte wijzigen, publiceren naar een nieuwe opslagplaats, computertype wijzigen, de coderuimte stoppen en meer.

Optioneel: Een GitHub-opslagplaats publiceren vanuit Codespaces

Op dit moment hebt u een Codespace, een container die wordt gehost door GitHub waarop uw Visual Studio Code-ontwikkelomgeving wordt uitgevoerd, met uw nieuwe code die is gegenereerd op basis van een azd sjabloon. De code wordt echter niet opgeslagen in een GitHub-opslagplaats. Als u van plan bent om verder te werken aan de code, moet u die prioriteit geven.

  1. Selecteer 'Publiceren naar een nieuwe opslagplaats' in het contextmenu voor de codespace.
  2. Wijzig de naam van uw nieuwe opslagplaats in het dialoogvenster Publiceren naar een nieuwe opslagplaats en kies of u deze wilt gebruiken als een openbare of persoonlijke opslagplaats. Selecteer Opslagplaats maken.
  3. Na enkele ogenblikken wordt de opslagplaats gemaakt en wordt de code die u eerder in deze quickstart hebt gegenereerd, naar de nieuwe opslagplaats gepusht. Selecteer de knop Opslagplaats weergeven om naar de nieuwe opslagplaats te navigeren.
  4. Als u de code opnieuw wilt openen en bewerken, selecteert u de groene<> vervolgkeuzelijst Code, gaat u naar het tabblad Codespaces en selecteert u de naam van de Codespace waaraan u eerder hebt gewerkt. U moet nu terugkeren naar uw Codespace Visual Studio Code-ontwikkelomgeving.
  5. Gebruik het deelvenster Broncodebeheer om nieuwe vertakkingen te maken en nieuwe wijzigingen in uw code door te voeren.

Problemen oplossen

Als er fouten optreden tijdens azd uphet uitvoeren van een fout, kunt u het volgende proberen:

  • Voer deze opdracht uit azd down om alle resources te verwijderen die mogelijk zijn gemaakt. U kunt ook de resourcegroep verwijderen die is gemaakt in Azure Portal.
  • Ga naar de Codespaces-pagina voor uw GitHub-account, zoek de Codespace die tijdens deze quickstart is gemaakt, selecteer het beletselteken aan de rechterkant en kies 'Verwijderen' in het contextmenu.
  • Zoek in Azure Portal naar Key Vaults. Selecteer om verwijderde kluizen te beheren, kies uw abonnement, selecteer alle sleutelkluizen die de naam azdtest of de naam van uw omgeving bevatten en selecteer Leegmaken.
  • Voer de stappen in deze quickstart opnieuw uit. Wanneer u hierom wordt gevraagd, kiest u een eenvoudigere naam voor uw omgeving. Probeer een korte naam, kleine letters, geen cijfers, geen hoofdletters, geen speciale tekens.
  • Wanneer u de quickstartstappen opnieuw probeert, kiest u een andere locatie.

Zie de veelgestelde vragen voor een uitgebreidere lijst met mogelijke problemen en oplossingen.

Gerelateerde inhoud