WebVM

Este repositorio alberga el código fuente de https://webvm.io, una máquina virtual Linux que se ejecuta en tu navegador.

Prueba el nuevo entorno gráfico Alpine / Xorg / i3: https://webvm.io/alpine.html

¿Qué es WebVM?

WebVM es un entorno virtual sin servidor que se ejecuta completamente del lado del cliente en HTML5/WebAssembly. Está diseñado para ser compatible con ABI de Linux y ejecuta una distribución Debian sin modificar, incluyendo muchas cadenas de herramientas de desarrollo nativas.

WebVM funciona gracias al motor de virtualización CheerpX, que proporciona:

• Compilador JIT de x86 a WebAssembly
• Sistema de archivos virtual basado en bloques
• Emulador de llamadas al sistema Linux
• Ejecución segura y aislada del lado del cliente

Tabla de contenidos

• Redes
• Desarrollo y personalización
  • Desplegar en GitHub Pages
  • Servicio local y configuración de imagen
• Integración con Claude AI
• Comunidad y soporte
• Más información
• Licencia

[!NOTE] Visita https://webvm.io para empezar de inmediato en tu navegador. Sin configuración previa.

Para configuración local, compilaciones de imágenes personalizadas y guía de bifurcación/despliegue, consulta Desarrollo y personalización.

Redes

WebVM soporta integración con Tailscale. De esta forma, tu máquina virtual en el navegador puede acceder a tu red privada y, con un nodo de salida, también a Internet público.

[!NOTE] Algunas operaciones de red de bajo nivel (especialmente ICMP usado por ping) no están disponibles actualmente en este entorno. Para comprobaciones de conectividad, usa curl o wget.

Red local

1. Abre el panel "Redes" desde la barra lateral
2. Haz clic en "Conectar a Tailscale"
3. Inicia sesión (crea una cuenta gratuita en tailscale.com si es necesario)
4. Haz clic en "Conectar" cuando se te solicite

¡WebVM ahora tiene acceso a todas las máquinas de tu red Tailscale!

Consejos de uso de Internet

[!TIP] En conexiones lentas puede haber una breve demora antes de la inicialización. El estado de la conexión se muestra como un punto de color en el botón: naranja = red local, verde = global/Internet. El texto del botón muestra tu dirección IP de Tailscale una vez conectado.

Para acceder a Internet público desde WebVM, configura un Nodo de salida en otro dispositivo de tu red Tailscale:

1. Sigue la guía rápida de Nodo de salida de Tailscale (secciones: "Anunciar un dispositivo como nodo de salida")
2. WebVM usará automáticamente el nodo de salida una vez anunciado

Usar una clave de autenticación

Como alternativa al inicio de sesión interactivo, añade tu clave de autenticación de Tailscale al fragmento de URL:

https://webvm.io/#authKey=<tu-clave-efímera>

Esto equivale a la opción --login-server de Tailscale.

[!TIP] Si también necesitas un servidor de control personalizado, añade controlUrl en el mismo fragmento de URL y separa los valores con &, por ejemplo: #authKey=...&controlUrl=....

Autoalojar Tailscale con Headscale

También soportamos headscale, una implementación de código abierto autoalojada del servidor de control de Tailscale. Como Headscale no añade cabeceras CORS por defecto, necesitarás un proxy delante de él. Consulta la documentación de configuración de proxy inverso de Headscale para ver un ejemplo.

Una vez listo, añade la siguiente línea a tu bloque location / en el archivo de configuración de nginx.

if ($http_origin = "https://tudominio.com") {
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    add_header 'Access-Control-Allow-Credentials' 'true' always;
}

Luego accede a WebVM con:

https://tudominio.com/#controlUrl=<tu-url-de-headscale>

Desarrollo y personalización

[!NOTE] Los usuarios tienen privilegios de root por defecto. sudo no está instalado, aunque se puede añadir fácilmente al Dockerfile si es necesario.

Desplegar en GitHub Pages

Este es un flujo de trabajo simple, apto para principiantes. Para alojamiento local y personalización, consulta más abajo Servicio local y configuración de imagen.

Bifurca (fork) el repositorio de WebVM para desplegar tu propia versión en GitHub Pages:

1. Bifurca el repositorio
2. Habilita GitHub Pages desde el repositorio bifurcado en Configuración → Pages usando "GitHub Actions" como origen
3. Ejecuta el flujo de trabajo Deploy desde Actions
4. Una vez completado, abre la URL que se muestra bajo el trabajo deploy_to_github_pages

El mismo flujo de trabajo Deploy también compila imágenes de disco .ext2 personalizadas a partir de un Dockerfile. Puedes apuntarlo a dockerfiles/debian_mini u otro Dockerfile, y luego publicar el resultado como un activo de lanzamiento de GitHub o desplegar la compilación de Pages desde tu bifurcación.

[!NOTE] dockerfiles/debian_large es una imagen demasiado grande para GitHub Pages.

Servicio local y configuración de imagen

1. Clona el repositorio

git clone https://github.com/leaningtech/webvm.git
cd webvm

2. Coloca tu imagen en custom-disk-images/

Este repositorio incluye un directorio persistente custom-disk-images/ para archivos .ext2 locales.

Para usar la imagen oficial Debian mini, descárgala de los lanzamientos:

debian_mini_20230519_5022088024.ext2

También puedes copiar una imagen que hayas compilado tú mismo.

3. Apunta WebVM a tu imagen local

Edita config_public_terminal.js:

export const diskImageUrl =
  "/custom-disk-images/debian_mini_20230519_5022088024.ext2";
export const diskImageType = "bytes";

4. Instala las dependencias y compila

npm install
npm run build

5. Inicia Nginx y abre WebVM

nginx -p . -c nginx.conf

Luego abre http://127.0.0.1:8081 y ¡disfruta de tu WebVM local!

Para el entorno de escritorio Alpine completo, consulta leaningtech/alpine-image.

Para más detalles, consulta la documentación de imágenes personalizadas de CheerpX.

[!TIP] Para el REPL de Python3, el flujo de trabajo Deploy tiene en cuenta el CMD especificado en el Dockerfile.

Para construir un REPL, simplemente cambia CMD [ "/bin/bash" ] por CMD [ "/usr/bin/python3" ] y despliega.

Integración con Claude AI

Para acceder a Claude AI, necesitas una clave API. Sigue estos pasos para empezar:

1. Crea una cuenta