WebVM

Dieses Repository enthält den Quellcode für https://webvm.io, eine Linux-VM, die in Ihrem Browser läuft.

Probieren Sie die neue Alpine-/Xorg-/i3-Grafikumgebung aus: https://webvm.io/alpine.html

Was ist WebVM?

WebVM ist eine serverlose virtuelle Umgebung, die vollständig clientseitig in HTML5/WebAssembly läuft. Es ist für Linux-ABI-Kompatibilität ausgelegt und führt eine unveränderte Debian-Distribution mit vielen nativen Entwicklungswerkzeugen aus.

WebVM wird von der CheerpX-Virtualisierungs-Engine betrieben, die Folgendes bietet:

• x86-zu-WebAssembly-JIT-Compiler
• Virtuelles blockbasiertes Dateisystem
• Linux-Syscall-Emulator
• Sichere, sandboxierte clientseitige Ausführung

Inhaltsverzeichnis

• Netzwerk
• Entwicklung & Anpassung
  • Auf GitHub Pages bereitstellen
  • Lokales Bereitstellen & Image-Konfiguration
• Claude-AI-Integration
• Community & Unterstützung
• Mehr erfahren
• Lizenz

[!NOTE] Besuchen Sie https://webvm.io, um sofort in Ihrem Browser zu starten. Keine Einrichtung erforderlich.

Für lokale Einrichtung, benutzerdefinierte Image-Erstellung und Fork/Deploy-Anleitung siehe Entwicklung & Anpassung.

Netzwerk

WebVM unterstützt die Tailscale-Integration. So kann Ihre Browser-VM Ihr privates Netzwerk erreichen und, mit einem Exit-Node, auch das öffentliche Internet.

[!NOTE] Einige Low-Level-Netzwerkoperationen (insbesondere ICMP, das von ping verwendet wird) sind in dieser Umgebung derzeit nicht verfügbar. Verwenden Sie für Konnektivitätsprüfungen curl oder wget.

Lokales Netzwerk

1. Öffnen Sie das Bedienfeld „Netzwerk“ in der Seitenleiste
2. Klicken Sie auf „Mit Tailscale verbinden“
3. Melden Sie sich an (erstellen Sie ggf. ein kostenloses Konto auf tailscale.com)
4. Klicken Sie auf „Verbinden“, wenn Sie dazu aufgefordert werden

WebVM hat jetzt Zugriff auf alle Maschinen in Ihrem Tailscale-Netzwerk!

Tipps zur Internetnutzung

[!TIP] Bei langsameren Verbindungen kann es zu einer kurzen Verzögerung vor der Initialisierung kommen. Der Verbindungsstatus wird als farbiger Punkt auf der Schaltfläche angezeigt: Orange = lokales Netzwerk, Grün = global/Internet. Der Schaltflächentext zeigt nach der Verbindung Ihre Tailscale-IP-Adresse an.

Um aus WebVM auf das öffentliche Internet zuzugreifen, richten Sie auf einem anderen Gerät in Ihrem Tailscale-Netzwerk einen Exit-Node ein:

1. Folgen Sie der Tailscale-Exit-Node-Schnellstartanleitung (Abschnitte: „Gerät als Exit-Node bewerben“)
2. WebVM verwendet den Exit-Node automatisch, sobald dieser beworben wird

Verwenden eines Authentifizierungsschlüssels

Als Alternative zur interaktiven Anmeldung fügen Sie Ihren Tailscale-Authentifizierungsschlüssel zum URL-Fragment hinzu:

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

Dies entspricht der Option --login-server von Tailscale.

[!TIP] Wenn Sie auch einen benutzerdefinierten Steuerungsserver benötigen, fügen Sie controlUrl im selben URL-Fragment hinzu und trennen Sie die Werte mit &, z. B.: #authKey=...&controlUrl=....

Selbsthosting von Tailscale mit Headscale

Wir unterstützen auch headscale, eine selbstgehostete Open-Source-Implementierung des Tailscale-Steuerungsservers. Da Headscale standardmäßig keine CORS-Header hinzufügt, benötigen Sie einen Proxy davor. Siehe die Headscale-Reverse-Proxy-Setup-Dokumentation für ein Beispiel.

Fügen Sie dann die folgende Zeile zu Ihrem location /-Block in Ihrer nginx-Konfigurationsdatei hinzu.

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

Greifen Sie dann wie folgt auf WebVM zu:

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

Entwicklung & Anpassung

[!NOTE] Benutzer haben standardmäßig Root-Rechte. sudo ist nicht installiert, kann aber bei Bedarf einfach zum Dockerfile hinzugefügt werden.

Auf GitHub Pages bereitstellen

Dies ist ein einfacher, anfängerfreundlicher Workflow. Für lokales Hosting und Anpassung siehe unten Lokales Bereitstellen & Image-Konfiguration.

Forken Sie das WebVM-Repository, um Ihre eigene Version auf GitHub Pages bereitzustellen:

1. Repository forken
2. GitHub Pages aktivieren über das geforkte Repository in den Einstellungen → Pages mit „GitHub Actions“ als Quelle
3. Den Deploy-Workflow ausführen unter Actions
4. Öffnen Sie nach Abschluss die URL, die unter dem Job deploy_to_github_pages angezeigt wird

Der gleiche Deploy-Workflow erstellt auch benutzerdefinierte .ext2-Datenträger-Images aus einem Dockerfile. Sie können ihn auf dockerfiles/debian_mini oder ein anderes Dockerfile verweisen und das Ergebnis entweder als GitHub-Release-Asset veröffentlichen oder den Pages-Build aus Ihrem Fork bereitstellen.

[!NOTE] dockerfiles/debian_large ist ein zu großes Image für GitHub Pages.

Lokales Bereitstellen & Image-Konfiguration

1. Repository klonen

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

2. Legen Sie Ihr Image in custom-disk-images/ ab

Dieses Repository enthält ein persistentes Verzeichnis custom-disk-images/ für lokale .ext2-Dateien.

Um das offizielle Debian-Mini-Image zu verwenden, laden Sie es von den Releases herunter:

debian_mini_20230519_5022088024.ext2

Sie können auch ein selbst erstelltes Image kopieren.

3. WebVM auf Ihr lokales Image verweisen

Bearbeiten Sie config_public_terminal.js:

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

4. Abhängigkeiten installieren und erstellen

npm install
npm run build

5. Nginx starten und WebVM öffnen

nginx -p . -c nginx.conf

Öffnen Sie dann http://127.0.0.1:8081 und genießen Sie Ihr lokales WebVM!

Für die vollständige Alpine-Desktop-Umgebung siehe leaningtech/alpine-image.

Weitere Details finden Sie in der CheerpX-Dokumentation zu benutzerdefinierten Images.

[!TIP] Für Python3-REPL berücksichtigt der Deploy-Workflow das im Dockerfile angegebene CMD.

Um eine REPL zu erstellen, ändern Sie einfach CMD [ "/bin/bash" ] in CMD [ "/usr/bin/python3" ] und stellen Sie bereit.

Claude-AI-Integration

Um auf Claude AI zuzugreifen, benötigen Sie einen API-Schlüssel. Folgen Sie diesen Schritten, um loszulegen:

1. Konto erstellen