VS Code Tunnels sin instalar VS Code: accede a tu máquina remota desde el navegador

¡Hola developer 👋🏻!

La semana pasada te compartí en mi canal de YouTube cómo puedes usar Visual Studio Code conectándote de forma remota desde la web o incluso desde otro Visual Studio Code.

Esto es súper útil cuando estás trabajando con diferentes entornos y no quieres estar cambiando constantemente de ventana, o simplemente cuando necesitas acceder a esa máquina y no tienes la físicamente delante.

Te dejo por aquí el vídeo por si quieres verlo 👇🏻

Pero hoy quería enseñarte otra posibilidad bastante interesante: cómo crear un túnel usando la CLI de Visual Studio Code sin necesidad de tener Visual Studio Code instalado en la máquina destino 🤯

La idea es poder acceder desde el navegador, u otra máquina con VS Code instalado, a un entorno remoto donde estás haciendo algún desarrollo, pero esa máquina no tiene interfaz gráfica o no tiene expuesto directamente el puerto de la aplicación.

Esto me ha pasado recientemente con una máquina Ubuntu donde estaba haciendo pruebas con GitHub Copilot CLI —pero eso da para otro vídeo/artículo 😅— y necesitaba revisar de forma sencilla el contenido del proyecto. Además, quería acceder a uno de los puertos donde la aplicación estaba escuchando para ver el resultado en el navegador, pero ese puerto no estaba abierto públicamente en la máquina, y tampoco quería exponerlo de forma insegura.

Así que en este artículo te muestro cómo instalar solamente la CLI de Visual Studio Code y abrir un túnel para acceder a tu máquina de forma remota a través de Visual Studio Code.

Requisitos

Para seguir este ejemplo necesitas:

Una máquina Linux con curl y tar
Una cuenta de GitHub para autenticar el túnel

Instalación de la CLI de Visual Studio Code

Lo primero que vamos a hacer es descargar la CLI de Visual Studio Code en la máquina remota.

mkdir -p ~/.local/bin
TMP_DIR=$(mktemp -d)
# Descarga de la CLI de Visual Studio Code
# Algunas distribuciones pueden requerir el paquete "alpine"
curl -fsSL "https://code.visualstudio.com/sha/download?build=stable&os=cli-linux-x64" \
  -o "$TMP_DIR/vscode-cli.tar.gz" || \
curl -fsSL "https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64" \
  -o "$TMP_DIR/vscode-cli.tar.gz"
tar -xzf "$TMP_DIR/vscode-cli.tar.gz" -C "$TMP_DIR"
install -m 755 "$(find "$TMP_DIR" -maxdepth 3 -type f -name code | head -n 1)" \
  "$HOME/.local/bin/code"
~/.local/bin/code --version

Con esto ya deberías tener disponible el comando code en tu máquina destino 🎉

Crear y autenticar el túnel

Una vez instalada la CLI, podemos crear el túnel con el siguiente comando:

~/.local/bin/code tunnel \
  --accept-server-license-terms \
  --telemetry-level off \
  --name returngis-web

Al ejecutarlo, Visual Studio Code te mostrará un device code, para hacer la autenticación, y la URL a la que debes acceder para asociar el nuevo túnel a tu cuenta de GitHub.

Verificar el estado del túnel

Cuando el túnel esté creado, puedes comprobar su estado ejecutando:

~/.local/bin/code tunnel status

Si todo ha ido bien, ya podrás acceder a tu máquina remota desde el navegador, o un VS Code, usando una URL como esta: https://vscode.dev/tunnel/returngis-web

En este caso, returngis-web es el nombre que le hemos dado al túnel con el parámetro --name.

¿Y por qué mola esto?

Lo interesante de este enfoque no es solamente que puedas abrir un túnel para acceder al desarrollo que estás ejecutando en una máquina remota.

Lo potente es que, además, tienes un Visual Studio Code completo en el navegador conectado a esa máquina.

Desde ahí puedes revisar el código, abrir terminales, inspeccionar archivos y trabajar sobre ese entorno sin tener que exponer puertos públicamente ni instalar una interfaz gráfica en la máquina destino.

Para escenarios donde estás probando cosas en servidores Linux, máquinas temporales, entornos cloud o incluso laboratorios con herramientas como GitHub Copilot CLI, esto puede ahorrarte tiempo.

¡Nos vemos 👋🏻!