Skip to content

自动部署

自动部署功能支持一键将本地前端代码项目部署至热铁盒网页托管。您既可以从本地发起部署,也可以在您将代码推送至 GitHub、GitLab 或 Gitee 时,自动完成网站的部署。这使您可以使用您喜欢的代码编辑器、Git 以及任何现代前端工具和框架(如 npm、React、Vue 等),免去了手动在网页端上传文件的繁琐操作。

别害怕

只需执行一行命令,配置向导将一步步引导您完成设置流程,非常简单。

API 密钥

在开始配置之前,您需要一个 API 密钥。请按照以下步骤获取:

  1. 前往热铁盒网页托管管理页面,点击右上角菜单中的「API 密钥」选项。
  2. 点击「新密钥」按钮,生成一个 API 密钥。
  3. 将生成的 API 密钥复制到剪贴板(密钥只会显示一次,请务必妥善保存)。
  4. 请注意,API 密钥相当于您的密码,切勿泄露给他人。

开始使用

环境准备

自动部署脚本基于 Node.js v22 开发。如果您没有安装过 Node.js,或当前版本较旧,可前往 Node.js 官网 下载并安装最新的 LTS 版本。

我们提供了一款工具,可以自动为现有的前端项目配置自动部署。首先,在终端中使用 cd 命令进入项目的根目录,然后执行以下命令:

powershell
$f=New-TemporaryFile; iwr 'https://host.retiehe.com/cli' -OutFile $f; node $f --init; rm $f -Force
cmd
powershell -c "$f=New-TemporaryFile; iwr https://host.retiehe.com/cli -OutFile $f; node $f --init; rm $f -Force"
bash
f=$(mktemp); trap 'rm -f $f' EXIT; curl -fSL https://host.retiehe.com/cli -o $f && node $f --init

接下来,根据终端中的提示完成操作即可,此工具会引导您完成自动部署的配置流程。

预览配置向导流程
Retinbox Web Hosting CLI
? Select a language: (Use arrow keys)
  English
❯ 简体中文
  繁體中文

当前目录: C:\Users\...
? 这是您的项目所在的目录吗? (Y/n) Yes

? 输入您的 API 密钥:

正在获取您的网站列表...
完成。
? 选择要部署的网站:
  example
❯ 创建新网站
(Use arrow keys to reveal more choices)

? 您的新网站要使用哪种类型的域名? (Use arrow keys)
❯ 热铁盒的免费域名
  我自己的域名

? 输入新域名:

? 您的网站是否需要构建才能部署? (Use arrow keys)
❯ 是,它使用像 React 或 Vue 这样的框架。
  不,它是原生 HTML/CSS/JS。

? 输入构建命令: (npm run build)

? 输入要上传的目录路径: (dist)

? 您想在推送到 Git 时自动部署吗? (Y/n) Yes

? 您使用的是哪个 Git 平台? (Use arrow keys)
❯ GitHub
  GitLab
  Gitee

您需要在 GitHub 上设置环境变量 "RTH_API_KEY"。
您现在可以通过执行 "npm run deploy" 来部署您的网站。

完成配置后,在项目的根目录下执行 npm run deploy 命令即可一键部署网站。

环境变量

API 密钥会存储在环境变量中。自动配置工具会在您的项目中的 .env 文件中添加一个名为 RTH_API_KEY 的环墋变量。请不要将 .env 文件提交到 Git,以免泄露您的 API 密钥。

如果您想在推送到 Git 时自动部署,您需要在您使用的 Git 平台上设置一个名为 RTH_API_KEY 的环境变量。具体步骤如下:

  • GitHub:

    1. 打开仓库设置页面,依次点击「Secrets and variables」>「Actions」,然后点击「New repository secret」。
    2. 在「Name」字段中输入 RTH_API_KEY,在「Secret」字段中粘贴您的 API 密钥,最后点击「Add secret」。
  • GitLab:

    1. 打开项目设置页面,依次点击「CI/CD」>「变量」,然后点击「添加变量」。
    2. 在「键」字段中输入 RTH_API_KEY,在「值」字段中粘贴您的 API 密钥,最后点击「添加变量」。
  • Gitee:

    1. 打开项目页面,点击「流水线」标签页并选择「开通 Gitee Go」按钮。若提示创建默认流水线,请选择「不创建」。
    2. 接着,在「流水线」>「通用变量」页面点击「添加变量」。
    3. 在「变量名称」字段中输入 RTH_API_KEY,类型选择「文本」,在「默认值」字段粘贴您的 API 密钥,然后点击「确认」。

参数说明

若您计划手动编辑参数,以下内容可能会对您有所帮助,其他情况下可忽略此部分。

参数说明
  • --site:要部署的网站域名。

    • 如果您使用的是热铁盒提供的域名,那么这个参数是域名里的子域名部分。例如,如果您的域名是 example.rth1.xyz,那么这个参数的值应该是 example
    • 如果您使用的是自己的域名,那么这个参数的值就是您的完整域名。
  • --build:构建命令。这个命令会在部署之前执行。

    • 如果您的网站是纯 HTML 的原生页面,不需要构建,那么您可以忽略这个参数。
    • 如果您的网站是 React 或 Vue 等现代前端框架构建的,那么这个参数是您在 package.json 中的 scripts 字段里的构建命令名称。例如,如果您通过 npm run build 构建您的网站,那么这个参数的值就是 build
    • 如果定义了 build 参数,程序会先自动识别您使用的包管理器(npm、yarn、pnpm 或 bun),然后执行相应的依赖项安装命令(npm install)。接着,会运行指定的构建命令。如果构建命令执行失败,部署会被取消。
  • --outdir:构建输出目录。这个目录会被上传到热铁盒网页托管。

    • 如果您的网站是纯 HTML 的原生页面,那么这个参数是您的网站文件夹的路径。如果您想上传仓库根目录下的所有文件,那么您可以将这个参数的值设置为一个点 .,表示当前目录。
    • 如果您的网站是 React 或 Vue 等现代前端框架构建的,那么这个参数是构建命令生成的文件夹的路径。例如,如果您的构建命令生成的文件夹是 dist,那么这个参数的值就是 dist
    • 这个参数必须使用相对路径,不能使用绝对路径。任何以 / 开头的路径都是绝对路径。在自动部署时,相对路径是相对于仓库根目录的。