¡Hola developer 👋🏻! No quería que llegara el fin de semana sin compartir contigo mi entorno de desarollo contenerizado que estoy utilizando para mis aplicaciones en Next.js, de tal forma que pueda trabajar cómodamente con este tipo de aplicaciones sin tener que instalar absolutamente nada en mi máquina local. Si no sabes de qué trata esto de los Dev containers te recomiendo que eches un vistazo a este vídeo de mi canal de YouTube:

Configuración del archivo .devcontainer/devcontainer.json

Como ya sabes, este ese el archivo que la extensión de Dev Containers reconoce para saber que tienes una configuración para esta herramienta. Para este tipo de proyectos estoy usando el siguiente:

{
	"name": "Tour Of Heroes using Next.js",
	"dockerComposeFile": "compose.yml",
	"service": "app",
	"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
	"features": {
		"ghcr.io/devcontainers/features/github-cli:1": {}
	},
	"customizations": {
		"vscode": {
			"extensions": [
				"ckolkman.vscode-postgres",
				"burkeholland.simple-react-snippets",
				"GitHub.copilot",
				"GitHub.copilot-chat",
				"Phu1237.vs-browser"
			]
		}
	}	
}

En este caso, como ves, súper sencillo: Solo tengo una feature para instalar GitHub CLI y algunas extensiones: una que me va a permitir visualizar dentro de mi Dev Container el contenido de la base de datos, una con snippets de React, las dos que se corresponden con GitHub Copilot, el cuál a día de hoy puedes usar de forma gratuita 😃, y una extensión que me permite tener un navegador web integrado dentro de Visual Studio Code, para que no tenga que estar cambiando de aplicación si no tengo opción de doble pantalla en algún momento.

Archivo compose.yml

Lo guay de Dev Containers es que además de tener tu entorno de desarrollo contenerizado puedes tener otros contenedores, secundarios diría, que son necesarios para que tu aplicación sea totalmente funcional, como por ejemplo una base de datos. En mi caso necesito una base de datos Postgres para que mi desarrollo en Next.js funcione correctamente, pero podría ser de cualquier otro tipo. En lugar de tener una instalada como parte de mi máquina local, puedo crearla como parte de mi configuración de Dev Container y la forma más elegante de hacerlo es utilizando una configuración de Docker Compose:

version: '3.8'
services:
  app:
    build: 
      context: .
      dockerfile: Dockerfile
    volumes:
      - ../..:/workspaces:cached
      
    # Overrides default command so things don't shut down after the process ends.
    command: sleep infinity
    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
    network_mode: service:db
    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally. 
    # (Adding the "ports" property to this file will not forward from a Codespace.)
  db:
    image: postgres:latest
    restart: unless-stopped
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgres
      POSTGRES_USER: postgres
      POSTGRES_DB: heroesdb
    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
    # (Adding the "ports" property to this file will not forward from a Codespace.)
volumes:
  postgres-data:

En ella, como puedes ver, tengo la configuración del contenedor principal, que en mi caso es el llamado app, y un segundo contenedor que usa la imagen de postgres, llamado db.

Si quieres saber más sobre Docker Compose tienes este otro vídeo en mi canal de YouTube sobre el tema 😇:

Con ello ya tendríamos toda la configuración necesaria para este entorno 🎉

Lo único que debes tener en cuenta es que cuando configures la URL para configurar la base de datos en el proyecto con Next.js debes usar, en mi ejemplo, db en lugar de localhost como host de la base de datos:

POSTGRES_URL=postgres://postgres:postgres@db:5432/heroesdb

¡Nos vemos 👋🏻!