![为主域名添加子目录应用（2） 头图](/static/img/388229b28c2fa4b615b0f63a53784fc7.post-12-subdirectory-apps-2.webp)

一个主域名下面挂多个小工具，路径转发和资源路径最容易打架。这篇继续整理子目录应用的多工具方案，让 /tool-a、/tool-b 这种入口能规整地跑起来。



这个方案的核心是利用 Nginx Proxy Manager (NPM) 强大的路径转发和重写功能，将一个子目录（如 `/my-tool`）映射到一个“工具箱”主页，并能正确地分发到该主页下的各个子工具页面。

-----

# 1\. 核心思路：中心辐射型文件结构

我们不再将所有代码放在一个 `index.html` 文件中，而是创建一个“中心辐射型”的目录结构。

  * **中心 (Hub):** 一个 `index.html` 文件，作为工具箱的主页（卡片选择界面）。
  * **辐射 (Spokes):** 每一个工具都存放在自己的子文件夹中。

# 2\. 步骤一：创建文件结构

在服务器上（例如宝塔面板的 `/www/wwwroot/` 目录下），创建你的工具箱主文件夹，并按以下结构组织文件：

```
/www/wwwroot/my-toolbox/
    |
    ├── index.html           <-- (这是“中心”：工具箱的主页)
    |
    ├── tool-a/              <-- (辐射1：工具A)
    │   └── index.html       <-- (工具A的HTML/JS/CSS代码)
    |
    ├── tool-b/              <-- (辐射2：工具B)
    │   └── index.html       <-- (工具B的HTML/JS/CSS代码)
    |
    └── ...                  <-- (未来可添加更多工具文件夹)
```

# 3\. 步骤二：编写“中心”主页 (index.html)

这是 `my-toolbox/index.html` 文件的关键部分。你需要使用**相对路径**来链接到你的各个“辐射”工具。

```html
<body>
    <main>
        <div class="grid ...">

            <a href="./tool-a/" class="tool-card ...">
                <h2>工具A (FinalShell)</h2>
                <p>这是工具A的描述...</p>
            </a>

            <a href="./tool-b/" class="tool-card ...">
                <h2>工具B (MD-Replace)</h2>
                <p>这是工具B的描述...</p>
            </a>
            
        </div>
    </main>
</body>
```

  * **关键点**：链接 `href` 的值是 `./tool-a/` 和 `./tool-b/`。
  * `./` 代表“当前目录”。
  * 末尾的 `/` 很重要，它告诉浏览器去访问一个目录，而不是一个文件。

# 4\. 步骤三：启动 Docker 容器

使用一个 Nginx 容器来托管**整个** `my-toolbox` 文件夹。

```bash
docker run -d \
  --name my-toolbox-server \
  -p 5001:80 \
  -v /www/wwwroot/my-toolbox:/usr/share/nginx/html:ro \
  nginx:alpine
```

  * `-v`：将我们包含所有文件（主页 + 子工具）的 `my-toolbox` 文件夹，挂载到 Nginx 的根目录。
  * `-p`：将 Nginx 容器的 `80` 端口映射到服务器的 `5001` 端口。

# 5\. 步骤四：配置 NPM (关键)

这是让所有路径（主页和子工具）都能正确访问的“魔法”所在。

1.  登录 NPM，编辑你的主域名（例如 `zym588.me`）。

2.  进入 **"Custom locations"** 标签页。

3.  **删除**所有旧的 `/my-tool` 规则（如果存在）。

4.  点击 **"Add location"**，创建**唯一**的一条新规则：

      * **`Define location`**:
        `^~ /my-tool/`
        *(关键：`^~` 代表高优先级匹配，末尾的 `/` 至关重要)*

      * **`Forward Hostname / IP`**:
        `127.0.0.1`

      * **`Forward Port`**:
        `5001` *(指向步骤三中 Docker 容器的端口)*

      * **点击 齿轮(⚙️)图标**，进入 **"Custom Nginx Configuration"**：

      * **粘贴**以下这**唯一**的一行 `rewrite` 规则：

        ```nginx
        rewrite ^/my-tool/(.*)$ /$1 break;
        ```

5.  **保存**。

-----

### 为什么这样可行？（工作原理解析）

配置的这条规则，通过 `rewrite` 巧妙地处理了所有情况：

1.  **访问主页 ( .../my-tool )**：

      * Nginx 会自动在 URL 末尾补全斜杠，重定向到 `.../my-tool/`。

2.  **访问主页 ( .../my-tool/ )**：

      * `location` 匹配 `^~ /my-tool/`。
      * `rewrite` 规则被触发，`^/my-tool/(.*)$` 匹配成功，此时 `(.*)` 捕获的内容是**空字符串**。
      * URL 被重写为 `/$1`，即 `/`。
      * NPM 将这个 `/` 请求转发给 `127.0.0.1:5001`。
      * Docker 容器内的 Nginx 收到 `/` 请求，返回 `/usr/share/nginx/html/index.html`（**工具箱主页**）。**成功**。

3.  **点击卡片 ( .../my-tool/tool-a/ )**：

      * `location` 匹配 `^~ /my-tool/`。
      * `rewrite` 规则被触发，此时 `(.*)` 捕获的内容是 `tool-a/`。
      * URL 被重写为 `/$1`，即 `/tool-a/`。
      * NPM 将这个 `/tool-a/` 请求转发给 `127.0.0.1:5001`。
      * Docker 容器内的 Nginx 收到 `/tool-a/` 请求，返回 `/usr/share/nginx/html/tool-a/index.html`（**工具A页面**）。**成功**。

通过这个方案，你只需维护一个 Docker 容器和一个 NPM `location` 规则，就可以无限扩展你的工具箱。

为主域名添加子目录应用（2）

![为主域名添加子目录应用 头图](/static/img/5eb53adb2f94c49f27ca12ddfbffd7dd.post-11-subdirectory-apps.webp)

想发布一个小 HTML 工具，又不想再给 NAS 单独穿透一次。这里用子目录路径把工具挂到主域名下面，核心是 NPM 转发和路径剥离。



# 一、当前环境 


1.  **云服务器**：已安装**宝塔面板**。
2.  **反向代理**：在云服务器使用 Docker 容器安装了 **Nginx Proxy Manager (NPM)**，作为所有服务的公网入口，管理域名和 SSL 证书。
3.  **服务**：大部分服务（如博客）运行在**本地NAS**上，通过**内网穿透**连接到云服务器上的 NPM。
4.  **关键冲突**：为确保 NPM 的 Docker 容器能监听并占用 `80` (HTTP) 和 `443` (HTTPS) 端口，宝塔面板**自带的 Nginx 服务**保持在“**已关闭**”状态。

**目标 (The Goal):**
现在有一个新的 HTML 静态小工具，需要通过子目录路径（例如 `www.your-domain.com/my-tool`）来发布和访问，同时避免在 NAS 上配置复杂的内网穿透。

-----

# 二、核心思路：隔离、挂载与转发

既然宝塔的 Nginx 无法启动（端口冲突），而 NAS 上的服务链路又太长（配置麻烦），最佳方案是：

**在云服务器上，启动一个全新的、专用的、独立的 Nginx 容器，专门用于托管这个 HTML 小工具。**

这个新容器将：

1.  **不**占用 `80` 或 `443` 端口，而是监听一个“内部端口”（例如 `5001`），因此**不会**与 NPM 容器冲突。
2.  通过 Docker 的“卷挂载”功能，直接读取存放在服务器上的 HTML 文件。
3.  最后，配置 NPM，将 `.../my-tool` 路径的流量转发到本地的 `127.0.0.1:5001`。

此方案可将新工具与现有复杂环境完美隔离开，实现简单、干净、可复制的部署，且不干扰任何现有服务。

-----

# 三、详细操作步骤

## 第一步：在宝塔面板准备 HTML 文件

1.  **登录宝塔面板**。
2.  点击左侧菜单的 **“文件”**。
3.  导航到一个合适的位置，例如 `/www/wwwroot/` 目录。
4.  点击 **“新建目录”**，创建一个专门存放小工具的文件夹，命名为 `my-tool`。（完整路径：`/www/wwwroot/my-tool`）
5.  进入这个新建的 `/www/wwwroot/my-tool` 文件夹。
6.  点击 **“上传”** 按钮，将 HTML 小工具文件（以及相关的 CSS/JS 文件夹）上传到此目录。
7.  **【关键步骤】**：Nginx 这类网页服务器，默认会在目录中寻找 `index.html` 作为首页文件。为实现自动加载，必须确保主 HTML 文件被**重命名为 `index.html`**。


![PixPin_2025-11-02_20-42-48.png](/static/img/c9ce6d18413096e9b93d4c8cc8e0ffb0.PixPin_2025-11-02_20-42-48.webp)

## 第二步：用Docker挂载静态HTML文件

此步骤将启动一个 Nginx 服务，并使其读取第一步中准备的文件。

1.  在宝塔面板，点击左侧菜单的 **“终端”** (如果找不到，请去“软件商店”安装“宝塔SSH终端”)。

2.  登录终端后，**复制** 下面这行命令，**粘贴** 到终端中，然后按回车键：

    ```bash
    docker run -d --name my-tool-server -p 5001:80 -v /www/wwwroot/my-tool:/usr/share/nginx/html:ro nginx:alpine
    ```

3.  **命令拆解：**

      * `docker run -d`：在后台（`-d` 即 detached）运行一个新容器。
      * `--name my-tool-server`：为容器指定一个名称，方便后续管理（如 `docker stop my-tool-server`）。
      * `-p 5001:80`：**端口映射**。将**云服务器的 `5001` 端口**连接到**容器内部的 `80` 端口**。Nginx 默认在容器里监听 `80` 端口。
      * `-v /www/wwwroot/my-tool:/usr/share/nginx/html:ro`：**卷挂载**。这是操作的**精髓**。它将服务器上的文件夹（`/www/wwwroot/my-tool`）“链接”到 Nginx 容器内部的默认网站根目录（`/usr/share/nginx/html`）。
      * `:ro`：(read-only) 这是一个安全设置，表示容器只能“只读”文件，不能修改。
      * `nginx:alpine`：指定使用的 Docker 镜像。`nginx:alpine` 是一个官方的、超轻量级的 Nginx 镜像，专为静态文件托管而生，体积小、启动快。
      
执行完毕后，小工具已经在云服务器的 `127.0.0.1:5001` 端口上成功运行了。

## 第三步：配置 NPM 进行流量转发

最后一步，是配置 NPM，将特定路径的公开访问流量转发到新启动的内部服务上。

1.  **登录云服务器上的 Nginx Proxy Manager (NPM) 面板**。

2.  点击 **Hosts** \> **Proxy Hosts**。  

![PixPin_2025-11-02_20-47-55.png](/static/img/85ebdd0c906ab994a865c7275101147b.PixPin_2025-11-02_20-47-55.webp)

3.  找到要使用的主域名（例如 `www.zym588.me`），点击右侧的“三点”菜单，选择 **Edit**。

![PixPin_2025-11-02_20-48-31.png](/static/img/cf3a2fbcb61f612d2b2ccd45fe3c719f.PixPin_2025-11-02_20-48-31.webp)

4.  在弹出的窗口中，选择 **"Custom locations"** 标签页。

5.  点击 **"Add location"** 按钮。



6.  **填写 Location 路由信息**：

      * **Define location:** `^~ /my-tool`
          * *(`^~` 是一个 Nginx 匹配修饰符，意为“高优先级匹配”。它指示 Nginx，一旦 URL 以 `/my-tool` 开头，就**立即使用此规则**，不再尝试匹配其他更通用的规则（例如已有的、指向 NAS 的 `/` 规则），确保新规则被优先处理。)*
      * **Scheme:** `http`
          * *(因为新 Nginx 容器在内部监听的是 HTTP 协议。)*
      * **Forward Hostname / IP:** `127.0.0.1`
          * *(因为新 Nginx 容器和 NPM 运行在**同一台**云服务器上，`127.0.0.1` 即“本机地址”。)*
      * **Forward Port:** `5001`
          * *(指向第二步中 `-p` 映射的那个服务器端口。)*
          
![PixPin_2025-11-02_20-48-56.png](/static/img/a11e44e2479d25e817db9c1fe53e3a2a.PixPin_2025-11-02_20-48-56.webp)


7.  **【关键】配置路径剥离 (Path Stripping)**：

      * 访客访问的是 `.../my-tool/index.html`。如果直接转发，`5001` 端口的 Nginx 会试图在 `/usr/share/nginx/html/my-tool/index.html` 里找文件，这会失败（因为挂载的根目录里没有 `my-tool` 这一层）。

      * 必须在转发前“剥掉” URL 里的 `/my-tool` 部分。

      * 点击 `^~ /my-tool` 输入框右侧的 **齿轮 (⚙️) 图标**。

      * 在弹出的 **"Custom Nginx Configuration"** 文本框中，**粘贴** 以下两行代码：

        ```nginx
        rewrite ^/my-tool/(.*)$ /$1 break;
        rewrite ^/my-tool$ / break;
        ```

      * **代码详解**：

          * `rewrite ^/my-tool/(.*)$ /$1 break;`：处理所有带子路径的请求（如 `.../my-tool/style.css`）。`  (.*) ` 会“捕获” `/my-tool/` 后面的所有内容（即 `style.css`），并存为变量 `$1`。Nginx 将 URL 重写为 `/$1`（即 `/style.css`），`break` 停止后续重写，并将这个新 URL 转发出去。
          * `rewrite ^/my-tool$ / break;`：处理只输入 `.../my-tool`（没有末尾斜杠）的情况，将其重写为 `/`，Nginx 收到 `/` 后会自动寻找 `index.html`。



      * 点击 **Save** 保存此自定义配置。

<img src='https://blog.zym588.me/static/img/86b50144bdc49ea0b224e0a0eca4e9c8.PixPin_2025-11-02_20-51-35.webp' width='500' height='auto' style="display: block; margin: 0 auto;" />
8.  点击右下角绿色的 **Save** 按钮，保存整个主机的配置。



-----

# 四、验证成果与未来扩展

## 验证

回到 NPM 的 Proxy Hosts 列表，`www.zym588.me` 的状态**应该立即变为了 "Online"** （绿色）。NPM 会定期进行健康检查，此时它能成功连接到 `127.0.0.1:5001`。

*如果状态未变绿*，可尝试刷新 NPM 页面。如果仍有问题，请返回宝塔终端，运行 `docker ps` 命令，确保名为 `my-tool-server` 的容器正处于 `RUNNING` 状态。

最后，打开浏览器，在隐身模式下访问 `http://www.zym588.me/my-tool`，即可看到 HTML 小工具的页面。

## 如何扩展：添加更多小工具？

此方法的可复制性很强。如果以后需要添加 `tool-B`、`tool-C`...

1.  **宝塔**：创建新目录 `/www/wwwroot/tool-B`，上传 `tool-B` 的 `index.html`。
2.  **终端**：运行一行**新**的 `docker run` 命令，使用一个**新端口**（如 `5002`）、**新名字**和**新目录**：
    ```bash
    docker run -d --name tool-B-server -p 5002:80 -v /www/wwwroot/tool-B:/usr/share/nginx/html:ro nginx:alpine
    ```
3.  **NPM**：在 `www.zym588.me` 里**再加一个 Location**，指向 `^~ /tool-B`，转发到 `127.0.0.1:5002`，并配置**对应**的 `rewrite` 规则 (只需将 `my-tool` 替换为 `tool-B`)。

**建议**：当此类服务超过两三个时，管理多条 `docker run` 命令会变得繁琐。届时，最佳实践是学习使用 `docker-compose.yml` 文件。它允许使用一个“清单”文件来统一定义和管理所有服务，实现一键启动、停止和更新。

为主域名添加子目录应用

![极空间部署v2raya 头图](/static/img/0ee387510efeeb142fb3066dde329bf9.post-10-v2raya.webp)

极空间上跑 v2raya，目标不是炫技，而是把透明代理和路由规则做成一个好管理的网页面板。这里记录 Docker 部署和常见配置入口。



本教程详细记录在极空间 Docker 环境中部署 v2raya 的完整步骤。
# 一、下载镜像与配置容器

首先，需要从 Docker 仓库拉取 v2raya 的镜像文件，并完成容器的创建和配置。

打开极空间的 Docker 管理界面，进入“镜像仓库”标签页。

在搜索框中输入 v2raya（注意不是 v2ray2）。

在搜索结果中找到 v2raya/v2raya 镜像，点击“添加”并等待镜像下载完成。

<img src="/static/img/7466f988a8ebe9e162402aaa77f1c5b4.PixPin_2025-11-02_13-23-43.webp" width="500" height="auto" />

镜像下载完成后，进入“容器”标签页，点击“添加容器”，开始配置容器参数。

## 特权模式

勾选“启用特权模式”（Privileged）。v2raya 需要此权限来修改系统的网络规则以实现透明代理。

<img src='/static/img/5d4e081ca56bd1c56b18725ce412cf94.PixPin_2025-11-02_13-24-42.webp' width='500' height='auto' />

## 目录映射（卷）
这是关键一步，用于持久化 v2raya 的配置，防止容器更新或重建后数据丢失。

添加一条规则：将一个本地的配置目录（例如 /docker/v2raya）映射到容器的 /etc/v2raya 目录。


<img src='/static/img/75ade6b589da3d7d2d3796d8e847a77c.PixPin_2025-11-02_13-24-54.webp' width='500' height='auto' />

## 设置网络模式

网络模式：在网络选项中，可以选择“Host”模式。Host 模式会使容器直接共享宿主机的网络，性能较好，此时 2017 端口将直接被容器占用。

<img src='/static/img/4a52122e54ee188fb6ed8d11c1065f77.PixPin_2025-11-02_13-25-03.webp' width='500' height='auto' />

## 负载均衡

新版本的docker镜像默认使用xray作为引擎，如果需要负载均衡请在环境变量指定`V2RAYA_V2RAY_BIN=/usr/local/bin/v2ray`

<img src='/static/img/35bd52ee77d185721245757abf9cce3a.PixPin_2025-11-02_13-25-18.webp' width='500' height='auto' />

# 二、访问面板与导入配置

容器成功启动后，即可通过浏览器访问 v2raya 的 Web 管理面板进行后续配置。

在浏览器中打开 http://[极空间的IP地址]:2017。

首次访问会要求设置新的管理员用户名和密码，请设置并妥善保管。

## 1.配置代理模式 
登录面板后，v2raya 默认可能会启用“透明代理”（Transparent Proxy），这会接管所有通过 NAS 的网络流量。

如果不需要让 NAS 上的所有应用都通过代理（例如，只是想手动为特定设备配置），可以根据下图所示，在设置中将其关闭，后续按需配置。

<img src='/static/img/f0c96d65c80bba8ea0a17cacd972219d.PixPin_2025-11-02_13-47-23.webp' width='500' height='auto' />

（之后在需要的服务中设置对应的端口）

<img src='/static/img/3a58aae10bf2760dd8f3b3169f7402ef.PixPin_2025-11-02_13-45-23.webp' width='500' height='auto' />

## 2. 导入订阅链接和启动节点

接着，在“订阅”或“导入”页面，将准备好的订阅链接粘贴到输入框中，点击导入。

订阅更新完成后，回到主页或节点列表，此时会显示所有可用的节点。

选择一个需要的节点，然后点击左上角的“运行”或“启动”按钮。

<img src='/static/img/cbdc4bdbc39ae310a0f773824d4be872.PixPin_2025-11-02_13-48-16.webp' width='500' height='auto' />

极空间部署v2raya

![米家极客版案例 头图](/static/img/671ff5f29e55f1711a2f8c0a88bfa76a.post-09-mijia.webp)

米家极客版的玩法很多，之前写过详细教程后来丢了有点可惜。这篇先放大佬教程和几个实际案例，作为后面继续折腾智能家居的索引。



:::tip{title="枋柚梓的博客"}
https://inkss.cn/post/78a787b3/
:::
后面附上几个实际案例：


# 一、客厅观影模式设计
![PixPin_2025-11-01_23-23-31.png](/static/img/710045d0149e5c2dcd325544dfedfe05.PixPin_2025-11-01_23-23-31.webp)
# 二、早上问好案例
![PixPin_2025-11-01_23-25-15.png](/static/img/124b1c285d0bc948217d9832aaf63917.PixPin_2025-11-01_23-25-15.webp)
# 三、自动询问等待唤醒案例
![PixPin_2025-11-01_23-25-55.png](/static/img/e8b143a3a36011ae4de3316a7f4813c7.PixPin_2025-11-01_23-25-55.webp)

米家极客版案例

![docker部署网页红警 头图](/static/img/ca92cf72ce5d47dda2b3e9d13b6f57a0.post-08-web-redalert.webp)

网页红警属于那种一看到就想开一局的童年回忆。这里直接用 Docker Compose 部署一版，让红警可以在浏览器里随时打开。



```js
#version: '3'
name: red_alert
services:
  red_alert:
    container_name: red_alert
    image: swr.cn-north-4.myhuaweicloud.com/firfe/red_alert:0.77.0
    network_mode: bridge
    restart: always
    logging:
      options:
        max-size: 1m
        max-file: '1' #没有持久化的功能，所有数据都在浏览器里面，这里顺便限制下日志大小
    ports:
      - 5157:5157 #自定义端口访问
    # 指定端口
    # command: ["-p", "自定义端口"]
```

浏览器打开ip:5157访问，注意下图的最下方，把下方的地址复制到导入地址栏即可，这个这是作者打包到镜像里的，具体地址是变化的。如果是局域网加载会很快，如果是外网的话，要看你内网穿透服务器的速度，需要稍微等一下，但是比原地址部署到github肯定要快多了。

![PixPin_2025-11-01_22-59-31.png](/static/img/cadd78eb01cbe17335b3c9b44eef3aeb.PixPin_2025-11-01_22-59-31.webp)