Entorno de Desarrollo con IA: OpenCode + VS Code en Docker

¿Qué es este stack y por qué deberías usarlo?

Imagina tener VS Code completo en tu navegador, con una IA integrada (OpenCode) y preview en vivo de tu aplicación, todo corriendo en tu propio servidor. Esto es exactamente lo que vas a montar.

A diferencia de GitHub Codespaces o VS Code Dev Containers que requieren configuración compleja, este stack es una sola imagen Docker que despliegas una vez y olvidas. Ideal para:

• Desarrollar desde cualquier dispositivo (incluso un tablet)
• Tener tu entorno de desarrollo disponible 24/7 en tu VPS
• Usar la IA de OpenCode para generar código sin salir del editor

Arquitectura: Cómo funciona

El stack ejecuta tres servicios dentro del mismo contenedor Docker, gestionados por supervisord:

Persistencia total: Solo necesitas un volumen Docker montado en /home/opencode. Tus proyectos, extensiones de VS Code, configuración y el historial de chats de OpenCode sobreviven a reinicios.

Paso 1: Crear el Dockerfile

El Dockerfile define nuestra imagen base. Usamos Ubuntu 22.04, instalamos Node.js 22, y luego descargamos OpenCode y code-server usando sus scripts oficiales.

Creamos un usuario no-root (opencode) para mayor seguridad y configuramos supervisord para gestionar ambos procesos.

FROM ubuntu:22.04

ENV DEBIAN_FRONTEND=noninteractive
ENV HOME=/home/opencode

RUN apt-get update && apt-get install -y \
    curl \
    git \
    sudo \
    supervisor \
    python3 \
    && rm -rf /var/lib/apt/lists/*

# Crear usuario opencode
RUN useradd -m -s /bin/bash opencode \
    && echo "opencode ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers

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

# Instalar OpenCode
RUN curl -fsSL https://opencode.ai/install.sh | sh

# Instalar code-server
RUN curl -fsSL https://code-server.dev/install.sh | sh

# Configurar directorios
RUN mkdir -p /home/opencode/projects \
    && chown -R opencode:opencode /home/opencode

WORKDIR /home/opencode
USER opencode

COPY --chown=opencode:opencode supervisord.conf /etc/supervisor/conf.d/supervisord.conf
COPY --chown=opencode:opencode entrypoint.sh /home/opencode/entrypoint.sh

RUN chmod +x /home/opencode/entrypoint.sh

ENTRYPOINT ["/home/opencode/entrypoint.sh"]

Paso 2: Configurar supervisord

supervisord es el proceso "padre" que mantiene tanto a OpenCode como a code-server corriendo. La clave aquí es definir environment=HOME="/home/opencode" para que ambos procesos guarden sus datos en el volumen persistente.

[supervisord]
nodaemon=true
user=opencode

[program:opencode]
command=/usr/local/bin/opencode server
environment=HOME="/home/opencode"
autostart=true
autorestart=true
stderr_logfile=/var/log/opencode.err.log
stdout_logfile=/var/log/opencode.out.log

[program:code-server]
command=/usr/bin/code-server --bind-addr 0.0.0.0:8080 --auth password
environment=HOME="/home/opencode"
autostart=true
autorestart=true
stderr_logfile=/var/log/code-server.err.log
stdout_logfile=/var/log/code-server.out.log

Paso 3: Script de entrada (Entrypoint)

El entrypoint.sh se ejecuta al iniciar el contenedor. Su función principal es asegurar que la variable HOME esté correctamente configurada y lanzar supervisord.

#!/bin/bash
set -e

export HOME=/home/opencode

# Configurar password de VS Code si se proporciona
if [ -n "$VSCODE_PASSWORD" ]; then
  echo "export PASSWORD=$VSCODE_PASSWORD" >> /home/opencode/.bashrc
fi

# Iniciar supervisord
exec /usr/bin/supervisord -c /etc/supervisor/conf.d/supervisord.conf

Paso 4: Desplegar en Dokploy

Con Dokploy, desplegar este stack es trivial. Solo necesitas conectar tu repositorio de GitHub y definir unas variables de entorno.

OPENCODE_SERVER_USERNAME=tu-usuario
OPENCODE_SERVER_PASSWORD=tu-password-seguro
VSCODE_PASSWORD=tu-password-seguro

Paso 5: Configurar Next.js para Hot Reload

Para que el preview funcione correctamente y veas los cambios en tiempo real, debes configurar allowedDevOrigins en tu proyecto de Next.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  allowedDevOrigins: ['preview.tudominio.com'],
}

module.exports = nextConfig

Una vez configurado, ejecuta npm run dev en la terminal de VS Code y abre preview.tudominio.com. ¡Verás tu app en vivo!

Troubleshooting: Errores comunes

Créditos y recursos

• Repositorio: github.com/mauricioandre10-ctrl/Opencode
• OpenCode: opencode.ai
• code-server: github.com/coder/code-server
• Dokploy: dokploy.com