Share via

Démarrage rapide : Créer et déployer une application web Python à partir de GitHub Codespaces sur Azure à l’aide d’un modèle Azure Developer CLI

  • Article

Ce guide de démarrage rapide vous guide tout au long du moyen le plus simple et le plus rapide de créer et de déployer une solution web et de base de données Python sur Azure. En suivant les instructions de ce guide de démarrage rapide, vous allez :

  • Choisissez un modèle Azure Developer CLI (azd) basé sur le framework web Python, la plateforme de base de données Azure et la plateforme d’hébergement web Azure sur laquelle vous souhaitez vous appuyer.
  • Créez un espace de code GitHub contenant du code généré à partir du azd modèle que vous avez sélectionné.
  • Utilisez GitHub Codespaces et le terminal bash de Visual Studio Code en ligne. Le terminal vous permet d’utiliser des commandes Azure Developer CLI pour exécuter un modèle pour créer un exemple d’application azd web et de base de données, et de créer et configurer les ressources Azure nécessaires, puis de déployer l’exemple d’application web sur Azure.
  • Modifiez l’application web dans gitHub Codespace et utilisez une azd commande pour redéployer.
  • Utilisez une azd commande pour propre des ressources Azure.
  • Fermez et rouvrez votre Espace de code GitHub.
  • Publiez votre nouveau code dans un dépôt GitHub.

La fin de ce didacticiel doit prendre moins de 25 minutes. Une fois l’opération terminée, vous pouvez commencer à modifier le nouveau projet avec votre code personnalisé.

Pour en savoir plus sur ces azd modèles pour le développement d’applications web Python :

Prérequis

Important

GitHub Codespaces et Azure sont des services basés sur des abonnements payants. Après quelques allocations gratuites, vous pouvez être facturé pour l’utilisation de ces services. À la suite de ce guide de démarrage rapide, vous pouvez affecter ces allocations ou ces facturations. Dans la mesure du possible, les azd modèles ont été créés à l’aide du niveau d’options le moins coûteux, mais certains peuvent ne pas être gratuits. Utilisez la calculatrice de prix Azure pour mieux comprendre les coûts. Pour plus d’informations, consultez la tarification gitHub Codespaces pour plus d’informations.

Choisir un modèle et créer un espace de code

Choisissez un azd modèle basé sur le framework web Python, la plateforme d’hébergement web Azure et la plateforme de base de données Azure sur laquelle vous souhaitez vous appuyer.

  1. Dans la liste suivante de modèles, choisissez-en un qui utilise les technologies que vous souhaitez utiliser dans votre nouvelle application web.

    Modèle Web Framework Base de données Plateforme d’hébergement Nouvel espace de code
    azure-django-postgres-flexible-aca Django Serveur flexible PostgreSQL Azure Container Apps Nouvel espace de code
    azure-django-postgres-flexible-appservice Django Serveur flexible PostgreSQL Azure App Service Nouvel espace de code
    azure-django-cosmos-postgres-aca Django Cosmos DB (adaptateur PostgreSQL) Azure Container Apps Nouvel espace de code
    azure-django-cosmos-postgres-appservice Django Cosmos DB (adaptateur PostgreSQL) Azure App Service Nouvel espace de code
    azure-django-postgres-addon-aca Django Module complémentaire PostgreSQL Azure Container Apps Azure Container Apps Nouvel espace de code

  1. Pour votre commodité, la dernière colonne de chaque table contient un lien qui crée un espace de code et initialise le azd modèle dans votre compte GitHub. Cliquez avec le bouton droit et sélectionnez « Ouvrir dans un nouvel onglet » dans le lien « Nouvel espace de code » en regard du nom du modèle que vous avez sélectionné pour lancer le processus d’installation.

    Pendant ce processus, vous pouvez être invité à vous connecter à votre compte GitHub et vous êtes invité à confirmer que vous souhaitez créer l’espace de code. Sélectionnez le bouton « Créer un espace de code » pour afficher la page « Configuration de votre espace de code ».

  2. Après quelques minutes, une version web de Visual Studio Code est chargée dans un nouvel onglet de navigateur avec le modèle web Python chargé en tant qu’espace de travail dans l’affichage Explorateur.

S’authentifier auprès d’Azure et déployer le modèle azd

Maintenant que vous disposez d’un espace de code GitHub contenant le code nouvellement généré, vous utilisez l’utilitaire azd à partir de Codespace pour publier le code dans Azure.

  1. Dans Visual Studio Code basé sur le web, le terminal doit être ouvert par défaut. Si ce n’est pas le cas, utilisez la clé tilde ~ pour ouvrir le terminal. En outre, par défaut, le terminal doit être un terminal bash. Si ce n’est pas le cas, passez à bash dans la zone supérieure droite de la fenêtre de terminal.

  2. Dans le terminal bash, entrez la commande suivante :

    azd auth login

    azd auth login commence le processus d’authentification de votre codespace sur votre compte 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. Suivez les instructions, notamment :

    • Copie d’un code généré
    • Sélection de l’entrée pour ouvrir un nouvel onglet de navigateur et coller le code dans la zone de texte
    • Choix de votre compte Azure dans une liste
    • Confirmation que vous essayez de vous connecter à Microsoft Azure CLI

  4. En cas de réussite, le message suivant s’affiche dans l’onglet Codespaces du terminal :

    Device code authentication completed.
Logged in to Azure.

  5. Déployez votre nouvelle application sur Azure en entrant la commande suivante :

    azd up

    Pendant ce processus, vous êtes invité à :

    • Entrer un nom pour le nouvel environnement
    • Sélectionnez un abonnement Azure à utiliser [Utiliser des flèches pour déplacer, tapez pour filtrer]
    • Sélectionnez un emplacement Azure à utiliser : [Utiliser des flèches pour déplacer, tapez pour filtrer]

    Une fois que vous avez répondu à ces questions, la sortie du azd déploiement indique que le déploiement progresse.

    Important

    Une fois azd up l’opération terminée, l’exemple d’application web sera disponible sur l’Internet public et votre abonnement Azure commencera à accumuler des frais pour toutes les ressources créées. Les créateurs des azd modèles choisissent intentionnellement des niveaux peu coûteux, mais pas nécessairement des niveaux gratuits, car les niveaux gratuits ont souvent une disponibilité restreinte. Une fois que vous avez terminé d’utiliser l’exemple d’application web, utilisez cette option azd down pour supprimer tous les services créés par azd up.

    Suivez les instructions quand vous êtes invité à choisir l’abonnement Azure à utiliser pour le paiement, puis sélectionnez un emplacement Azure à utiliser. Choisissez une région proche de vous géographiquement.

    L’exécution azd up peut prendre plusieurs minutes, car il s’agit du provisionnement et du déploiement de plusieurs services Azure. À mesure que la progression s’affiche, surveillez les erreurs. Si vous voyez des erreurs, consultez la section Résolution des problèmes en bas de ce document.

  6. Une fois azd up terminée, une sortie similaire s’affiche :

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

    Si vous voyez un écran par défaut ou un écran d’erreur, l’application peut démarrer. Veuillez patienter 5 à 10 minutes pour voir si le problème se résout lui-même avant de résoudre le problème.

    Ctrl + cliquez sur la première URL après le mot - Endpoint: pour voir l’exemple de projet d’application web en cours d’exécution dans Azure.

  7. Ctrl + cliquez sur la deuxième URL de l’étape précédente pour afficher les ressources approvisionnées dans le Portail Azure.

Modifier et redéployer

L’étape suivante consiste à apporter une petite modification à l’application web, puis à redéployer.

  1. Revenez à l’onglet du navigateur contenant Visual Studio Code et utilisez la vue Explorateur de Visual Studio Code pour accéder au dossier src/templates , puis ouvrez le fichier index.html . Recherchez la ligne de code suivante :

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

    Modifiez le texte à l’intérieur du H1 :

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

    Votre code est enregistré au fur et à mesure que vous tapez.

  2. Pour redéployer l’application avec votre modification, exécutez la commande suivante dans le terminal :

    azd deploy

  3. Une fois la commande terminée, actualisez l’onglet du navigateur avec le site web ReleCloud pour afficher la mise à jour. Selon la plateforme d’hébergement web utilisée, cela peut prendre plusieurs minutes avant que vos modifications ne soient visibles.

    Vous êtes maintenant prêt à modifier et supprimer des fichiers dans le modèle. Pour plus d’informations, consultez Que puis-je modifier ou supprimer dans le modèle ?

Nettoyer les ressources

Nettoyez les ressources créées par le modèle en exécutant la commande azd down .

azd down

La azd down commande supprime les ressources Azure et le workflow GitHub Actions. Lorsque vous y êtes invité, acceptez de supprimer toutes les ressources associées au groupe de ressources.

Facultatif : Rechercher votre espace de code

Cette section montre comment votre code est (temporairement) en cours d’exécution et persistant à court terme dans un espace de code. Si vous envisagez de continuer à travailler sur le code, vous devez publier le code dans un nouveau référentiel.

  1. Fermez tous les onglets liés à cet article de démarrage rapide ou arrêtez entièrement votre navigateur web.

  2. Ouvrez votre navigateur web et un nouvel onglet, puis accédez à : https://github.com/codespaces

  3. En bas, vous voyez la liste des espaces de code récents. Recherchez celui que vous avez créé dans une section intitulée « Propriété d’Azure-Samples ».

  4. Sélectionnez les points de suspension à droite de cet espace de code pour afficher un menu contextuel. À partir de là, vous pouvez renommer l’espace de code, publier dans un nouveau référentiel, modifier le type d’ordinateur, arrêter l’espace de code, etc.

Facultatif : Publier un dépôt GitHub à partir de Codespaces

À ce stade, vous disposez d’un espace de code, qui est un conteneur hébergé par GitHub exécutant votre environnement de développement Visual Studio Code avec votre nouveau code généré à partir d’un azd modèle. Toutefois, le code n’est pas stocké dans un dépôt GitHub. Si vous envisagez de continuer à travailler sur le code, vous devez faire de cette priorité.

  1. Dans le menu contextuel de l’espace de code, sélectionnez « Publier dans un nouveau référentiel ».
  2. Dans la boîte de dialogue « Publier dans un nouveau référentiel », renommez votre nouveau dépôt et choisissez si vous souhaitez qu’il s’agisse d’un dépôt public ou privé. Sélectionnez « Créer un référentiel ».
  3. Après quelques instants, le référentiel sera créé et le code que vous avez généré précédemment dans ce guide de démarrage rapide sera envoyé (push) au nouveau référentiel. Sélectionnez le bouton « Afficher le référentiel » pour accéder au nouveau dépôt.
  4. Pour rouvrir et continuer à modifier le code, sélectionnez la liste déroulante «<> Code », basculez vers l’onglet Espaces de code et sélectionnez le nom de l’espace de code sur lequel vous travaillez précédemment. Vous devez maintenant être retourné à votre environnement de développement Codespace Visual Studio Code.
  5. Utilisez le volet Contrôle de code source pour créer de nouvelles branches et mettre en scène et valider de nouvelles modifications dans votre code.

Dépannage

Si vous voyez des erreurs pendant azd up, essayez ce qui suit :

  • Exécutez azd down pour supprimer toutes les ressources qui ont peut-être été créées. Vous pouvez également supprimer le groupe de ressources créé dans le Portail Azure.
  • Accédez à la page Codespaces de votre compte GitHub, recherchez l’espace de code créé pendant ce démarrage rapide, sélectionnez les points de suspension à droite et choisissez « Supprimer » dans le menu contextuel.
  • Dans le Portail Azure, recherchez les coffres de clés. Sélectionnez Gérer les coffres supprimés, choisissez votre abonnement, sélectionnez tous les coffres de clés qui contiennent le nom azdtest ou tout ce que vous avez nommé votre environnement, puis sélectionnez Vider.
  • Réessayez les étapes décrites dans ce guide de démarrage rapide. Cette fois lorsque vous y êtes invité, choisissez un nom plus simple pour votre environnement. Essayez un nom court, des lettres minuscules, aucun nombre, aucune lettre majuscule, aucun caractère spécial.
  • Lorsque vous réessayez les étapes de démarrage rapide, choisissez un autre emplacement.

Consultez le FAQ pour obtenir une liste plus complète des problèmes et solutions possibles.

Contenu connexe