阿里云 ESA 个人导航页

流星

根据@nanny的文章把外网访问搞定，就是导航页又点单调，给AI又迭代了几十个版本，现在可以后台编辑、分类，好用多了！分享给大家！
巧用阿里ESA，外网V4访问NAS，隐藏端口号，个人导航页全搞定
https://club.fnnas.com/forum.php?mod=viewthread&tid=49169
(出处: 飞牛私有云论坛 fnOS)

让AI改了十几个版本 感觉还行 你去试试看！！
内外网没法直接识别 我加了一个 开关
可以自己设置内外网地址 然后点开关切换

阿里云 ESA 个人导航页 (单文件 SSR 版)

这是一个基于阿里云边缘安全加速 (ESA) 的无服务器个人导航页项目。
所有功能（主页、后台、API）都整合在一个边缘函数中，无需配置 Pages，部署极其简单。

• 极速访问: 基于 ESA 边缘节点，全球加速。
• 服务端渲染 (SSR): 首屏加载快，SEO 友好。
• 在线管理: 内置管理后台，随时随地修改链接。
• 动态分类: 支持按分类（如 media, books）分组展示。

目录结构

• src/worker.js: 核心代码（包含 HTML 模板和业务逻辑）

部署指南

1. 准备工作

确保你已经开通了阿里云 ESA 服务，并且有一个可用的站点（域名）。

2. 配置边缘 KV (Edge KV)

1. 进入 ESA 控制台 -> 边缘计算 -> Edge KV。
2. 创建一个新的命名空间，例如命名为 nav_data（推荐使用仅小写英文字母、数字、下划线，避免空格和中文）。
3. 记下这个命名空间名称。
4. 注意命名空间要与函数配置保持一致，否则读取不到数据或密码。

3. 部署边缘函数 (Edge Routine)

1. 进入 ESA 控制台 -> 边缘计算 -> 边缘函数。
2. 创建一个新的函数，例如命名为 nav-ssr。
3. 进入代码编辑器，将本项目 src/worker.js 的内容完全覆盖进去。
4. 配置环境变量:
   • 添加环境变量 EDGEKV_NAMESPACE，值为你在 Edge KV 中创建的命名空间（如 nav_data）。不设置时，代码将使用默认命名空间 links_store。
   • 可选：添加环境变量 ADMIN_PASSWORD 作为后备密码（备用来源）。
5. 点击 保存并部署。

4. 配置路由 (关键步骤)

为了让整个网站生效，你需要将域名下的所有请求转发给这个函数。

1. 在 ESA 站点管理中，找到 边缘函数 -> 触发器。
2. 添加一个路由触发器：
   • 路由模式: nav.example.com/* (匹配所有路径)
   • 关联函数: 选择刚才部署的 nav-ssr。

5. 使用说明

1. 访问主页: 打开 https://nav.example.com/。
   • 初次访问会显示默认的示例数据（B站、腾讯视频等）。
2. 进入后台: 打开 https://nav.example.com/admin。
3. 管理链接:
   • 输入你设置的密码登录（密码来源见下文“密码设置与优先级”）。
   • 添加链接时，可以指定 分类 ID (例如 media, books, tools)，首页会自动按分类分组展示。
   • 点击“保存更改到服务器”以生效。

密码设置与注意事项

密码支持两种来源（有优先级）：

1. Edge KV 中的键 ADMIN_PASSWORD（优先）
2. 环境变量 ADMIN_PASSWORD
3. 若以上都未设置，则默认密码为 admin

如何通过 KV 设置密码：

• 在你创建的命名空间（如 nav_data）里新建键：Key=ADMIN_PASSWORD，Value=你的密码（例如 admin@2022!）
• 值请避免前后空格与换行；复制粘贴时注意不要带不可见字符
• 更新后可能存在边缘节点同步的短暂延迟，建议刷新后台页面重试

认证方式：

• 后端认证接口路径：/api/auth
• 请求头必须包含：Authorization: Bearer <你的密码>
• 管理后台会在登录时自动调用该接口进行校验

命名空间与函数配置的匹配：

• 代码会读取环境变量 EDGEKV_NAMESPACE 指定的命名空间；不设置时使用默认 links_store
• 如果你把密码写到另一个命名空间里，而函数仍指向默认命名空间，会导致密码“看起来不生效”
• 如需更改命名空间，建议优先通过环境变量 EDGEKV_NAMESPACE 指定，避免修改代码

常见问题与解决：

• 登录总是失败：检查命名空间是否一致；Key 名必须严格为 ADMIN_PASSWORD；值无多余空格或换行
• 输入过一次错误密码后仍失败：清除浏览器本地存储中的 esa_nav_token，重新登录
• 密码更新后不生效：等待片刻并刷新页面；确保更新的是正确命名空间

相关代码参考：

• 读取管理员密码逻辑：getAdminPassword
• 登录校验接口 /api/auth：fetch 路由
• 保存接口认证（需要 Authorization）：POST /api/links

故障排查

• 读取不到数据或密码: 检查 EDGEKV_NAMESPACE 是否与实际命名空间一致；或确认 KV 中 ADMIN_PASSWORD 是否写入在正确命名空间。
• 保存失败 (401): 检查当前使用的密码与 KV/环境变量一致；确认请求头包含 Authorization: Bearer <密码>；如曾经登陆错误，清除 esa_nav_token 后重试。

代码上传到github上了，自取
foxhound1227/esa_web

小王同学

阿里esa限速吗？

流星

小王同学 发表于 2026-1-8 15:58
阿里esa限速吗？

目前来看 可以跑满我的上行带宽

flashback

楼主你好。

跟着教程一步一步做，后面网站能访问了。

但是现在遇到两个问题

1，密码改不了

2，数据修改不了。

检查过 键值和数据，都没有换行和空格。

楼主请教下，这是哪里出现问题了？

流星

flashback 发表于 2026-1-12 18:55
楼主你好。
跟着教程一步一步做，后面网站能访问了。
但是现在遇到两个问题

命名空间与函数配置的匹配：

代码会读取环境变量 EDGEKV_NAMESPACE 指定的命名空间；不设置时使用默认 links_store
如果你把密码写到另一个命名空间里，而函数仍指向默认命名空间，会导致密码“看起来不生效”
如需更改命名空间，建议优先通过环境变量 EDGEKV_NAMESPACE 指定，避免修改代码


links_store 要替换成你自己的空间名

flashback

用默认的 空间名，可以了。

谢谢~!

有这个 导航页，方便多了。

流星

flashback 发表于 2026-1-13 16:13
用默认的 空间名，可以了。
谢谢~!
有这个 导航页，方便多了。

关键是 免费的 速度还快！

flashback

流星 发表于 2026-1-14 14:17
关键是 免费的 速度还快！

对了，有个建议。
希望能加上 内外网 判断就好了。
内网访问使用内网IP
外网访问使用外网IP
楼主，有时间的话，在折腾下呗。

流星

flashback 发表于 2026-1-14 22:59
对了，有个建议。
希望能加上 内外网 判断就好了。
内网访问使用内网IP

嗯 我问问AI 搞能不能弄一个出来！

流星

flashback 发表于 2026-1-14 22:59
对了，有个建议。
希望能加上 内外网 判断就好了。
内网访问使用内网IP

让AI改了十几个版本 感觉还行 你去试试看！！
内外网没法直接识别 当时我加了一个 开关
你可以自己设置内外网地址 然后点开关切换

flashback

流星 发表于 2026-1-20 17:55
让AI改了十几个版本 感觉还行 你去试试看！！
内外网没法直接识别 当时我加了一个 开关
你可以自己设置内 ...

好的，谢谢。
这就去更新。
===============================================
内外网是可以访问了，
但是得 手动 点才会切换，有点麻烦。
我之前写了一个 php 的脚本，
根据 当前访问的 网址 来判断
然后自动切换 内外网 ，你看看整合到你的代码里
实现 自动 切换。
用 abc.com 访问就用外网访问 nas服务
用 192.168.xxx，就自动切换到内网模式
===============================================
代码如下：

1. <?php
   
2. //自己修改的 内外网IP判断 2023.07.21
   
3. 
   
4. //匹配IP函数
   
5. function curl_get($url)
   
6. {
   
7.     $headerArray = ["Content-type:application/json;", "Accept:application/json"];
   
8.     $ch = curl_init();
   
9.     curl_setopt($ch, CURLOPT_URL, $url);
   
10.     curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    
11.     curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    
12.     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    
13.     curl_setopt($ch, CURLOPT_HTTPHEADER, $headerArray);
    
14.     return curl_exec($ch);
    
15. }
    
16. 
    
17. //匹配IP前三位数字，用于判断是否是内网
    
18. function get_ip_prefix($ip) {
    
19.     return implode('.', array_slice(explode('.', $ip), 0, 3));
    
20. }
    
21. 
    
22. try {
    
23.     $server_ip = "10.0.0";//定义服务器内网IP前三位数：10.0.0
    
24.     $lan = $_SERVER['REMOTE_ADDR']; //获取域名解析的IP
    
25.     $lan = get_ip_prefix($lan) != $server_ip; //判断访问者的IP是否是外网，如果是外网就返回 true
    
26.    
    
27.     $url = 'https://ifconfig.me/ip';//获取外网IP
    
28.     $server_ip = curl_get("$url");//处理匹配，返回外网IP
    
29.     $result = ['lan' => $lan, 'ip' => ['client' => $_SERVER['REMOTE_ADDR'], 'server' => $server_ip ]];//如果是 内网访问，返回 false，外网访问，返回 true
    
30. 
    
31. //下面代码是异常返回的
    
32. } catch (Exception $exception) {
    
33.     $result = ['lan' => false, 'ip' => ['client' => $_SERVER['REMOTE_ADDR'], 'server' => '']];
    
34. }
    
35. die(json_encode($result));

复制代码

流星

flashback 发表于 2026-1-20 19:28
好的，谢谢。
这就去更新。
===============================================

先来看看你的代码实现逻辑
客户端是否在内网： 它会检查访问该脚本的客户端的 IP 地址，判断其前三位是否是 10.0.0。
如果是 10.0.0.x 的 IP，它认为客户端是内网访问，返回 lan: false。
如果不是 10.0.0.x 的 IP，它认为客户端是外网访问，返回 lan: true。

现在导航页是在公网上 他是没办法读取到你的内网地址 他只能读取你的公网地址 所以没办法判断

flashback

流星 发表于 2026-1-20 20:35
先来看看你的代码实现逻辑
客户端是否在内网： 它会检查访问该脚本的客户端的 IP 地址，判断其前三位是否 ...

对哦，现在挂在外网。
这脚本不适用。。。
看来得使用别的方法才行。

流星

flashback 发表于 2026-1-21 13:33
对哦，现在挂在外网。
这脚本不适用。。。
看来得使用别的方法才行。

给你个最简单的方案
做2个一模一样的网站
一个放内网 一个放外网
然后内网的路由器上设置域名解析到你内网的页面上
然后内网页面用内网地址 外网也用外网地址 问题解决

flashback

流星 发表于 2026-1-21 16:37
给你个最简单的方案
做2个一模一样的网站
一个放内网 一个放外网

思路不错，谢谢啦。

=======================
对了，改版后，手机版没有分类了。
你试过了没？看看。

流星

flashback 发表于 2026-1-21 22:23
思路不错，谢谢啦。

=======================

让AI研究一下

流星

flashback 发表于 2026-1-21 22:23
思路不错，谢谢啦。

=======================

OK搞定

========================

Update: Mobile UI & Category Bar
Version: 2026-01-22

✨ 新增功能 (Features)
移动端横向分类栏 (Mobile Category Pills):
针对手机屏幕增加了顶部横向滚动分类栏。
解决了移动端侧边栏消失导致无法筛选应用的问题。
保持了与桌面端一致的分类状态同步。
🐛 修复 (Bug Fixes)
CSS 布局修复: 修复了移动端侧边栏意外显示导致的布局挤压问题。
HTML 结构优化: 清理了 worker.js 中重复的 DOM 结构。

流星

tbeebt

flashback 发表于 2026-1-13 16:13
用默认的 空间名，可以了。
谢谢~!
有这个 导航页，方便多了。

同样问题
bv 里面修改为默认吗？

flashback

流星 发表于 2026-1-22 14:50

biu的佛~！

flashback

青城留_y8S36 发表于 2026-1-22 16:41
同样问题
bv 里面修改为默认吗？

建立一个 links_store 的空间就可以了。

nanny

你这个做的比我漂亮多啦，带后台编辑功能。厉害。用的ESA edge KV收费不？

流星

nanny 发表于 2026-2-6 13:56
你这个做的比我漂亮多啦，带后台编辑功能。厉害。用的ESA edge KV收费不？

目前没用到收费的功能

李阳x

域名已经备案，开启国内加速，为啥我的下载速度只有 1MB，只比飞牛的中继连接快一点

流星

李阳x 发表于 2026-2-6 16:38
域名已经备案，开启国内加速，为啥我的下载速度只有 1MB，只比飞牛的中继连接快一点

你试试把DDNS的 二级域名改成 speedtest 试试看（不是你访问的域名是DDNS配置在你NAS上的域名）
比如https://speedtest.222333.xyz  这种
回来告诉我效果！

nanny

请问一下，ESA函数的环境变量在哪里配置？一直没找到过。方便说一下或者截图告知一下吗？

1. 进入 ESA 控制台 -> 边缘计算 -> 边缘函数。
2. 创建一个新的函数，例如命名为 nav-ssr。
3. 进入代码编辑器，将本项目 src/worker.js 的内容完全覆盖进去。
4. 配置环境变量:
   • 添加环境变量 EDGEKV_NAMESPACE，值为你在 Edge KV 中创建的命名空间（如 nav_data）。不设置时，代码将使用默认命名空间 links_store。
   • 可选：添加环境变量 ADMIN_PASSWORD 作为后备密码（备用来源）。
5. 点击 保存并部署。

nanny

还有“配置路由 (关键步骤)”也没找到入口，感觉我们用的不是同一个ESA函数和Pages？

流星

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=253035&ptid=50250][color=#999999]nanny 发表于 2026-2-10 15:32[/color][/url][/size] 请问一下，ESA函数的环境变量在哪里配置？一直没找到过。方便说一下或者截图告知一下吗？ 进入 ESA 控制台 ...[/quote]

你是说的这个吗？ 直接KV储存里面建一个空间就行了啊？

流星

nanny 发表于 2026-2-10 15:39
还有“配置路由 (关键步骤)”也没找到入口，感觉我们用的不是同一个ESA函数和Pages？
...

这个不需要管了 代码里面有了 对应上就可以了

chunxue

有ui的提示词吗大佬