Ejercicio: Adición de un contenedor de desarrollo a un proyecto existente

  • 4 minutos

Al configurar el contenedor de desarrollo para un proyecto, primero tendrá que agregar una configuración de contenedor a ese proyecto. Una configuración de contenedor configura el entorno en Visual Studio Code.

En este ejercicio, agregará un contenedor de desarrollo y abrirá el proyecto Panel de productos en el contenedor.

Adición de un contenedor de desarrollo

  1. Vuelva a VS Code y al proyecto que ha clonado antes.

  2. Presione F1 para abrir la paleta de comandos.

  3. Escriba add dev container y seleccione Dev Containers: Agregar archivos de configuración del contenedor de desarrollo. Esto presenta una lista de plantillas de contenedor de desarrollo. Las plantillas contienen los archivos de origen necesarios para configurar un entorno de desarrollo completo para la pila tecnológica especificada.

  4. Seleccione Agregar configuración a la carpeta de datos de usuario.

  5. Seleccione las opciones siguientes:

    Opción Valor
    Selección de una plantilla de configuración de contenedor Python 3
    Versión de Python 3,11
    Selección de características adicionales para instalar Seleccione Aceptar.

Importante

En el primer paso al seleccionar una plantilla de configuración, es posible que tenga que seleccionar "Mostrar todas las definiciones…" en la lista y, a continuación, seleccione Python una vez que se cargue el conjunto completo de plantillas.

Se agregará una configuración de Dev Container al proyecto. Visual Studio Code le notificará que ahora puede abrir el proyecto en un contenedor. Por ahora, descarte esta notificación.

Inspección de los archivos de configuración

  1. Observe que se ha agregado una nueva carpeta al proyecto denominada '.devcontainer'.
  2. Expanda esa carpeta y observe que contiene un archivo devcontainer.json.

Apertura del proyecto en un contenedor

  1. Presione F1 para abrir la paleta de comandos.
  2. Escriba reopen in container.
  3. Seleccione Dev Containers: Volver a abrir en el contenedor en la lista de opciones disponibles.

El contenedor comenzará a compilar. Es posible que la compilación inicial tarde unos minutos, ya que se debe extraer una nueva imagen y crearla en el equipo. Una vez que el contenedor se ha compilado por primera vez, las compilaciones posteriores serán mucho más rápidas.

Visualización del indicador remoto

Cuando se complete la compilación del contenedor, puede confirmar que está conectado al contenedor si examina el indicador remoto. Ahora también debería ver los archivos del proyecto cargados en VS Code.

  • Examine el indicador remoto en la esquina inferior izquierda de VS Code. Observe que ahora indica "Contenedor de desarrollo: Python 3".

    Captura de pantalla del indicador remoto con el texto

Importante

Es posible que vea notificaciones sobre Pylance o la mejora del rendimiento en Windows. Puede descartar de forma segura las notificaciones que vea en VS Code. No tendrá que hacer esas cosas.

Inspección del contenedor

  1. Presione Ctrl + ` para abrir el terminal integrado de Visual Studio Code si aún no está abierto.

  2. Tenga en cuenta que el símbolo del sistema del terminal podría tener un aspecto diferente al del normal.

    Símbolo del sistema del terminal integrado de VS Code

  3. Ejecute el comando siguiente para asegurarse de que Python está instalado:

    python --version

    La salida del terminal debe ser la versión de Python que se usa en el contenedor.

Instalación de dependencias del proyecto

  • Ejecute el comando siguiente en el terminal para instalar las dependencias de Flask necesarias para ejecutar el proyecto:

    pip3 install --user -r requirements.txt

Ejecución del proyecto

  1. Escriba el siguiente comando en el terminal para iniciar el proyecto:

    python app.py

  2. Para abrir el proyecto en un explorador, vaya a http://127.0.0.1:5000.

    Captura de pantalla de la aplicación de panel de productos de Python.

¡Excelente trabajo! Tiene una aplicación web de Python con Flask ejecutándose en la máquina y es posible que ni siquiera sepa lo que es nada de eso. No pasa nada. No tiene que saberlo. El contenedor se encarga de configurar todo el entorno.

En la sección siguiente, aprenderá a usar el archivo devcontainer.json para automatizar la instalación de dependencias, así como a personalizar VS Code para este proyecto de Python.