Linux之WebVM：WebVM(在浏览器中运行的Linux网络虚拟机)的简介、安装和使用方法、案例应用之详细攻略

Linux之WebVM：WebVM(在浏览器中运行的Linux网络虚拟机)的简介、安装和使用方法、案例应用之详细攻略

WebVM的简介

WebVM 是一个在浏览器中运行的 Linux 虚拟机，其源代码托管在 GitHub 上 (https://github.com/leaningtech/webvm)。它是一个完全在客户端（HTML5/WebAssembly）运行的无服务器虚拟环境，设计为与 Linux ABI 兼容。它运行的是未经修改的 Debian 发行版，包括许多原生开发工具链。WebVM 由 CheerpX 虚拟化引擎驱动，可以在任何浏览器上安全地、沙盒式地执行 x86 二进制文件。CheerpX 包含一个 x86 到 WebAssembly 的 JIT 编译器、一个虚拟的基于块的文件系统和一个 Linux 系统调用模拟器。

WebVM 提供了一个在浏览器中运行 Linux 虚拟机的强大功能，并支持定制和网络功能（通过 Tailscale）。 其易用性和可扩展性使其成为一个有价值的工具，尤其适合在浏览器环境中进行开发和测试。

在线测试地址：https://webvm.io/

GitHub地址：https://github.com/leaningtech/webvm

1、特点

>> 浏览器内运行：WebVM 完全在浏览器中运行，无需服务器端支持。
>> Linux ABI 兼容：它运行未经修改的 Debian 发行版，兼容许多 Linux 工具和程序。
>> 安全沙盒：基于 CheerpX 的沙盒机制，确保安全地执行 x86 二进制文件。
>> WebAssembly 驱动：使用 WebAssembly 技术，实现高效的 x86 代码到 Web 代码的转换。
****>> 网络支持 (需 Tailscale)****：通过集成 Tailscale VPN 网络（使用 WebSockets 作为传输层）提供网络功能。 现代浏览器缺乏直接使用 TCP 或 UDP 的 API，因此依赖 Tailscale。
>> 可定制性：可以通过修改 dockerfiles/debian_mini 或创建新的 Dockerfile 来定制 WebVM 环境。

WebVM的安装和使用方法

1、启用网络连接

现代浏览器不提供可以直接使用TCP或UDP的API。WebVM通过与Tailscale集成来提供网络支持，Tailscale是一个支持WebSockets作为传输层的VPN网络。

打开侧边栏中的“网络”面板
从面板中点击“连接到Tailscale”
登录Tailscale（如果您没有账户，请创建一个）
当Tailscale提示时，点击“连接”

如果您不熟悉Tailscale或需要更多信息，请查看WebVM和Tailscale。

2、基于GitHub部署

>> Fork 仓库：Fork WebVM 仓库到你的 GitHub 账号。

>> 启用 GitHub页面：点击“设置”→ 进入“页面”部分→选择“GitHub Actions”作为源。如果您正在使用自定义域名，请确保“强制HTTPS”已启用。

>> 运行工作流：点击 "Actions"，接受提示（仅需一次），然后点击 "Deploy" 工作流，点击两次 "Run workflow"。

>> 查看部署 URL：工作流完成后，会在 deploy_to_github_pages 任务下方显示部署 URL。

****>> 自定义 (可选)****：修改 dockerfiles/debian_mini 或创建新的 Dockerfile，并使用 "Path to Dockerfile" 工作流参数选择它。

3、本地部署

从本地Git克隆：git clone https://github.com/leaningtech/webvm

>> 下载 Debian Mini Ext2 镜像：从https：//github.com/leaningtech/webvm/releases/下载debian_mini Ext2映像文件。

也可以通过选择“上传GitHub发布”工作流选项来构建自己的映像文件。

>> 放置镜像：将镜像文件放置在仓库根目录。

>> 修改配置文件：编辑 config_github_terminal.js，取消 CMD、ARGS、ENV 和 CWD 的默认值注释，并将 IMAGE_URL 替换为 Ext2 镜像的 URL（绝对或相对路径）。例如：/debian_mini_20230519_5022088024.ext2。

>> 构建 WebVM：使用npm构建WebVM，输出将放置在build目录中。npm install 和 npm run build (构建输出位于 build 目录)。

>> 启动 Nginx：nginx -p . -c nginx.conf (Nginx 自动指向 build 目录)。

>> 访问 WebVM：在浏览器访问http：//127.0.0.1:8081，享受您的本地WebVM

4、更多链接

WebVM：浏览器中的无服务器x86虚拟机

WebVM：通过Tailscale实现WebAssembly上的Linux虚拟化和全局网络

Mini.WebVM：从Dockerfile创建自己的Linux箱子，通过WebAssembly在浏览器中进行虚拟化

参考GitHub Pages部署：Mini.WebVM

在JsNation 2022上的“创造不可能：浏览器中的x86虚拟化与WebAssembly”演讲

5、项目依赖

本项目依赖于：

CheerpX 是由 Leaning Technologies 为 x86 虚拟化和 Linux 模拟而设计的，

xterm.js（https：//xtermjs.org/），用于提供基于 Web 的终端仿真器

Tailscale，用于网络组件

lwIP（轻量级 IP 协议栈），通过 Cheerp 编译为 Web 版本，用于 TCP/IP 栈

6、版本控制

WebVM 依赖于 CheerpX 的 x86-to-WebAssembly 虚拟化技术，该技术通过 NPM 包含在项目中。

每次发布都会更新NPM包。

每次构建都是不可变的，如果当前某个版本对你来说运行良好，那么它将永远保持正常运行。

WebVM的案例应用

1、示例自定义：Python3 REPL

部署工作流会考虑Dockerfile中指定的CMD。要构建REPL，只需应用此补丁并部署即可。可以通过修改 dockerfiles/debian_mini Dockerfile 中的 CMD 指令来创建 Python3 REPL 环境。 文档中给出了一个具体的 diff 示例，展示如何将 CMD 修改为 ["/usr/bin/python3"] 来启动 Python3 解释器。

‘’’
下述内容是一个Git的diff输出，它显示了Dockerfile文件debian_mini的变更
这次变更的主要目的是将Docker容器启动时的默认行为从打开bash shell更改为打开Python 3解释器
‘’’
## 文件变更的标识
diff --git a/dockerfiles/debian_mini b/dockerfiles/debian_mini   # 比较的是位于a（旧版本或当前分支）和b（新版本或待合并分支）的dockerfiles/debian_mini文件

## 变更的索引和文件权限
index 2878332..1f3103a 100644   # 显示了两个版本的Git哈希值以及文件的权限（这里是100644，表示普通文件）

## 文件内容的变更
--- a/dockerfiles/debian_mini      # 表示变动前的文件
+++ b/dockerfiles/debian_mini     # 表示变动后的文件

## 具体的行变更
@@ -15,4 +15,4 @@ WORKDIR /home/user/  # 表示变更发生在文件的第15行，并且变更影响了4行代码
 # We set env, as this gets extracted by Webvm. This is optional.  
 ENV HOME="/home/user" TERM="xterm" USER="user" SHELL="/bin/bash" EDITOR="vim" LANG="en_US.UTF-8" LC_ALL="C"  # 未变更的上下文行，展示了变更附近的环境；Dockerfile中的一个指令，用于设置环境变量
 RUN echo 'root:password' | chpasswd   # Dockerfile中的另一个指令，用于在构建镜像时运行命令。这里它将root用户的密码设置为password
-CMD [ "/bin/bash" ]   # 变更前的CMD指令，它指定了容器的默认命令为/bin/bash，即启动一个bash shell
+CMD [ "/usr/bin/python3" ]  # 变更后的CMD指令，它将容器的默认命令更改为/usr/bin/python3，即启动一个Python 3解释器

2、测试

WebVM 是一个在浏览器中通过 WebAssembly 运行的虚拟 Linux 环境
WebVM 由 CheerpX 虚拟化引擎驱动，该引擎使得 x86 二进制文件可以在客户端
安全、沙箱化的环境中执行，完全在客户端侧进行
CheerpX 包含一个 x86 到 WebAssembly 的即时编译器，一个基于虚拟块的文件系统，以及一个 Linux 系统调用模拟器
通过 Dockerfile 创建带有自定义镜像的自己的 WebVM

欢迎使用 WebVM。如果不清楚如何操作，可以尝试以下示例：

python3 examples/python3/fibonacci.py   # 运行一个Python 3脚本，用来计算斐波那契数列
gcc -o helloworld examples/c/helloworld.c && ./helloworld  #第1个命令使用GCC编译器编译C语言源文件helloworld.c，并将编译生成的可执行文件命名为helloworld；第2个命令./helloworld是执行刚刚编译好的helloworld程序
objdump -d ./helloworld | less -M  # 对helloworld程序进行反汇编，使用objdump工具的-d选项来显示程序中的汇编指令。less -M用于分页显示这些汇编代码，-M选项可以显示更多的分页信息
vim examples/c/helloworld.c # 使用vim文本编辑器打开并编辑helloworld.c文件
vim examples/python3/fibonacci.py

curl --max-time 15 parrot.live  # 使用curl工具尝试连接到parrot.live网站，--max-time 15指定了最大连接时间为15秒。这个命令需要网络连接才能执行
curl --max-time 15 https://blog.csdn.net/qq_41185868