news 2026/6/15 16:10:40

webvm 用浏览器启动的虚拟环境

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
webvm 用浏览器启动的虚拟环境

WebVM是一款基于WebAssembly技术的浏览器虚拟机,可直接在浏览器中运行完整的Linux环境,无需服务器支持

源码:https://github.com/leaningtech/webvm/

github部署

安装介绍:

动手实践:

打开网站:https://github.com/leaningtech/webvm

fork到自己的github账户:

直接点setting:

在setting页面,点击pages:

在Pages展开的右边页面,打开Build and deployment下面的GitHub ACtions,选Deploy from a branch:

可以看到把main映射到根目录了:

然后点Action:

出现Workflows页面,点绿色的大按钮:

出现Actions页面,点左侧的Deploy按钮:

点右侧的Run workflow,然后点绿色按钮:Run workflow

后面就是慢慢等待发布成功:

但是不知道为何,我这边发布是失败的。

本地部署

下载源码

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

下载Debian mini 镜像

wget "https://github.com/leaningtech/webvm/releases/download/ext2_image/debian_mini_20230519_5022088024.ext2"

修改配置文件

Edit `config_public_terminal.js` to reference your local disk image:

  • Replace:

    "wss://disks.webvm.io/debian_large_20230522_5044875331.ext2"

    With:

    "/disk-images/debian_mini_20230519_5022088024.ext2"

    (Use an absolute or relative URL pointing to the disk image location.)

  • Replace"cloud"with the correct disk image type:"bytes"

最终修改成这样

// The root filesystem location // export const diskImageUrl = "wss://disks.webvm.io/debian_large_20230522_5044875331_2.ext2"; export const diskImageUrl = "debian_large_20230522_5044875331_2.ext2"; // The root filesystem backend type // export const diskImageType = "cloud"; export const diskImageType = "bytes";

build

npm install npm run build

实战中我是使用了pnpm

pnpm install pnpm run build

build完成提示:

[vite-plugin-static-copy] Copied 6 items. ✓ built in 32.50s Run npm run preview to preview your production build locally. > Using @sveltejs/adapter-static Wrote site to "build" ✔ done

配置nginx

mkdir disk-images mv debian_mini_20230519_5022088024.ext2 disk-images/

修改nginx.conf文件,加入:

​ location /disk-images/ { root .; autoindex on; } ​

启动nginx

sudo nginx -p . -c nginx.conf

出来页面了

尽管只是个黑黑的控制台,也很棒了!

不过后面有报错,没搞定。

调试

pnpm run build报错

> webvm@2.0.0 build
> vite build

vite v5.4.21 building SSR bundle for production...
✓ 31 modules transformed.
x Build failed in 1.06s
error during build:
config_public_terminal.js (2:9): Expected ';', '}' or <eof>
file: config_public_terminal.js:2:9

1: // The root filesystem location
2: # export const diskImageUrl = "wss://disks.webvm.io/debian_large_20230522_5044875331_2.ext2";
^
3: export const diskImageUrl = "debian_large_20230522_5044875331_2.ext2";
4: // The root filesystem backend type

at getRollupError (file:///home/skywalk/github/webvm/node_modules/.pnpm/rollup@4.53.3/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
at ParseError.initialise (file:///home/skywalk/github/webvm/node_modules/.pnpm/rollup@4.53.3/node_modules/rollup/dist/es/shared/node-entry.js:14469:28)
at convertNode (file:///home/skywalk/github/webvm/node_modules/.pnpm/rollup@4.53.3/node_modules/rollup/dist/es/shared/node-entry.js:16352:10)
at convertProgram (file:///home/skywalk/github/webvm/node_modules/.pnpm/rollup@4.53.3/node_modules/rollup/dist/es/shared/node-entry.js:15592:12)
at Module.setSource (file:///home/skywalk/github/webvm/node_modules/.pnpm/rollup@4.53.3/node_modules/rollup/dist/es/shared/node-entry.js:17352:24)
at async ModuleLoader.addModuleSource (file:///home/skywalk/github/webvm/node_modules/.pnpm/rollup@4.53.3/node_modules/rollup/dist/es/shared/node-entry.js:21377:13)

发现是注释用错了,不应该用#,要用//

// The root filesystem location // export const diskImageUrl = "wss://disks.webvm.io/debian_large_20230522_5044875331_2.ext2"; export const diskImageUrl = "debian_large_20230522_5044875331_2.ext2"; // The root filesystem backend type // export const diskImageType = "cloud"; export const diskImageType = "bytes";

build完成

这段代码应该放到nginx的哪里?

location /disk-images/ { root .; autoindex on; }

放到主文件的location / 后面或前面

webvm启动报错

curl --max-time 15 parrot.live # requires networking

WebVM encountered an unexpected error

Check the DevTools console for further information

Please consider reporting a bug!

CheerpX internal error message is:

Initialization failed for 'HttpBytesDevice': Server returned 404
不知道为啥啊!是不是国内网络的锅啊?

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/15 13:07:26

19、深入了解SMB协议:实现Linux与Windows的集成

深入了解SMB协议:实现Linux与Windows的集成 1. Windows 98与Samba的性能问题 Windows 98的资源管理器(可能还有其他程序)在向网络共享发送写入请求时,会错误地设置 “sync” 位。这会导致严重的性能下降,因为Samba会在每次写入后正确地对文件执行 fsync() 操作。再加上…

作者头像 李华
网站建设 2026/6/15 13:45:50

24、私有 IP 网络地址分配解析

私有 IP 网络地址分配解析 1. 引言 在本文语境中,企业是指自主运营使用 TCP/IP 网络,并能自主决定网络内地址规划和分配的实体。本文着重探讨私有互联网的地址分配问题。这种分配方式既能保证企业内部所有主机间的网络层连通性,也能确保不同企业的公共主机间的连通性。不过…

作者头像 李华
网站建设 2026/6/15 13:09:41

14、UNIX/Linux Shell编程实用指南

UNIX/Linux Shell编程实用指南 1. 检测并处理崩溃生成的文件 在程序崩溃时,有时会生成一个名为 core 的文件,这个文件通常很大,往往需要将其删除。下面我们将编写一个脚本,每分钟检查一次主目录中是否生成了 core 文件,如果生成了,就在终端输出警告信息并终止脚本。…

作者头像 李华
网站建设 2026/6/15 13:53:29

自然语言处理容易混淆知识点(一)c-TF-IDF和TF-IDF的区别

c-TF-IDF 和 TF-IDF 什么是 c-TF-IDF&#xff1f;传统 TF-IDFc-TF-IDF&#xff08;基于类的 TF-IDF&#xff09; c-TF-IDF 的计算公式直观理解在 BERTopic 中的工作流程代码示例&#xff1a;使用 c-TF-IDF与传统 TF-IDF 对比c-TF-IDF 的优势自定义 c-TF-IDF 参数可视化 c-TF-ID…

作者头像 李华
网站建设 2026/6/14 23:10:41

AI时代裁员潮真相:是AI夺走了工作,还是企业转型的必然?

简介 文章探讨了科技行业裁员潮中AI的真实角色。AI虽提高效率降低成本&#xff0c;但经济下行、过度扩张和市场竞争也是重要因素。企业正进行战略转型&#xff0c;将资源从传统业务转向AI领域&#xff0c;这不仅是成本削减&#xff0c;更是人才结构重构。AI带来的是劳动力转型&…

作者头像 李华
网站建设 2026/6/14 22:54:40

GEO 3小问:一文搞懂 AI 搜索时代的 “品牌曝光关键”

1. 问&#xff1a;到底什么是 GEO&#xff1f;和传统搜索优化不一样吗&#xff1f;答&#xff1a;GEO 全称 “AI 搜索优化”&#xff0c;核心是让品牌精准出现在用户用 AI 提问的答案里 —— 比如用户问 AI “北京靠谱的装修公司”“国产好口碑奶粉”&#xff0c;GEO 能让你的品…

作者头像 李华