Cómo desarrollar una aplicación Docker en Windows con WSL, Visual Studio Code y Docker Desktop

Introducción

La llegada del Subsistema de Windows para Linux 2 (WSL 2 o WSL para abreviar) ha simplificado el desarrollo basado en Linux en Windows. WSL 2 permite la integración directa con Docker Desktop y tiene complementos para el desarrollo directo mediante Visual Studio Code.

En este tutorial, configurará un entorno de desarrollo en Windows con Visual Studio Code, WSL y Docker Desktop. Creará un servicio web Python Flask en Docker para demostrar la funcionalidad de desarrollo de estas herramientas.

Prerrequisitos

Para seguir esta guía, necesitarás:

• Computadora personal con Windows 10 y WSL 2 instalado : deberá asegurarse de que WSL esté instalado correctamente y de que tenga instalado Ubuntu 20.04 en WSL. Puede seguir el tutorial Cómo instalar el subsistema de Windows para Linux 2 en Microsoft Windows 10 para configurarlo.

• VSCode instalado : puedes descargar e instalar VSCode desde su sitio web oficial . No necesitas preocuparte por instalar complementos. En este tutorial se explicarán los complementos necesarios.

Paso 1: Instalación de Docker Desktop y conexión a WSL

Docker es una herramienta de desarrollo común que utilizan los desarrolladores para implementar aplicaciones. Docker Desktop tiene la ventaja de que también puede ejecutarse e integrarse con sus entornos WSL Linux.

Configure Docker descargando Docker Desktop del sitio web de Docker y haciendo clic en el botón Obtener Docker para iniciar la descarga.

Ejecute el ejecutable una vez que lo haya descargado y permítale realizar cambios.

Durante la instalación, asegúrese de que la opción Instalar los componentes de Windows necesarios para WSL 2 esté marcada. Usted decide si desea o no un ícono en el escritorio.

Una vez finalizado el proceso de instalación, se le solicitará que cierre la sesión y vuelva a iniciarla para que los cambios surtan efecto. Haga clic en el botón Cerrar y asegúrese de cerrar la sesión y volver a iniciarla para que los cambios surtan efecto.

Vuelva a iniciar sesión e inicie Docker Desktop desde el menú Inicio .

Advertencia: Cuando inicie Docker por primera vez, aparecerá un tutorial de Docker.

Si no está familiarizado con Docker, puede que valga la pena dedicar tiempo a realizar el tutorial de Docker, pero no es obligatorio para este tutorial actual. Una vez que haya realizado el tutorial o lo haya omitido, continúe.

Aparecerá el panel de control de Docker. Aquí es donde aparecerán los contenedores en ejecución, así como la configuración y el estado de Docker. Si ves que el logotipo está en verde en la esquina inferior izquierda, significa que Docker se está ejecutando. Si está en amarillo, Docker Desktop aún se está iniciando; espera un minuto aproximadamente para que finalice. Si el indicador está en rojo, Docker no puede iniciarse.

A continuación, deberá exponer Docker a WSL para poder ejecutarlo en su entorno Ubuntu. Haga clic en el icono de engranaje en la esquina superior derecha para abrir Configuración. Desde allí, haga clic en la pestaña Recursos y luego en Integración con WSL . Verá su entorno Ubuntu allí, pero desactivado, junto con cualquier otro entorno WSL que pueda tener instalado.

Habilite Docker en su entorno Ubuntu haciendo clic en el control deslizante para activarlo y luego haga clic en Aplicar y reiniciar . Una vez que se haya reiniciado, su entorno Ubuntu tendrá acceso a Docker.

Ahora puedes probar la conectividad de Docker con WSL. Abre una terminal en el sistema operativo en el que hayas habilitado Docker (Ubuntu en este caso) y ejecuta el comando Docker hello world:

docker run hello-world

Su entorno Ubuntu debería descargar y ejecutar el contenedor hello world y mostrar su salida.

Ahora que tiene Docker conectado a WSL, aprenderá a desarrollar dentro de WSL directamente usando Visual Studio Code y la extensión de desarrollo remoto.

Paso 2: Uso de la extensión remota de Visual Studio Code para desarrollar dentro de WSL

Podrás integrar tu entorno WSL Ubuntu con tu Visual Studio Code, en adelante VSCode, para poder desarrollar directamente en un entorno Linux.

En primer lugar, abre VSCode. Ve a la pestaña Extensiones en el lado izquierdo de la ventana. Busca Remote – WSL y aparecerá la extensión Remote – WSL . Haz clic en ella y luego en Instalar para instalarla.

Una vez que se complete la instalación, presione CTRL + Shift + Ppara abrir el cuadro de diálogo de comandos de VSCode. Escriba Remote-WSL y verá que aparecen algunas opciones. Puede abrir un nuevo entorno WSL, abrir una carpeta existente, etc. Seleccione Remote-WSL: New WSL Window . Esto abrirá una nueva ventana de VSCode conectada al entorno WSL de Ubuntu.

Ahora que estás en esta nueva ventana, puedes presionar CTRL + Shift + `o hacer clic en Terminal – Nueva terminal en la barra de navegación para abrir una nueva terminal y serás llevado a la terminal WSL. Cualquier archivo que crees también se almacenará en el sistema de archivos WSL.

Ahora que tiene configurado su entorno de desarrollo, creará un microservicio de Python utilizando el marco Flask que crea una redirección 301 a un sitio que usted especifica como una variable de entorno y lo empaqueta dentro de un contenedor Docker.

Paso 3: configuración del entorno de desarrollo

Primero, deberá configurar un entorno de desarrollo para poder desarrollar su código con Visual Studio Code. Navegue hasta la barra lateral del lado izquierdo y haga clic en el ícono superior que parece una hoja de papel. Se le solicitará que abra una carpeta o que clone un repositorio .

Desde aquí, seleccione Abrir una carpeta . La ubicación predeterminada será su directorio personal. Seleccione esta opción y haga clic en Aceptar .

Es posible que Visual Studio Code le pregunte si confía en los autores de esta carpeta. Se trata de una medida de seguridad para garantizar que ningún código ejecutado automáticamente pueda dañar su PC. En este caso, todo está bien, así que seleccione Sí, confío en los autores .

Ahora deberías ver tu directorio de inicio en el panel del explorador de archivos a la izquierda. A continuación, crea un directorio para almacenar tu proyecto. Navega hasta el icono de carpeta con un símbolo más. Cuando pases el cursor sobre el icono, debería aparecer una ventana emergente que diga Nueva carpeta . Haz clic en este icono para crear una nueva carpeta y nómbrala my-app . Debería aparecer un nuevo directorio vacío en el explorador a la derecha.

Ahora tienes tu entorno de desarrollador configurado y listo para construir tu microservicio Python en el siguiente paso.

Paso 4: creación de un entorno virtual de Python para su proyecto

Antes de comenzar a codificar, debe configurar su entorno de desarrollo de Python. En este paso, instalará y activará sus requisitos de Python dentro de un entorno virtual para una administración más sencilla.

Puedes hacer todo esto desde la terminal en Visual Studio Code. Presiona la CTRL + Shift + `combinación de teclas para abrir una nueva terminal o haz clic en Nueva terminal en la sección Terminal en la barra de navegación superior. Una vez que hayas hecho esto, deberías ver aparecer una nueva terminal en la parte inferior de la ventana de Visual Studio Code.

Desde esta terminal, navegue hasta el directorio que creó para su código my-app.

cd my-app

A continuación, instale el python3-venvpaquete Ubuntu para poder crear entornos virtuales de Python.

sudo apt update  sudo apt install python3-venv

Ahora crea tu entorno virtual usando Python:

python3 -m venv myapp

Esto creará un directorio llamado myappen su directorio actual. Dentro, instalará una versión local de Python y una versión local de pip, el administrador de paquetes para Python. Puede usar esto para instalar y configurar un entorno Python aislado para su proyecto.

Antes de instalar los requisitos de Python de su proyecto, active el entorno virtual:

source myapp/bin/activate

El mensaje debería cambiar para indicar que ahora estás trabajando en un entorno virtual de Python. Se verá así: .(myapp)user@host:~/my-app$

Con su entorno virtual activo, instale flasky gunicorncon la instancia local de pip:

pip install flask gunicorn

Nota: Una vez que haya activado su entorno virtual (cuando el mensaje (myapp)lo haya precedido), use pipen lugar de pip3, incluso si está usando Python 3. La copia de la herramienta del entorno virtual siempre se llama pip, independientemente de la versión de Python.

Ahora que tiene los paquetes instalados, deberá guardar este requisito y sus dependencias. Esta es una buena práctica para que pueda recrear su entorno de desarrollador según sea necesario y le ayudará a instalar los paquetes correctos en su Dockerfile en un paso posterior.

Úselo pippara guardar la información de su entorno en un requirements.txtarchivo:

pip freeze  requirements.txt

Ahora que tiene un entorno virtual funcional para el desarrollo, construyamos el microservicio.

Paso 5: creación de un microservicio de Python para redirigir el tráfico

Lo primero que deberá hacer es crear un archivo Python llamado app.pyy Dockerfilepara especificar sus requisitos de Docker. Puede crear archivos a través de la terminal con el touchcomando y luego actualizar el explorador:

touch app.py

También puede utilizar el explorador de archivos para crear un nuevo archivo haciendo clic en su carpeta mi-aplicación , luego haciendo clic en el ícono Nuevo archivo que parece una hoja de papel con un signo más y luego escribiendo el nombre completo y la extensión del archivo.

Utilice cualquiera de los métodos para crear app.pyy Dockerfile.

Una vez que hayas hecho esto, abre app.py. El microservicio que vas a escribir hoy tendrá solo un punto final, según lo definido por el @app.route("/")decorador. Este punto final usará el redirectmétodo dentro de la biblioteca Flask para realizar una redirección 301 a un sitio que se especifica en una variable de entorno. Si no se establece ninguna variable de entorno, la aplicación redireccionará al sitio web de DigitalOcean de forma predeterminada.

Ábrelo app.pyhaciendo clic en él y agrega las siguientes líneas de código.

Agregue una importdeclaración para importar el ospaquete, lo que permitirá que el microservicio lea la variable de entorno que definirá más adelante:

import os

A continuación, importe la clase Flask y la función de redirección desde la biblioteca Flask. Las usará para configurar su marco web y redirigir el tráfico a otro sitio.

from flask import Flask,redirect

A continuación, crea un objeto Flask que se pueda utilizar dentro del código. Esta es la instancia de tu aplicación web en la que registrarás las rutas.

app = Flask(__name__)

Crea un único método en la /ruta. Usarás tu instancia de Flask para decorar la función y especificar la ruta. Dentro de la función, usarás la redirectfunción de Flask para realizar una redirección 301 a otro sitio que se leerá desde una variable de entorno. Si no se encuentra la variable de entorno, tu aplicación redireccionará de manera predeterminada a la página de inicio de DigitalOcean. Esto es para garantizar que tu aplicación no se bloquee si olvidas configurar una variable de entorno.

@app.route('/')def hello():    # Attempt to read REDIRECT_TO from the environment. If nothing is set    # perform a 301 redirect to DigitalOcean's website    return redirect(os.environ.get("REDIRECT_TO", "https://www.digitalocean.com"), code=301)

Por último, crea una mainfunción que ejecute tu aplicación Flask de forma externa en el puerto 8080. La dirección 0.0.0.0se utiliza para indicar que quieres que tu aplicación se ejecute en la interfaz de red externa de tu dispositivo, no en el dispositivo de bucle local, también conocido como localhost.

if __name__ == '__main__':    app.run(host='0.0.0.0', port=8080)

El resultado final app.pyse puede encontrar a continuación:

# Import the os package to read the environment variableimport os# Import the Flask class and redirect function from the flask libraryfrom flask import Flask,redirect# Create a Flask object to be acted uponapp = Flask(__name__)# Python decorator that specifies the web route that will execute the code below@app.route('/')def hello():    # Attempt to read REDIRECT_TO from the environment. If nothing is set    # perform a 301 redirect to DigitalOcean's website    return redirect(os.environ.get("REDIRECT_TO", "https://www.digitalocean.com"), code=301)# Main function that executes the Flask appif __name__ == '__main__':    app.run(host='0.0.0.0', port=8080)

Una vez que haya terminado, guarde el archivo como app.py .

Ahora que tu aplicación está escrita, probémosla.

Paso 6: prueba del microservicio

Ahora que tu aplicación está escrita, es momento de probarla. En la terminal que abriste en Visual Studio Code con el entorno virtual activado, ejecuta el comando:

python app.py

Debería ver una salida de Flask similar a esta:

Output * Serving Flask app 'app' (lazy loading) * Environment: production   WARNING: This is a development server. Do not use it in a production deployment.   Use a production WSGI server instead * Debug mode: off * Running on all addresses. * WARNING: This is a development server. Do not use it in a production deployment. * Running on https://256.333.112.1:8080/ (Press CTRL+C to quit)

Esto significa que tu aplicación Flask se está ejecutando. Abre un navegador y navega hasta localhost:8080. Cuando lo hagas, deberías ver que se produce un resultado en tu terminal y que te redirigen al sitio web de DigitalOcean. Esto se debe a que no has especificado ningún lugar al que se redirija tu aplicación Flask, por lo que está utilizando el valor predeterminado.

Para detener la aplicación Flask, haz clic en la ventana de Visual Studio Code para asegurarte de que esté activa y luego presiona CTRL+C. Verás el mensaje Stop y se te presentará nuevamente tu terminal.

A continuación, ejecute el siguiente comando para configurar su redirección a otra cosa.

REDIRECT_TO="https://digitalocean.com/community/tutorials"

Ejecute nuevamente su aplicación Flask usando el comando

python app.py

Vuelve a tu navegador y navega hasta localhost:8080. Deberías ser dirigido a la página de tutoriales de DigitalOcean.

Nota: si planea probar múltiples redirecciones con el mismo contenedor, puede utilizar algún tipo de modo de incógnito. La mayoría de los navegadores modernos almacenan en caché una redirección 301, por lo que si cambia la variable de entorno, puede terminar en el mismo sitio y no ver reflejados los cambios. El uso de una ventana de incógnito o borrar la memoria caché le ayudará con esto.

Con esto, tu aplicación estará lista y preparada para ser incorporada a una imagen de Docker.

Paso 7: creación y ejecución de su microservicio en Docker

En este último paso, empaquetarás tu aplicación Python como un microservicio usando Docker y un Dockerfile . Un Dockerfile es una lista de comandos de compilación que Docker usa para crear tu imagen. Estos pueden ser comandos para instalar paquetes, copiar archivos y más.

Abre el Dockerfilearchivo que creaste en un paso anterior para poder editarlo. En este archivo, vas a especificar la imagen base, indicarle a Docker dónde quieres que se ejecute el código, crear una variable de entorno que contenga el objetivo de redirección, copiar todos los archivos necesarios en la imagen de Docker, instalar los paquetes de Python necesarios y, por último, agregar el comando que se ejecutará cuando se ejecute el contenedor.

Añade el siguiente código para Dockerfilehacer esto.

Primero, debes especificar la imagen base que deseas utilizar. La imagen base de Python contendrá la última versión de Python.

FROM python 

A continuación, configure su directorio de trabajo. Este es el directorio predeterminado en el que Docker ejecutará comandos y en el que lo dejará si se conecta con ssh.

WORKDIR /var/www/

Establezca la REDIRECT_TOvariable de entorno en la ubicación predeterminada a la que desea redirigir. En este caso, la establezco en el sitio Tutorial de la comunidad de DigitalOcean. Esto se puede cambiar cuando ejecuta la imagen a través de la línea de comandos.

ENV REDIRECT_TO=https://digitalocean.com/community/tutorials

Copie su app.pyy requirements.txten su contenedor Docker, utilizando rutas completamente calificadas para el destino.

COPY ./app.py /var/www/app.pyCOPY ./requirements.txt /var/www/requirements.txt

Ejecute el comando necesario para instalar los requisitos de la biblioteca Python dentro de su imagen de Docker.

RUN pip install -r /var/www/requirements.txt

Por último, configure el comando de ejecución de imagen para ejecutar su aplicación. Este es el comando que se ejecuta cada vez que alguien intenta ejecutar su contenedor Docker.

CMD python3 app.py

El Dockerfilelistado completo se encuentra a continuación.

# Choose your base imageFROM python # Set your working directoryWORKDIR /var/www/# Set environment variable for redirect. Can be overwritten by Docker run commandENV REDIRECT_TO=https://digitalocean.com/community/tutorials# Copy the necessary filesCOPY ./app.py /var/www/app.pyCOPY ./requirements.txt /var/www/requirements.txt# Install the necessary packagesRUN pip install -r /var/www/requirements.txt# Run the appCMD python3 app.py

Cuando haya terminado, guarde el archivo.

Ahora puedes crear la imagen de Docker localmente para realizar pruebas. Ejecuta el siguiente comando para crear tu imagen y etiquétala con el nombre myapp . La -topción aplica la etiqueta a la imagen de Docker:

docker build -t myapp .

Por último, es hora de probar la imagen de Docker. En el Dockerfile anterior, configuraste una variable de entorno REDIRECT_TOpara que apunte a un sitio web. Esto sobrescribirá el valor predeterminado en tu código, de modo que cuando ejecutes este contenedor, el sitio que hayas especificado en el Dockerfile será tu nueva ubicación.

Nota: Si Windows le solicita que otorgue permiso a Docker para acceder a la red, haga clic en Permitir .

Para probar su imagen, ejecute el siguiente comando:

docker run -p 8080:8080 myapp

Mientras su imagen se está ejecutando, navegue a un navegador y escriba localhost:8080en la barra de navegación y debería ser redirigido al sitio que figura en el Dockerfile.

Advertencia: A veces, la terminal WSL no reconoce CTRL + Cesta forma de detener la imagen de Docker. En este caso, deberá abrir otra terminal y buscar la imagen de Docker en ejecución con el comando:

docker container ls

Esto mostrará un resultado similar a este:

OutputCONTAINER ID   IMAGE     COMMAND                  CREATED              STATUS              PORTS                                       NAMES3f081712283e   myapp     "/bin/sh -c 'python3…"   About a minute ago   Up About a minute   0.0.0.0:8080-8080/tcp, :::8080-8080/tcp   reverent_saha

Tome el identificador del contenedor, que en este ejemplo es 3f081712283ey use el docker killcomando para detenerlo.

docker kill 3f081712283e

Por último, probemos cambiando la variable de entorno de la redirección en el docker runcomando.

Escriba el siguiente comando para cambiar la variable de entorno a la página de la consola en la nube de DigitalOcean, https://cloud.digitalocean.com .

docker run -p 8080:8080 -e REDIRECT_TO=https://cloud.digitalocean.com myapp

Ahora, si va a un navegador y busca, localhost:8080será redirigido al sitio especificado en la línea de comando.

Conclusión

Ha configurado correctamente un entorno de desarrollo en Windows con WSL, Visual Studio Code y Docker Desktop. Ha demostrado cómo crear, probar y empaquetar código en Windows, lo que le permite tener más opciones en lo que respecta a los entornos de desarrollo.