在

在浏览器中运行虚拟机

2025-05-24

在浏览器中运行虚拟机

我们将在你的浏览器中运行一个完整的虚拟机！而且不仅仅是运行虚拟机，我们还会启动 FreeDOS 和 Alpine Linux。“等等，什么？我们已经有 VirtualBox、VMware 和 DOSBox 了！”好吧，有了 Web 浏览器，谁还需要 VirtualBox 呢？（开玩笑啦！😄）

不过说真的，我们来好好玩玩，看看现代浏览器有多强大，尤其是现在它们支持WebAssembly (Wasm) 了。当然，传统的虚拟机软件很棒，但能在浏览器中运行一整套操作系统？这太酷了！🚀

如果您希望直接查看成品，可以在此处找到完整的代码https://github.com/nadchif/in-browser-virtual-machine

在本指南中，我们将使用React.js，但我保持其通用性，以便您可以将所有内容适配到纯 HTML 或任何让您满意的框架。

你需要什么

好的，让我们构建这个东西！

1. 设置我们的 Web 应用

如果您已经是 React 专业人士，请随意跳过设置并跳至组件部分！

首先，让我们使用Vite创建我们的应用程序（它超级快而且很现代）：

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

当它询问你：

  • 选择一个项目名称（我选择“browser-vm”）
  • 选择React作为框架。
  • 选择Javascript变体。（正如承诺的那样，保持通用性😄）
  • 然后运行：
cd browser-vm
npm install
Enter fullscreen mode Exit fullscreen mode

成分

现在让我们设置虚拟机显示。打开App.jsx并将所有内容替换为以下内容：

function App(){
return (
 <div id="screen_container">
 <div id="screen" style={{overflow: 'hidden'}}>Initializing Emulator…</div>
 <canvas style={{display: 'none'}}></canvas>
 </div>
 );
}
export default App
Enter fullscreen mode Exit fullscreen mode

打开index.css并将内容替换为：

#screen_container {
 white-space: pre;
 font-family: Courier, monospace;
 font-size: 14px;
 line-height: 14px;
 background-color: #000;
 color:#fff;
}
Enter fullscreen mode Exit fullscreen mode

2. 准备虚拟机

我们正在使用一个名为 V86 的酷炫项目，它可以将您的浏览器变成一个真正的计算机模拟器。它使用WebAssembly来实时翻译计算机指令——非常简洁，对吧？更多信息请点击此处

从 V86 的GitHub 版本中获取这些文件：

接下来，从V86 存储库的bios 文件夹下载以下 BIOS 文件：

将它们放入你的项目中，如下所示：

public/
├── v86.wasm
├── libv86.js
└── bios/
    ├── seabios.bin
    └── vgabios.bin
Enter fullscreen mode Exit fullscreen mode

3. 是时候让它发挥作用了！

通过添加以下内容更新您的 index.html 以包含我们的 VM 引擎<script src="libv86.js"></script>：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>FreeDOS 1.2</title>
</head>
<body>
 <div id="root"></div>
+ <script src="libv86.js"></script>
 <script type="module" src="/src/main.jsx"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

现在到了最有趣的部分——让我们配置虚拟机！将以下内容更新为App.jsx：

import { useEffect } from 'react';
function App() {

useEffect(function initializeEmulator(){
 // See https://github.com/copy/v86/blob/master/src/browser/starter.js for options 
 window.emulator = new window.V86({
   wasm_path: '/v86.wasm',
   screen_container: document.getElementById("screen_container"),
   bios: {
     url: "/bios/seabios.bin",
   },
   vga_bios: {
     url: "/bios/vgabios.bin",
   },
   hda: { // Hard Disk
    url:  "/images/fd12-base.img",
    async:  true,
    size:  419430400, // Recommended to add size of the image in URL. see https://github.com/copy/v86/blob/master/src/browser/starter.js 
   },
   autostart: true,
 });
}, []);

return (
     <div id="screen_container">
       <div id="screen" style={{overflow: 'hidden'}}>Initializing Emulator…</div>
       <canvas style={{display: 'none'}}></canvas>
     </div>
   );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

有关可用模拟器选项的更多详细信息，请查看：https://github.com/copy/v86/blob/master/src/browser/starter.js

让我们启动一些操作系统！

首先：FreeDOS

让我们从一些有趣的东西开始吧 ——FreeDOS！它非常适合运行经典的 DOS 游戏和软件。点击此处获取预编译版本，解压fd12-base.img，然后将其放入您的public/images文件夹中。

通过运行以下命令启动 Web 应用程序：

npm run dev
Enter fullscreen mode Exit fullscreen mode

并在浏览器中打开http://localhost:5173/

在浏览器中启动 FreeDOS

想要尝试 Linux 吗？

更酷的是——我们可以直接在浏览器中运行 Alpine Linux！下载最新的 Alpine 虚拟 ISO，并将虚拟机设置更新为：

window.emulator = new window.V86({
  wasm_path:  '/v86.wasm',
  screen_container:  document.getElementById("screen_container"),
  bios: {
    url:  "/bios/seabios.bin",
  },
  vga_bios: {
    url:  "/bios/vgabios.bin",
  },
  boot_order: '0x123', // Boot from CD-ROM first
  memory_size: 512 * 1024 * 1024, // 512MB RAM
  vga_memory_size: 64 * 1024 * 1024, // 64MB VGA RAM
  // See more: https://github.com/copy/v86/blob/master/docs/networking.md
  net_device: {
    type: 'virtio',
    relay_url: "wisps://wisp.mercurywork.shop",
  },
  cdrom: {
    // Source: https://dl-cdn.alpinelinux.org/alpine/v3.20/releases/x86/alpine-virt-3.20.3-x86.iso
    url: "/images/alpine-virt-3.20.3-x86.iso", 
  },
  autostart:  true,
});
Enter fullscreen mode Exit fullscreen mode

刷新浏览器并等待 Linux 启动。可能需要 3-5 分钟😅。当提示登录时，输入：root

在浏览器中运行的 Alpine Linux 3.20 的登录提示

让它看起来更酷😎

想要那种真实的复古电脑感觉吗？让我们添加完美的字体：

  • 获取现代 DOS 字体
  • 将文件拖放到项目中assets/fonts/ModernDOS并将 index.css 更新为：
@font-face {
 font-family: 'ModernDOS';
 src: url('./assets/fonts/ModernDOS/ModernDOS8x16.ttf') format('truetype');
}
#screen_container {
 white-space: pre;
 font-family: 'ModernDOS', 'Courier New', Courier, monospace;
 font-size: 14px;
 line-height: 14px;
 background-color: #000;
 color:#fff;
}
Enter fullscreen mode Exit fullscreen mode

刷新页面并享受新外观！

在浏览器中运行的 FreeDOS 使用类似 DOS 的字体

下一步是什么？

现在您已经在浏览器中运行了一个虚拟机（这有多酷？！），这里有一些有趣的事情可以尝试：

想要完整代码？点击此处获取：

值得一看的类似好东西

非常感谢

文章来源：https://dev.to/dchif/run-a-virtual-machine-in-your-browser-2kjk
Devto 翻译
PREV
美化GitHub个人资料
NEXT
JavaScript 本地存储解释！