Dev Containers en VSCode - Nivel Intermedio

Ya hablamos una vez sobre Dev Containers y vimos como dar los primeros pasos conectándonos a un contenedor en ejecución, este fue un primer acercamiento para los que ya estamos habituados a usar contenedores para el desarrollo. Sin embargo en ésta nueva entrega vamos a subir de nivel usando una configuración un poco más elaborada y con mayor automatización que nos sirve para tener un ambiente de desarrollo instantáneo, el cual podemos compartir entre diferentes dispositivos o con miembros de un equipo de desarrollo.

El directorio .devcontainer

Para iniciar con nuestra configuración debemos crear el directorio .devcontainer en la raíz de nuestro proyecto en Visual Studio Code, este es el directorio donde vamos a crear nuestra configuración para usar Dev Containers, y como lo mencioné al inicio la idea de esta configuración es poderla compartir, por lo tanto incluye la como parte de tu repositorio de versionamiento (git, mercurial, etc).

El archivo principal que debemos crear dentro de este directorio es el archivo devcontainer.json a continuación voy a compartir un ejemplo sin embargo existen muchas propiedades adicionales que puedes revisar en la documentación de referencia.

devcontainer.json: Éste ejemplo usa un Dockerfile como herramienta para pre-configurar nuestro Dev Container, además incluye algunas configuraciones útiles como lista de extensiones que se instalarán automaticamente una vez se inicialice el contenedor, variables de entorno y comandos que se ejecutan al iniciar, entre otros.

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
	"name": "my-repo-name",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	//"image": "mcr.microsoft.com/devcontainers/python:3",
	"build": {
		"dockerfile": "Dockerfile"
	},
	"containerEnv": {
		"VIRTUAL_ENV": "/workspaces/my-repo-name/src/.venv",
		"UV_PROJECT": "src"
	},
	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},
	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	"forwardPorts": [8000],
	// Use 'postCreateCommand' to run commands after the container is created.
	"postCreateCommand": {},
	"postAttachCommand": {
		"install packages": "uv sync --dev --locked"
	},
	// Configure tool-spec1ific properties.
	"customizations": {
		"vscode": {
			// List of extensions to install in the container.
			"extensions": [
				"ms-python.python",
				"ms-python.vscode-pylance",
				"ms-python.black-formatter",
				"ms-python.isort",
				"meta.pyrefly"
			]
		}
	}
	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

Cómo has podido revisar este ejemplo es para un ambiente basado en Python, por lo tanto nuestro archivo Dockerfile debe instalar Python y las demás herramientas que sean necesarias para el proceso de desarrollo, eso incluye herramientas como git, curl, wget, vim, entre otros.

FROM debian:stable-slim
ENV TZ=America/Bogota

# Install uv and uvx
COPY --from=ghcr.io/astral-sh/uv:0.8.14 /uv /uvx /bin/

# Install dependencies
RUN apt-get update && apt-get install -y \
    curl \
    git \
    wget \
    vim \
    fish \
    make \
    unzip \
    sshpass \
    ca-certificates \
    python3 \
    python3-pip

# Install Node.js 22.x
# RUN curl -fsSL https://deb.nodesource.com/setup_22.x | sh - \
#     && apt-get install -y nodejs chromium

# Clean up
RUN apt-get autoremove -y \
    && rm -rf /var/lib/apt/lists/* 
# Add non-root user
RUN groupadd -g 1000 audeldiaz \
    && useradd -u 1000 -g 1000 -ms /usr/bin/fish audeldiaz \
    && chown -R audeldiaz:audeldiaz /home/audeldiaz

USER audeldiaz

CMD [ "/usr/bin/fish" ]

En este archivo encontramos algunas particularidades que son un ejemplo genial para representar que un Dev Container puede ser tan personalizado como el desarrollador lo quiera, en mi caso me gusta usar fish como shell en Linux, y también me gusta la buena practica de no editar archivos con el usuario root.

El flujo de trabajo con Dev Containers

Una vez completada nuestra configuración lo único que necesitamos es abrir nuestro proyecto usando Visual Studio Code, es importante recordar que debemos tener instalada la extensión Dev Containers.

En la parte inferior izquierda vamos a encontrar el botón para abrir una ventana remota.

Se desplegará la paleta comandos con uno en especial que dice "Reopen in Container", si hacemos clic sobre este iniciará la magia, se abrirá una nueva ventana de VSCode conectado al contenedor, se ejecutarán todos los pasos de construcción del contenedor y las configuraciones adicionales del archivo devcontainer.json. En este punto si todo ha salido como se espera es hora de empezar a programar.

Agregar nuevos cambios al Dev Container

Lo más seguro es que vas a querer hacer cambios a tu Dev Container hasta encontrar lo que mejor se ajusta a tu modo de trabajo, o puede que surja una nueva dependencia o herramienta que quieras instalar, para ello VSCode ha implementado herramientas que permiten detectar cambios y reconstruir el contenedor, pero también se pueden lanzar de forma manual usando la paleta de comandos.

En la paleta de comandos buscando por > Dev Containers: Rebuild Container existe también una opción para reconstruir sin cache para una construcción más limpia.

Bueno y eso es todo, ahora tu misión si llegaste hasta aquí es subir de nivel usando Dev Containers.