DevContainers: Cómo Estandarizar Entornos de Desarrollo con Docker

Imagen de Gemini — Google

Artículo en inglés

¿Qué es un DevContainer?

Un DevContainer es un contenedor de Docker que preinstalada las herramientas y los servicios necesarios para desarrollar un proyecto, permitiéndole al usuario desarrollarlo desde dentro del contenedor.

Los DevContainers son empleados cómo una modalidad de trabajo en equipos de desarrollo que operan sobre multiples proyectos, cada uno necesitando de diferentes herramientas, servicios y versiones. Gracias a estos, los equipos logran eliminar el Overhead y los malentendidos que surgen al iniciarse en un nuevo proyecto, manteniéndose bajo las mismas condiciones de desarrollo próximas al sistema donde se desplegara el mismo.

Casos de uso

• Estandarización de entornos
• Paridad entre el entorno de desarrollo y el de despliegue
• Rápidos cambios de contexto entre un proyecto y otro

¿Cómo creo un DevContainer?

Para crear un DevContainer se debe preinstalar un IDE compatible (cómo Visual Studio, Visual Studio Code, IntelliJ IDEA, etc.), Docker Desktop y la extensión del IDE para trabajar con DevContainers, solo si este lo necesita. Para este ejemplo se utilizara el IDE de Visual Studio Code con la extensión Dev Containers.

Crea el archivo .devcontainer/devcontainer.json, dentro de la carpeta en la cual quieres desarrollar tu proyecto, y pega el siguiente contenido:

{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm"
}

Si presionas F1 y buscas Dev Containers: New Dev Container... en Visual Studio Code, puedes crear un DevContainer utilizando la interfaz gráfica.

El archivo devcontainer.json se utiliza para configurar el entorno, las herramientas y la ejecución del DevContainer. En el ejemplo, la configuración establece un contenedor de desarrollo con Node.js (v22) y TypeScript (v5).

Bien, ahora para inicializar el DevContainer, inicializa Docker Desktop, presiona F1 y selecciona Dev Containers: Reopen in Container en Visual Studio Code. Esto provocara que el contenedor de desarrollo se construya y utilize cómo volumen bindeado la carpeta del proyecto, por lo que toda acción que conlleve la creación, modificación o eliminación de un archivo o carpeta se vera reflejada en la carpeta original del proyecto.

¡Listo! Ya te encuentras en un entorno aislado con las herramientas que necesitas para desarrollar un proyecto con Node.js (v22) y TypeScript (v5) sin haber tenido que instalarlas en tu maquina local.

Puedes utilizar las “Features” para agregar nuevas herramientas al DevContainer, cómo se muestra en la guía para crear un DevContainer avanzado.

Guía para crear un DevContainer avanzado

Es hora de saber cómo crear una versión más avanzada del DevContainer, pero ¿Por qué? Aunque para la gran mayoría de los casos no es necesario una configuración tan granular, si se quieren orquestar servicios, instalar diferentes herramientas o ejecutar scripts al construirse el contenedor, tendremos que optar por una configuración avanzada de este.

Retomando el ejemplo anterior, los requisitos del proyecto han cambiado y ahora se quiere utilizar Bun cómo administrador de paquetes, un archivo compose.yaml para administrar futuros servicios, y se desea ejecutar un Script en Bash que muestre un mensaje de bienvenida al construirse el contenedor.

1°) Para agregar Bun al DevContainer, tendremos que utilizar la propiedad features del archivo devcontainer.json, cómo se muestra a continuación:

{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
  "features": {
    "ghcr.io/devcontainers-extra/features/bun:1": {
      "version": "1.3.3"
    }
  }
}

Las Features son funcionalidades adicionales que se agregan a los contenedores de desarrollo, estas pueden ser desde administradores de paquetes hasta Linters, he incluso pueden ser funcionalidades oficiales o creadas por la comunidad.

Get Lucas Hoz’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Al reconstruir el contenedor (presionando F1 y seleccionando Dev Containers: Rebuild and Reopen in Container), la Feature de Bun (versión 1.3.3) se instalara y estará disponible en el DevContainer.

2°) Para utilizar un archivo compose.yaml, ya sea para tener un control granular del contenedor de desarrollo o para instanciar servicios que el proyecto necesita, tendremos que modificar el archivo devcontainer.json para que utilize la configuración del Compose.

Para este ejemplo, utilizaremos el siguiente compose.yaml y Dockerfile (es importante que ambos archivos se encuentren dentro de la carpeta .devcontainer):

---
# compose.yml
name: my-first-devcontainer_devcontainer

services:
  devcontainer:
    build:
      context: ./
      dockerfile: Dockerfile
    volumes:
      - ../:/workspaces/My-First-DevContainer:cached

# Dockerfile
FROM mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm

CMD [ "sleep", "infinity" ]

Se asume que el proyecto se encuentra dentro de una carpeta llamada My-First-DevContainer.

y como habíamos mencionado, tendremos que modificar el archivo devcontainer.json para que utilize el compose.yaml, por lo que su contenido sera el siguiente:

{
  "service": "devcontainer", // Nombre del servicio (definido dentro del `compose.yaml`) que se utilizara como el contenedor de desarrollo.
  "dockerComposeFile": "compose.yaml",
  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
  "features": {
    "ghcr.io/devcontainers-extra/features/bun:1": {
      "version": "1.3.3"
    }
  },
  "remoteUser": "root" // Evita conflictos de permisos.
}

Si presionas F1 y seleccionas Dev Containers: Rebuild and Reopen in Container habrás construido un DevContainer desde un compose.yaml, por lo que podrías llegar a definir los servicios (bases de datos, replicas, etc.) necesarios para el proyecto dentro de este.

3°) Si queremos ejecutar Scripts al ocurrir ciertos eventos en el DevContainer tendremos que utilizar las propiedades que nos brinda el archivo devcontainer.json (como initializeCommand, onCreateCommand, postCreateCommand, etc.).

Para el requisito deseado (mostrar un mensaje de bienvenida al construirse el contenedor), utilizaremos la propiedad postCreateCommand, de tal forma que el archivo devcontainer.json quedara de la siguiente forma:

{
  "service": "devcontainer", // Nombre del servicio (definido dentro del `compose.yaml`) que se utilizara como el contenedor de desarrollo.
  "dockerComposeFile": "compose.yaml",
  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
  "features": {
    "ghcr.io/devcontainers-extra/features/bun:1": {
      "version": "1.3.3"
    }
  },
  "remoteUser": "root", // Evita conflictos de permisos.
  "postCreateCommand": "echo 'Welcome to the DevContainer'"
}

Al utilizar esta propiedad cada vez que se construya el DevContainer se ejecutara el Script que tiene como valor, siendo en este caso un mensaje de bienvenida.

¡Eso es todo! Habiendo seguido estos pasos logramos configurar un DevContainer que cumple con los nuevos requisitos del proyecto.

Si buscas un ejemplo que se encuentre en producción, visita el repositorio del proyecto UNLaM Calendar.

Tips y recomendaciones

• En el devcontainer.json puedes definir qué extensiones del IDE deben instalarse en el contenedor de desarrollo.
• Para compartir las credenciales de Git (claves SSH, claves GPG, etc.) entre tu maquina local y el DevContainer, tendrás que seguir la guía oficial de Visual Studio Code para compartir credenciales.
• Si utilizas la propiedad settings del archivo devcontainer.json puedes modificar la configuración de los IDEs en el DevContainer.
• Utiliza Features oficiales, pero si no es posible, fija las versiones.

Enlaces recomendados

• Colección de Features para DevContainers
• Colección de Microsoft con imágenes para DevContainers
• Guía oficial de Visual Studio Code para trabajar con DevContainers