Tutorial: Creación de una aplicación de Docker con Visual Studio Code

Artículo
04/12/2023

Este tutorial es el principio de una serie de cuatro partes en la que se presenta el uso de Docker con Visual Studio Code (VS Code). Aprenderá a crear y ejecutar contenedores de Docker, conservar datos y administrar varios contenedores con Docker Compose.

VS Code ofrece una extensión de Docker que le permite trabajar con un servicio de Docker Desktop local. Docker Desktop se ejecuta en el equipo y administra los contenedores locales, que son entornos virtualizados compactos que proporcionan una plataforma para compilar y ejecutar aplicaciones. Los contenedores no requieren el tamaño y la sobrecarga de un sistema operativo completo.

En este primer tutorial, obtendrá información sobre cómo hacer lo siguiente:

Cree un contenedor de Docker.
Compila una imagen de contenedor.
Iniciar un contenedor de aplicaciones

Requisitos previos

Visual Studio Code instalado.
Extensión de VS Code de Docker instalada.
Docker Desktop configurado para usar contenedores de Linux.
Una cuenta de Docker Hub. Puede crear una de forma gratuita.

El tutorial funciona con Windows 10 y versiones posteriores y con Docker Desktop configurado para usar contenedores de Linux.

Crear un contenedor

Un contenedor es un proceso en el equipo. Está aislado de todos los demás procesos del equipo host. Este aislamiento usa espacios de nombres de kernel y grupos de control.

Un contenedor usa un sistema de archivos aislado. Este sistema de archivos personalizado se proporciona mediante una imagen de contenedor. La imagen contiene todo lo necesario para ejecutar una aplicación, como todas las dependencias, la configuración, los scripts y los archivos binarios. La imagen también contiene otra configuración para el contenedor, como las variables de entorno, un comando predeterminado para ejecutar y otros metadatos.

Después de instalar la extensión de Docker para VS Code, puede trabajar con contenedores en VS Code. Además de los menús contextuales del panel de Docker, puede seleccionar Terminal>Nuevo terminal para abrir una ventana de línea de comandos. También puede ejecutar comandos en una ventana de Bash. A menos que se especifique, cualquier comando etiquetado como Bash puede ejecutarse en una ventana de Bash o en el terminal de VS Code.

Establezca Docker en el modo de contenedor de Linux. Para cambiar a contenedores de Linux si actualmente está establecido en contenedores de Windows, haga clic con el botón derecho en el icono de Docker en la bandeja del sistema mientras se ejecuta Docker Desktop y elija Cambiar a contenedores de Linux.
En VS Code, seleccione Terminal>Nuevo terminal.
En la ventana de terminal o en una ventana de Bash, ejecute este comando.
```
docker run -d -p 80:80 docker/getting-started
```
Este comando contiene los parámetros siguientes:
- -d: el contenedor se ejecuta en modo desasociado en segundo plano.
- -p 80:80: el puerto 80 del host se asigna al puerto 80 del contenedor.
- docker/getting-started: especifica la imagen que se usará.
Sugerencia

Puede combinar las marcas de un solo carácter para acortar el comando completo. Como ejemplo, el comando anterior se podría escribir de esta forma:
```
docker run -dp 80:80 docker/getting-started
```
En VS Code, seleccione el icono de Docker situado a la izquierda para ver la extensión de Docker.

La extensión de VS Code de Docker muestra los contenedores que se ejecutan en el equipo. Puede acceder a los registros de contenedor y administrar el ciclo de vida del contenedor, como las acciones de detener y quitar.

El nombre del contenedor (en este ejemplo, modest_shockley) se crea aleatoriamente. El suyo tendrá un nombre diferente.
Haga clic con el botón derecho en docker/getting-started para abrir un menú contextual. Seleccione Abrir en el explorador.

También puede abrir un explorador y escribir http://localhost/tutorial/.

Verá una página sobre DockerLabs hospedada localmente.
Haga clic con el botón derecho en docker/getting-started para abrir un menú contextual. Seleccione Quitar para quitar este contenedor.

Si quiere quitar un contenedor mediante la línea de comandos, ejecute este comando para obtener su identificador de contenedor:
```
docker ps
```
Después, detenga y quite el contenedor:
```
docker stop <container-id>
docker rm <container-id>
```
Actualice el explorador. La página de introducción que vio hace un momento ha desaparecido.

Compilación de una imagen de contenedor para la aplicación

En este tutorial se usa una sencilla aplicación de tareas pendientes.

Screenshot shows the sample application with several items added and a text box and button to add new items.

La aplicación permite crear elementos de trabajo y marcarlos como completados o eliminarlos.

Para compilar la aplicación, cree un Dockerfile. Un Dockerfile es un script de instrucciones basado en texto que se usa para crear una imagen de contenedor.

Vaya al repositorio del tutorial de introducción de Docker y seleccione Código>Descargar archivo ZIP. Extraiga el contenido en una carpeta local.
En VS Code, seleccione Archivo>Abrir carpeta. Vaya a la carpeta app del proyecto extraído y ábrala. Debería ver un archivo denominado package.json y dos carpetas denominadas src y spec.
Cree un archivo denominado Dockerfile en la misma carpeta que el archivo package.json con el contenido siguiente.
```
FROM node:20-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
```
Nota

Asegúrese de que el archivo no tiene ninguna extensión de archivo, como .txt.
En el explorador de archivos, en VS Code a la izquierda, haga clic con el botón derecho en el Dockerfile y seleccione Compilar imagen. Escriba getting-started como etiqueta para la imagen en el cuadro de entrada de texto.

La etiqueta es un nombre descriptivo para la imagen.

Para crear una imagen de contenedor desde la línea de comandos, use el comando siguiente.
```
docker build -t getting-started .
```
Nota

En una ventana externa de Bash, vaya a la carpeta app que tiene el Dockerfile para ejecutar este comando.

Ha usado el Dockerfile para compilar una nueva imagen de contenedor. Es posible que haya observado que se han descargado muchas "capas". El Dockerfile se inicia a partir de la imagen node:20-alpine. A menos que la imagen ya esté en el equipo, es necesario descargarla.

Una vez que se ha descargado la imagen, el Dockerfile copia la aplicación y usa yarn para instalar las dependencias de la aplicación. El valor CMD del Dockerfile especifica el comando predeterminado que se ejecutará al iniciar un contenedor a partir de esta imagen.

El carácter . al final del comando docker build indica a Docker que debe buscar el Dockerfile en el directorio actual.

Inicio del contenedor de aplicaciones

Ahora que tiene una imagen, puede ejecutar la aplicación.

Para iniciar el contenedor, use el comando siguiente.
```
docker run -dp 3000:3000 getting-started
```
El parámetro -d indica que está ejecutando el contenedor en modo desasociado en segundo plano. El valor -p crea una asignación entre el puerto de host 3000 y el puerto de contenedor 3000. Sin la asignación de puertos, no podría acceder a la aplicación.
Después de unos segundos, vaya al área de Docker en VS Code y, en CONTENEDORES, haga clic con el botón derecho en getting-started y seleccione Abrir en el explorador. También puede abrir el explorador web en http://localhost:3000.

Debería ver la aplicación en ejecución.
Agregue un elemento para comprobar si funciona como esperaba. Puede marcar los elementos como completos y quitar elementos. El front-end almacena correctamente los elementos en el back-end.

Pasos siguientes

Ha completado este tutorial y tiene un administrador de lista de tareas pendientes en ejecución con algunos elementos. Ha aprendido a crear imágenes de contenedor y a ejecutar una aplicación en contenedor.

Conserve todo lo que ha hecho hasta ahora para continuar con esta serie de tutoriales. A continuación, pruebe la parte II de esta serie:

Actualización y uso compartido de una aplicación de Docker

Estos son algunos recursos que pueden resultarle útiles:

Compartir a través de