Compartir vía

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

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 Python para Azure. Siguiendo las instrucciones de este inicio rápido, puede:

  • Elija una plantilla de Azure Developer CLI (azd) basada en el marco web de Python, la plataforma de base de datos Azure y Azure plataforma de hospedaje web en la que quiera compilar.
  • Cree un nuevo GitHub Codespace que contenga código generado a partir de la plantilla azd seleccionada.
  • Utiliza GitHub Codespaces y el terminal de Bash de Visual Studio Code en su versión en línea. El terminal permite usar Azure comandos de la CLI para desarrolladores para ejecutar una plantilla de azd para crear una base de datos y una aplicación web de ejemplo, y crear y configurar los recursos Azure necesarios y, a continuación, implementar la aplicación web de ejemplo en Azure.
  • Edite la aplicación web en un GitHub Codespace y use un comando azd para volver a implementar.
  • Use un comando azd para limpiar los recursos de Azure.
  • Cierre y vuelva a abrir el 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 obtener más información sobre estas plantillas de azd para el desarrollo de aplicaciones web de Python, consulte:

  • ¿Cuáles son estas plantillas?
  • ¿Cómo funcionan las plantillas?
  • ¿Por qué querría usar esto?
  • ¿Cuáles son mis otras opciones?

Prerrequisitos

Importante

Tanto GitHub Codespaces como Azure son servicios basados en suscripciones de pago. Después de algunas asignaciones gratuitas, es posible que se le cobre por usar estos servicios. Seguir este inicio rápido podría afectar a estas asignaciones o a la facturación. Cuando sea posible, las plantillas usan el nivel de opciones menos costoso, pero es posible que algunos no sean gratuitos. Use la calculadora de precios Azure para comprender mejor los costos. Para obtener 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 plantilla de azd 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 cual desea construir.

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

    • Django
    • FastAPI
    • Flask (marco de trabajo 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 New Codespace
    azure-django-postgres-flexible-appservice Django Servidor flexible de PostgreSQL Azure App Service New Codespace
    azure-django-cosmos-postgres-aca Django Cosmos DB (adaptador de PostgreSQL) Azure Container Apps New Codespace
    azure-django-cosmos-postgres-appservice Django Cosmos DB (adaptador de PostgreSQL) Azure App Service New Codespace
    azure-django-postgres-addon-aca Django Extensión de Azure Container Apps PostgreSQL Azure Container Apps New Codespace

  1. Para mayor comodidad, la última columna de cada tabla contiene un vínculo que crea un nuevo codespace e inicializa la plantilla azd en la cuenta de GitHub. Haga clic con el botón derecho en el vínculo Nuevo espacio de código situado junto al nombre de plantilla seleccionado y seleccione Abrir en la pestaña nueva 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. También se le pide que confirme que desea crear Codespace. Seleccione el botón Crear espacio de código para ver la página de configuración de su espacio de código.

  2. Después de unos minutos, una versión basada en web de Visual Studio Code carga en una nueva pestaña del explorador con la plantilla web 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 GitHub Codespace que contiene el código recién generado, use la utilidad azd desde codespace para publicar el código en Azure.

  1. En el Visual Studio Code basado en web, el terminal está abierto de forma predeterminada. Si no es así, use la tecla tilde para abrir el terminal. De forma predeterminada, el terminal es un terminal de Bash. Si no es así, cambie a Bash en el área superior derecha de la ventana de terminal.

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

    azd auth login

    azd auth login comienza a autenticar tu Codespace en tu 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 de una lista
    • Confirmación de que está intentando iniciar sesión en Microsoft CLI de 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: [Usar flechas para mover, escribir para filtrar]

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

    Importante

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

    Siga las instrucciones cuando se le pida que elija Azure Suscripción 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.

    La ejecución de azd up 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 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.

    1. 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 directo en Azure.

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

Edición y reimplementación

A continuación, realice un pequeño cambio en la aplicación web y vuelva a implementarlo.

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

    <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. Cuando finalice 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 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 que creó la plantilla ejecutando el comando azd down .

azd down

El comando azd down 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 codespace.

En esta sección se muestra cómo tu código se ejecuta temporalmente y se conserva a corto plazo en un Codespace. Si tiene previsto seguir trabajando en el código, publique 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 .

  3. Cerca de la parte inferior, verá una lista de los Codespaces recientes. Busque el que creaste en la sección titulada "Propiedad de Azure-Samples".

  4. Seleccione los puntos suspensivos situados a la derecha de este codespace para abrir 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: Publicar un repositorio de GitHub desde Codespaces

En este momento, tiene un Codespace, que es un contenedor alojado en GitHub y ejecutando el entorno de desarrollo de Visual Studio Code con el nuevo código generado a partir de una plantilla de azd. Sin embargo, el código no se almacena en un repositorio de GitHub. Si tiene previsto seguir trabajando en el código, priorice su almacenamiento en un repositorio.

  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 Create repository (Crear repositorio).
  3. Después de unos instantes, se crea el repositorio y el código que generó anteriormente en este inicio rápido se inserta 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. Vuelve al entorno de desarrollo de Codespace Visual Studio Code.
  5. Utilice el panel Control de código fuente para crear nuevas ramas, almacenar de forma provisional los cambios en el código y confirmarlos.

Solución de problemas

Si ve errores durante , pruebe los pasos siguientes:

  • Ejecute para quitar los recursos creados por el comando. Como alternativa, puede eliminar el grupo de recursos que creó en el portal de Azure.
  • Vaya a la página Codespaces de su cuenta de GitHub, busque el Codespace creado durante esta guía de inicio rápido, seleccione los puntos suspensivos a la derecha y elija Delete en el menú contextual.
  • En el portal de Azure, 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 y sin caracteres especiales.
  • Al reintentar los pasos de inicio rápido, elija otra ubicación.

Para obtener una lista más completa de posibles problemas y soluciones, consulte las preguntas más frecuentes.

Contenido relacionado

  • Last updated on