自动部署

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

API 密钥

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

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

开始使用

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

npx -y rth-host-helper@latest init

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

完成配置后，在项目的根目录下执行 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。
    • 这个参数必须使用相对路径，不能使用绝对路径。任何以 / 开头的路径都是绝对路径。在自动部署时，相对路径是相对于仓库根目录的。