使用终端

在热铁盒网页托管,我们提供了「终端」功能,这使热铁盒网页托管能够连接到您的设备的本地终端,并与其协同工作,由此实现了对 npm、React、Vue 等现代前端工具和框架的支持。您可以在 Windows、macOS 和 Linux 系统上使用此功能。此功能暂不支持手机等移动设备。

Windows 用户

虽然您可以直接在 Windows 上安装热铁盒网页托管助手,但是我们建议您使用 Windows 的 Linux 子系统(WSL)来安装,这比直接在 Windows 上安装依赖项更简单,遇到的问题也更少。

如果您使用的是 Windows 8.1 或更早版本,或者您的 Windows 10 版本低于 1903,那么您无法使用 WSL。在这种情况下,您可以通过 Docker 来运行热铁盒网页托管助手。

请阅读微软的官方文档open in new window来了解如何安装 WSL。安装完 WSL 后,请在自带的 Microsoft Store 应用商店中搜索并安装「Ubuntu」,然后打开「Ubuntu」并根据指示完成用户名和密码的设置。您也可以选择其他 Linux 发行版,但是我们下文的命令是基于 Ubuntu 的。

安装依赖项

打开「Ubuntu」,在终端中执行以下命令来安装热铁盒网页托管助手所需的依赖项。

sudo apt update
sudo apt install -y make python-is-python3 build-essential nodejs npm

由于 npm 默认的镜像源在国外,从中国大陆访问可能会比较缓慢。建议您执行下面的这行命令将 npm 的镜像源设置为国内的镜像源。

npm config set registry https://registry.npmmirror.com

接下来,执行以下命令来更新 Node.js 和 npm 到最新版本。

sudo npm install -g n
sudo n latest
sudo npm install -g npm@latest

如果您使用的是 macOS,您可以到 Node.js 官网open in new window 下载并安装 Node.js,然后前往 Mac App Store 下载并安装 Xcode 来获得所需的依赖项。

安装热铁盒网页托管助手

打开 Ubuntu 终端,输入下面的这行命令,然后按回车键即可安装或更新热铁盒网页托管助手。

sudo npm install -g rth-host-helper@latest

启动热铁盒网页托管助手

在 Ubuntu 终端中执行下面的这行命令来启动热铁盒网页托管助手。

rth-host-helper

启动后,您就可以通过在热铁盒网页托管的界面上点击「终端」的图标按钮来使用终端了。

您可以在终端中执行 npm install ... 来安装依赖,执行 npm run ... 来启动开发服务器或编译。

在 Docker 中使用

如果您安装失败,或者如果您不想安装依赖项,您可以使用我们提供的 Docker 镜像。您可以在终端中执行下面的这行命令来启动热铁盒网页托管助手的 Docker 容器:

docker run -p 3000:3000 -p 4173-4183:4173-4183 -p 5173-5183:5173-5183 -p 8880:8880 shangzheny/rth-host-helper

限制和解决方案

目前暂不支持使用第三方工具来创建项目。我们强烈建议您使用我们的官方模板(点此下载)open in new window来开始编写基于 React 或 Vue 的网站。在热铁盒网页托管的界面上右键您的网站名称,点击「导入」,即可导入模板。

目前暂不支持通过 import 语句导入图片和其他非文本文件。您可以将这些文件放在 public 文件夹中,然后使用以 /public/ 开头的路径调用。例如:

<img src="/public/sky.jpg" alt="天空" />

这些非文本文件在本地开发服务器中可能无法正常显示,但是在发布到互联网的生产版本中将是可以正常显示的。

工作原理

我们针对 Viteopen in new window 进行了优化。启动开发服务器的命令、编译命令和编译输出目录都是以 Vite 的默认值为准的。

在热铁盒网页托管界面上点击「终端」图标按钮后,程序会自动检测项目中是否有 package.json 文件。如果存在,它会执行 npm install 命令来安装所需的依赖项。接下来,程序会检查 package.json 文件中是否定义了 dev 命令。如果存在,将执行 npm run dev 命令;如果不存在,程序会检查是否定义了 start 命令。如果存在,将执行 npm start 命令。

程序会将热铁盒网页托管上的文本文件临时保存到本地的临时目录中,以实现编译等功能。当您在热铁盒网页托管的页面上修改任何文件后,本地副本将自动同步更新。然而,如果您在本地修改了文件,热铁盒网页托管上的文件不会同步更新。因此,请务必在热铁盒网页托管的界面上进行任何修改,不要手动更改这些本地临时文件。

如果在启动「终端」时,项目中存在 package.json 文件,那么程序会监听 package.json 文件的更变。如果您通过 npm install 命令安装了依赖,热铁盒网页托管上的 package.json 也会同步更新。

当您在热铁盒网页托管的菜单中点击「编译」时,程序将执行 npm run build,并在编译完成后将 dist 文件夹中的文件自动导入热铁盒网页托管。如果您用的是 Vite,您也可以直接在终端执行 npm run build,程序能够检测到其何时编译完成。对于其他前端工具链,您需要将编译输出目录设置为 dist,且只能从热铁盒网页托管的菜单中点击「编译」。

当有人访问您的网站时,如果您的项目中存在 package.json 文件,程序会优先在 dist 文件夹中寻找请求的文件。如果没找到,程序会在 public 文件夹中继续寻找。如果仍然没找到,程序会把网站当做原生项目来渲染。