Delen via

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

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

  • Kies een sjabloon Azure Developer CLI (azd) op basis van het Python webframework, Azure databaseplatform en Azure webhostingplatform waarop u wilt bouwen.
  • Maak een nieuwe GitHub Codespace met code die is gegenereerd op basis van de sjabloon azd die u hebt geselecteerd.
  • Gebruik GitHub Codespaces en de bash-terminal van de online Visual Studio Code. Met de terminal kunt u Azure Cli-opdrachten voor ontwikkelaars 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 te configureren en vervolgens de voorbeeldweb-app te implementeren op Azure.
  • Bewerk de web-app in een GitHub Codespace en gebruik een opdracht azd om opnieuw te implementeren.
  • Gebruik een opdracht azd 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.

Zie voor meer informatie over deze azd-sjablonen voor het ontwikkelen van Python web-apps:

Vereiste voorwaarden

Belangrijk

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

Een sjabloon kiezen en een coderuimte maken

Kies een azd-sjabloon op basis van het Python webframework, Azure webhostingplatform en 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.

    Sjabloon Webframework gegevensbank Hostingplatform Nieuwe Codespace
    Azure-Django-Postgres-Flexible-ACA Django PostgreSQL Flexibele Server Azure Container Apps New Codespace
    azure-django-postgres-flexible-appservice Django PostgreSQL Flexibele Server Azure App Service New Codespace
    azure-django-cosmos-postgres-aca Django Cosmos DB (PostgreSQL-adapter) Azure Container Apps New Codespace
    azure-django-cosmos-postgres-appservice Django Cosmos DB (PostgreSQL-adapter) Azure App Service New Codespace
    azure-django-postgres-addon-aca Django Azure Container Apps PostgreSQL-invoegtoepassing Azure Container Apps New Codespace

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

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

  2. Na een paar minuten wordt een webgebaseerde versie van Visual Studio Code geladen in een nieuw tabblad van de browser, waarbij de Python-websjabloon is ingesteld als werkruimte in de Verkenner.

Verifiëren bij Azure en de azd-sjabloon implementeren

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

  1. In de webgebaseerde Visual Studio Code is de terminal standaard geopend. Als dat niet het is, gebruikt u de tilde-sleutel ~ om de terminal te openen. De terminal is standaard een bash-terminal. Als dat niet het geval is, verander het naar bash in de rechterbovenhoek van het terminalvenster.

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

    azd auth login

    azd auth login begint met het verifiëren van uw Codespace voor 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, typ om te filteren]

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

    Belangrijk

    Zodra azd up succesvol is voltooid, is de voorbeeldweb-app beschikbaar op het openbare internet en begint uw Azure-abonnement kosten op te bouwen 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. Wanneer u klaar bent met het werken aan de voorbeeld webapp, gebruikt u azd down om alle services te verwijderen die door azd up zijn gemaakt.

    Volg de instructies wanneer u wordt gevraagd om Azure Abonnement te kiezen 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 van azd up kan enkele minuten duren, omdat er meerdere Azure-services worden ingericht en geïmplementeerd. Wanneer de voortgang wordt weergegeven, let op 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, kan de app worden gestart. Wacht 5-10 minuten om te zien of het probleem zichzelf oplost voordat u het probleem oplost.

    1. Ctrl + 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 de Azure portal weer te geven.

Bewerken en opnieuw implementeren

Breng vervolgens een kleine wijziging aan in de web-app en implementeer deze opnieuw.

  1. Ga terug naar het browsertabblad met Visual Studio Code. Gebruik de Verkenner-weergave van Visual Studio Code om naar de map src/templates te gaan. Open het bestandindex.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. Wanneer de opdracht is voltooid, vernieuwt u het browsertabblad met de ReleCloud-website om de update te bekijken. Afhankelijk van het webhostingplatform dat u 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?

De hulpbronnen opschonen

Voer de opdracht azd down uit om de resources op te schonen die door de sjabloon zijn gemaakt.

azd down

Met de opdracht azd down 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, publiceert u de code 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 ga naar https://github.com/codespaces.

  3. Onderaan ziet u een lijst met recente Codespaces. Zoek naar degene 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 en die uw Visual Studio Code-ontwikkelomgeving uitvoert met de 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 door te gaan met het werken aan de code, geeft u prioriteit aan het opslaan ervan in een opslagplaats.

  1. Selecteer Publiceren naar een nieuwe opslagplaats in het contextmenu voor de coderuimte.
  2. Wijzig in het dialoogvenster Publiceren naar een nieuwe opslagplaats de naam van uw nieuwe opslagplaats en kies of u deze wilt gebruiken als een openbare of privé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 gaan.
  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 keert terug naar uw Codespace Visual Studio Code ontwikkelomgeving.
  5. Gebruik het deelvenster Broncodebeheer om nieuwe branches te maken en nieuwe wijzigingen in je code te stagen en committen.

Probleemoplossingsproces

Als er fouten optreden tijdens azd up, probeer dan de volgende stappen:

  • Voer deze opdracht uit azd down om alle resources te verwijderen die door de opdracht zijn gemaakt. U kunt ook de resourcegroep verwijderen die u hebt gemaakt in de Azure-portal.
  • Ga naar de pagina Codespaces voor uw GitHub-account, zoek de Codespace die tijdens deze quickstart is gemaakt, selecteer het beletselteken aan de rechterkant en kies Delete in het contextmenu.
  • Zoek in de Azure-portal naar Key Vaults. Selecteer Verwijderde kluizen 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 en 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.

Verwante inhoud

  • Last updated on