Compartir vía

Inicio rápido: Creación e implementación de una aplicación web de Python desde GitHub Codespaces en Azure mediante una plantilla de la CLI para desarrolladores de Azure

  • Artículo

Este inicio rápido le guía a través de la manera más sencilla y rápida de crear e implementar una solución web y de base de datos de Python en Azure. Siguiendo las instrucciones de este inicio rápido, hará lo siguiente:

  • Elija una plantilla de la CLI para desarrolladores de Azure (azd) basada en el marco web de Python, la plataforma de base de datos de Azure y la plataforma de hospedaje web de Azure en la que quiera compilar.
  • Cree un nuevo código de GitHub Codespace que contenga el código generado a partir de la azd plantilla seleccionada.
  • Use GitHub Codespaces y el terminal bash de Visual Studio Code en línea. El terminal permite usar comandos de la CLI para desarrolladores de Azure para ejecutar una azd plantilla para crear una base de datos y una aplicación web de ejemplo, y crear y configurar los recursos de Azure necesarios y, a continuación, implementar la aplicación web de ejemplo en Azure.
  • Edite la aplicación web en un espacio de código de GitHub y use un azd comando para volver a implementar.
  • Use un azd comando para limpiar los recursos de Azure.
  • Cierre y vuelva a abrir gitHub Codespace.
  • Publique el nuevo código en un repositorio de GitHub.

Este tutorial tardará menos de 25 minutos en completarse. Al finalizar, puede empezar a modificar el nuevo proyecto con el código personalizado.

Para más información sobre estas azd plantillas para el desarrollo de aplicaciones web de Python:

Requisitos previos

Importante

Tanto GitHub Codespaces como Azure son servicios basados en suscripciones de pago. Después de algunas asignaciones gratuitas, puede que se le cobre por usar estos servicios. Después de este inicio rápido, podría afectar a estas asignaciones o facturación. Cuando es posible, las azd plantillas se crearon con el nivel de opciones menos costoso, pero es posible que algunas no sean gratuitas. Use la calculadora de precios de Azure para comprender mejor los costos. Para más información, consulte Precios de GitHub Codespaces para obtener más información.

Elección de una plantilla y creación de un espacio de código

Elija una azd plantilla basada en el marco web de Python, la plataforma de hospedaje web de Azure y la plataforma de base de datos de Azure en la que quiera compilar.

  1. En la siguiente lista de plantillas, elija una que use las tecnologías que desea usar en la nueva aplicación web.

    Plantilla Marco web Base de datos Plataforma de hospedaje Nuevo espacio de código
    azure-django-postgres-flexible-aca Django Servidor flexible de PostgreSQL Azure Container Apps Nuevo espacio de código
    azure-django-postgres-flexible-appservice Django Servidor flexible de PostgreSQL Azure App Service Nuevo espacio de código
    azure-django-cosmos-postgres-aca Django Cosmos DB (adaptador de PostgreSQL) Azure Container Apps Nuevo espacio de código
    azure-django-cosmos-postgres-appservice Django Cosmos DB (adaptador de PostgreSQL) Azure App Service Nuevo espacio de código
    azure-django-postgres-addon-aca Django Complemento PostgreSQL de Azure Container Apps Azure Container Apps Nuevo espacio de código

  1. Para mayor comodidad, la última columna de cada tabla contiene un vínculo que crea un nuevo Codespace e inicializa la plantilla en la azd cuenta de GitHub. Haga clic con el botón derecho y seleccione "Abrir en nueva pestaña" en el vínculo "Nuevo espacio de código" junto al nombre de plantilla que seleccionó para iniciar el proceso de instalación.

    Durante este proceso, es posible que se le pida que inicie sesión en su cuenta de GitHub y se le pedirá que confirme que desea crear codespace. Seleccione el botón "Crear espacio de código" para ver la página "Configurar el espacio de código".

  2. Después de unos minutos, se carga una versión basada en web de Visual Studio Code en una nueva pestaña del explorador con la plantilla web de Python cargada como un área de trabajo en la vista Explorador.

Autenticación en Azure e implementación de la plantilla azd

Ahora que tiene un espacio de código de GitHub que contiene el código recién generado, use la azd utilidad desde codespace para publicar el código en Azure.

  1. En Visual Studio Code basado en web, el terminal debe estar abierto de forma predeterminada. Si no es así, use la tecla tilde ~ para abrir el terminal. Además, de forma predeterminada, el terminal debe ser un terminal bash. Si no es así, cambie a Bash en el área superior derecha de la ventana del terminal.

  2. En el terminal de Bash, escriba el siguiente comando:

    azd auth login

    azd auth login comienza el proceso de autenticación de Codespace en su cuenta de 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. Siga las instrucciones, entre las que se incluyen:

    • Copia de un código generado
    • Selección de entrar para abrir una nueva pestaña del explorador y pegar el código en el cuadro de texto
    • Elección de la cuenta de Azure en una lista
    • Confirmación de que está intentando iniciar sesión en la CLI de Microsoft Azure

  4. Cuando se ejecuta correctamente, el mensaje siguiente se muestra de nuevo en la pestaña Codespaces del terminal:

    Device code authentication completed.
Logged in to Azure.

  5. Implemente la nueva aplicación en Azure escribiendo el siguiente comando:

    azd up

    Durante este proceso, se le pide que:

    • Escribir un nuevo nombre de entorno
    • Seleccione una suscripción de Azure para usar [Usar flechas para mover, escriba para filtrar]
    • Seleccione una ubicación de Azure que se va a usar: [Use flechas para mover, escriba para filtrar]

    Una vez que responda a esas preguntas, la salida de azd indica que la implementación está progresando.

    Importante

    Una vez azd up completada correctamente, la aplicación web de ejemplo estará disponible en la red pública de Internet y la suscripción de Azure comenzará a acumular cargos por todos los recursos que se crean. Los creadores de las azd plantillas eligieron intencionadamente niveles económicos, pero no necesariamente niveles gratuitos , ya que los niveles gratuitos a menudo tienen disponibilidad restringida. Una vez que haya terminado de trabajar con la aplicación web de ejemplo, use azd down para quitar todos los servicios creados por azd up.

    Siga las instrucciones cuando se le pida que elija La suscripción de Azure que se usará para el pago y, a continuación, seleccione una ubicación de Azure que se va a usar. Elija una región cercana geográficamente.

    azd up La ejecución puede tardar varios minutos, ya que se aprovisiona e implementa varios servicios de Azure. A medida que se muestra el progreso, observe si hay errores. Si ve errores, consulte la sección Solución de problemas en la parte inferior de este documento.

  6. Cuando azd up se completa correctamente, se muestra una salida similar:

    (✓) 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 ve una pantalla predeterminada o una pantalla de error, es posible que la aplicación se inicie. Espere entre 5 y 10 minutos para ver si el problema se resuelve antes de solucionarlo.

    Ctrl + haga clic en la primera dirección URL después de la palabra - Endpoint: para ver el proyecto de aplicación web de ejemplo que se ejecuta en vivo en Azure.

  7. Ctrl + haga clic en la segunda dirección URL del paso anterior para ver los recursos aprovisionados en Azure Portal.

Edición y reimplementación

El siguiente paso consiste en realizar un pequeño cambio en la aplicación web y, a continuación, volver a implementar.

  1. Vuelva a la pestaña del explorador que contiene Visual Studio Code y use la vista Explorador de Visual Studio Code para ir a la carpeta src/templates y abrir el archivo index.html . Busque la línea de código siguiente:

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

    Cambie el texto dentro del H1:

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

    El código se guarda mientras escribe.

  2. Para volver a implementar la aplicación con el cambio, ejecute el siguiente comando en el terminal:

    azd deploy

  3. Una vez completado el comando, actualice la pestaña del explorador con el sitio web de ReleCloud para ver la actualización. Dependiendo de la plataforma de hospedaje web que se use, puede tardar varios minutos antes de que los cambios sean visibles.

    Ya está listo para editar y eliminar archivos en la plantilla. Para obtener más información, consulte ¿Qué puedo editar o eliminar en la plantilla?

Limpieza de recursos

Limpie los recursos creados por la plantilla ejecutando el comando azd down .

azd down

El azd down comando elimina los recursos de Azure y el flujo de trabajo de Acciones de GitHub. Cuando se le solicite, acepte eliminar todos los recursos asociados al grupo de recursos.

Opcional: Busque el espacio de código.

En esta sección se muestra cómo se ejecuta el código (temporalmente) y se conserva a corto plazo en un codespace. Si planea seguir trabajando en el código, debe publicar el código en un nuevo repositorio.

  1. Cierre todas las pestañas relacionadas con este artículo de inicio rápido o cierre completamente el explorador web.

  2. Abra el explorador web y una nueva pestaña y vaya a: https://github.com/codespaces

  3. Cerca de la parte inferior, verá una lista de los espacios de código recientes. Busque la que creó en una sección denominada "Propiedad de Azure-Samples".

  4. Seleccione los puntos suspensivos situados a la derecha de codespace para ver un menú contextual. Desde aquí puede cambiar el nombre del espacio de código, publicar en un nuevo repositorio, cambiar el tipo de máquina, detener el espacio de código, etc.

Opcional: Publicación de un repositorio de GitHub desde Codespaces

En este momento, tiene un codespace, que es un contenedor hospedado por GitHub que ejecuta el entorno de desarrollo de Visual Studio Code con el nuevo código generado a partir de una azd plantilla. Sin embargo, el código no se almacena en un repositorio de GitHub. Si planea seguir trabajando en el código, debe hacer que sea una prioridad.

  1. En el menú contextual del espacio de código, seleccione "Publicar en un nuevo repositorio".
  2. En el cuadro de diálogo "Publicar en un nuevo repositorio", cambie el nombre del nuevo repositorio y elija si desea que sea un repositorio público o privado. Seleccione "Crear repositorio".
  3. Después de unos instantes, se creará el repositorio y el código que generó anteriormente en este inicio rápido se insertará en el nuevo repositorio. Seleccione el botón "Ver repositorio" para ir al nuevo repositorio.
  4. Para volver a abrir y continuar con la edición de código, seleccione la lista desplegable verde "<> Código", cambie a la pestaña Codespaces y seleccione el nombre del espacio de código en el que estaba trabajando anteriormente. Ahora debe volver al entorno de desarrollo de Visual Studio Codespace.
  5. Use el panel Control de código fuente para crear nuevas ramas y almacenar provisionalmente y confirmar nuevos cambios en el código.

Solución de problemas

Si ve errores durante azd up, pruebe lo siguiente:

  • Ejecute azd down para quitar los recursos que se puedan haber creado. Como alternativa, puede eliminar el grupo de recursos que se creó en Azure Portal.
  • Vaya a la página Codespaces de la cuenta de GitHub, busque Codespace creado durante este inicio rápido, seleccione los puntos suspensivos a la derecha y elija "Eliminar" en el menú contextual.
  • En Azure Portal, busque Almacenes de claves. Seleccione Administrar almacenes eliminados, elija la suscripción, seleccione todos los almacenes de claves que contengan el nombre azdtest o lo que haya llamado su entorno y seleccione Purgar.
  • Vuelva a intentar los pasos de este inicio rápido. Esta vez, cuando se le solicite, elija un nombre más sencillo para su entorno. Pruebe un nombre corto, letras minúsculas, sin números, sin letras mayúsculas, sin caracteres especiales.
  • Al reintentar los pasos de inicio rápido, elija otra ubicación.

Consulte las preguntas más frecuentes para obtener una lista más completa de posibles problemas y soluciones.

Contenido relacionado