WebVM

Ce dépôt héberge le code source de https://webvm.io, une machine virtuelle Linux qui s'exécute dans votre navigateur.

Essayez le nouvel environnement graphique Alpine / Xorg / i3 : https://webvm.io/alpine.html

Qu'est-ce que WebVM ?

WebVM est un environnement virtuel sans serveur fonctionnant entièrement côté client en HTML5/WebAssembly. Il est conçu pour être compatible avec l'ABI Linux et exécute une distribution Debian non modifiée, y compris de nombreuses chaînes d'outils de développement natives.

WebVM est propulsé par le moteur de virtualisation CheerpX, qui fournit :

• Compilateur JIT x86 vers WebAssembly
• Système de fichiers virtuel basé sur des blocs
• Émulateur d'appels système Linux
• Exécution sécurisée et cloisonnée côté client

Table des matières

• Réseau
• Développement et personnalisation
  • Déployer sur GitHub Pages
  • Service local et configuration d'image
• Intégration de Claude AI
• Communauté et support
• En savoir plus
• Licence

[!NOTE] Visitez https://webvm.io pour commencer immédiatement dans votre navigateur. Aucune configuration requise.

Pour l'installation locale, les constructions d'images personnalisées et les instructions de fork/déploiement, consultez Développement et personnalisation.

Réseau

WebVM prend en charge l'intégration Tailscale. Ainsi, votre VM de navigateur peut atteindre votre réseau privé et, avec un nœud de sortie, également Internet public.

[!NOTE] Certaines opérations réseau de bas niveau (notamment ICMP utilisé par ping) ne sont actuellement pas disponibles dans cet environnement. Pour les vérifications de connectivité, utilisez curl ou wget.

Réseau local

1. Ouvrez le panneau "Réseau" depuis la barre latérale
2. Cliquez sur "Se connecter à Tailscale"
3. Connectez-vous (créez un compte gratuit sur tailscale.com si nécessaire)
4. Cliquez sur "Connecter" lorsque vous y êtes invité

WebVM a désormais accès à toutes les machines de votre réseau Tailscale !

Conseils d'utilisation d'Internet

[!TIP] Sur les connexions plus lentes, il peut y avoir un court délai avant l'initialisation. L'état de la connexion est indiqué par un point coloré sur le bouton : orange = réseau local, vert = global/internet. Le texte du bouton affiche votre adresse IP Tailscale une fois connecté.

Pour accéder à Internet public depuis WebVM, configurez un nœud de sortie sur un autre appareil de votre réseau Tailscale :

1. Suivez le guide rapide des nœuds de sortie Tailscale (sections : "Advertise a device as an exit node")
2. WebVM utilise automatiquement le nœud de sortie une fois annoncé

Utiliser une clé d'authentification

En alternative à la connexion interactive, ajoutez votre clé d'authentification Tailscale au fragment d'URL :

https://webvm.io/#authKey=<your-ephemeral-key>

Ceci est équivalent à l'option --login-server de Tailscale.

[!TIP] Si vous avez également besoin d'un serveur de contrôle personnalisé, ajoutez controlUrl dans le même fragment d'URL et séparez les valeurs par &, par exemple : #authKey=...&controlUrl=....

Auto-hébergement de Tailscale avec Headscale

Nous prenons également en charge headscale, une implémentation open source auto-hébergée du serveur de contrôle Tailscale. Comme Headscale n'ajoute pas d'en-têtes CORS par défaut, vous aurez besoin d'un proxy devant lui. Consultez la documentation de configuration du proxy inverse Headscale pour un exemple.

Une fois prêt, ajoutez la ligne suivante à votre bloc location / dans votre fichier de configuration nginx.

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

Accédez ensuite à WebVM avec :

https://yourdomain.com/#controlUrl=<your-headscale-url>

Développement et personnalisation

[!NOTE] Les utilisateurs ont des privilèges root par défaut. sudo n'est pas installé, mais il peut être facilement ajouté au Dockerfile si nécessaire.

Déployer sur GitHub Pages

Il s'agit d'un workflow simple et adapté aux débutants. Pour l'hébergement local et la personnalisation, voir ci-dessous Service local et configuration d'image.

Forkez le dépôt WebVM pour déployer votre propre version sur GitHub Pages :

1. Forkez le dépôt
2. Activez GitHub Pages dans les paramètres du dépôt forké → Pages en utilisant "GitHub Actions" comme source
3. Exécutez le workflow Deploy depuis Actions
4. Après la fin, ouvrez l'URL affichée sous le job deploy_to_github_pages

Le même workflow Deploy construit également des images disque .ext2 personnalisées à partir d'un Dockerfile. Vous pouvez le pointer vers dockerfiles/debian_mini ou un autre Dockerfile, puis soit publier le résultat comme un artefact GitHub Release, soit déployer la construction Pages depuis votre fork.

[!NOTE] dockerfiles/debian_large est une image trop volumineuse pour GitHub Pages.

Service local et configuration d'image

1. Clonez le dépôt

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

2. Placez votre image dans custom-disk-images/

Ce dépôt inclut un répertoire persistant custom-disk-images/ pour les fichiers .ext2 locaux.

Pour utiliser l'image Debian mini officielle, téléchargez-la depuis les Releases :

debian_mini_20230519_5022088024.ext2

Vous pouvez également copier une image que vous avez construite vous-même.

3. Pointez WebVM vers votre image locale

Modifiez config_public_terminal.js :

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

4. Installez les dépendances et construisez

npm install
npm run build

5. Démarrez Nginx et ouvrez WebVM

nginx -p . -c nginx.conf

Ouvrez ensuite http://127.0.0.1:8081 et profitez de votre WebVM local !

Pour l'environnement de bureau Alpine complet, voir leaningtech/alpine-image.

Pour plus de détails, consultez la documentation des images personnalisées CheerpX.

[!TIP] Pour un REPL Python3, le workflow Deploy prend en compte le CMD spécifié dans le Dockerfile.

Pour construire un REPL, vous pouvez simplement changer CMD [ "/bin/bash" ] en CMD [ "/usr/bin/python3" ] et déployer.

Intégration de Claude AI

Pour accéder à Claude AI, vous avez besoin d'une clé API. Suivez ces étapes pour commencer :

1. Créez un compte