React 前端导航

webContainer - 在浏览器运行 node 代码

webContainer - 在浏览器运行 node 代码

什么是 WebContainer

WebContainers 是一个基于浏览器的运行时,用于执行 Node.js 应用程序和操作系统命令,它完全运行在您的浏览器页面中。

我的理解,webContainer 就是一个可以运行在浏览器页面中的微型操作系统,提供了文件系统、运行进程的能力,同时内置了 nodejs、npm/yarn/pnpm 等包管理器。

主要特性

  • 能够在浏览器中运行 node 及其工具链(如:webpack、vite 等)
  • 灵活:在 WebContainers 支持下,编码体验将会大幅提升
  • 安全:所有内容都运行在浏览器页面中,非常安全
  • 快速:毫秒级启动整个开发环境
  • 始终开源免费

对于服务提供方(例如在线 IDE)来说,与在云端虚拟机上运行命令相比,有以下优势:

  • 无与伦比的用户体验。没有延迟。比本地主机快。离线工作。
  • 成本效益。计算是在本地完成的。不购买云服务器。
  • 可以扩大用户规模。以前受限于云服务器的规模,如今直接运行在客户端,使用客户端的算力
  • 服务器安全,代码运行在客户侧,不担心服务器运行恶意逻辑,例如挖矿

快速入门

启动 webContainer

执行以下代码即可:

import { WebContainer } from '@webcontainer/api';
// 只能调用一次
const webContainerInstance = await WebContainer.boot();

启动完 webContainer 才能使用。

设置跨域隔离

WebContainers 需要使用 SharedArrayBuffer 这个 API(这个 API 有安全需求)。因此,您需要设置Coop/COEP标头:

// 保护源站免受侵害
Cross-Origin-Embedder-Policy: require-corp
// 保护源站免受攻击
Cross-Origin-Opener-Policy: same-origin

另外,网站必须要使用 https 协议,本地开发时使用 localhost 也可以,否则 SharedArrayBuffer 是不安全的,会被禁用。

挂载文件

使用 mount API 进行挂载文件和目录

const files = {
  // 这是一个文件,package.json 是文件名
  'package.json': {
    file: {
      contents: `
        {
          "name": "vite-starter",
          "private": true,
          "version": "0.0.1",
          "type": "module",
          "scripts": {
            "dev": "vite",
            "build": "vite build",
            "preview": "vite preview"
          },
          "devDependencies": {
            "vite": "^4.0.4"
          }
        }`,
    },
  },
  // 这是一个目录,src 是目录名
  src: {
    // 目录下会有 directory 的属性
    directory: {
      // 这是一个文件,叫 main.js
      'main.js': {
        // 文件下有 file 的属性
        file: {
          contents: `
            console.log('WebContainers says hello!')
          `,
        },
      },
    },
  },
};

await webContainerInstance.mount(files);

然后就可以通过 readFile 读取文件:

const file = await webContainerInstance.fs.readFile('/package.json');

目前 webContainer 的 fs 支持以下几种文件操作:

  • readFile:读取文件
  • readdir:读取目录
  • rm:删除文件
  • writeFile:写文件
  • mkdir:创建目录

运行进程

可以在 webContainer 中运行如 npm install 的命令:

webContainerInstance.spawn('npm', ['install']);

spawn 方法接受三个参数:

  • 字符串,为命令名称,例如 npm
  • 数组:命令的选项
  • 非必须,spawn 的参数(例如指定环境变量,禁止输出等)

安装依赖

以下是一个封装好的安装依赖的函数

async function installDependencies() {
  const installProcess = await webContainerInstance.spawn('npm', ['install']);
  return installProcess.exit;
}

读取进程的输出

调用 Spawn 函数返回 WebContainerProcess。它的 output 属性是一个可读流 readableStream ,它接收所有的输出,包括 stdout and stderr,下面代码可已经进程的输出,打印出来

const installProcess = await webContainerInstance.spawn('npm', ['install']);

installProcess.output.pipeTo(new WritableStream({
    write(data) {
      console.log(data);
    }
}));

运行 dev Server

有些命令可以启动 dev Server,例如 npm run start 启动一个 vite/express Server。

这时候,可以用过 on 监听到 server-ready 事件

async function startDevServer() {
  // 执行 `npm run start` 启动 Express app
  await webContainerInstance.spawn('npm', ['run', 'start']);

  // 等待 `server-ready` 事件
  webContainerInstance.on('server-ready', (port, url) => {
     // 通过这个 url,就能访问 server
     window.open(url)
  });
}

我们平时启动的 dev Server,会通过类似 http://localhost:8080 的方式进行访问,但如果在网页中运行 dev Server就不行了,因为由于安全限制,网页没有足够的权限绑定端口。

因此 webContainer 会提供一个 url,代替 http://localhost:8080 去访问,这也就是 server-ready 事件,会在回调参数中传 url 的原因

url 长这样:https://localhost5173-3ca0-2jv4wvy8--3111.local-corp.webcontainer.io/

!(webContainer)[/static/images/88_1.jpg]

这个请求实际上没有请求到外部,而是在 Service Worker 中直接返回了,通过这样的方式,达到了与平时访问 http://localhost:8080 一样的效果

总结

webContainer 适合交互式编码体验,可以用在生产级IDE,编程教程,下一代文档等应用上。目前虽然看起来功能十分有限,但这其实是一个很有意义的尝试,是一个从 0 到 1 的突破,尝试在浏览器端运行一个微型的操作系统,相信不久的未来,不仅仅是运行 nodejs,其他的语言,例如 python、Java 等等。

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:farmerlzj@163.com。 本站原创内容未经允许不得转载,或转载时需注明出处: 内容转载自: React前端网:https://qianduan.shop/blogs/detail/88

#webContainer#node

相关推荐

NodeJs发起https请求报错:certificate has expired

在egg中发起https请求时提示证书过期错误(certificate has expired)问题记录

Node定时任务怎么做

linux有crontab定时任务,那么在Node中,定时任务该如何实现?