Skip to content

从127.0.0.1到餐桌：让家养app更加便利

自从vibe coding导致app白菜价，已经摸鱼写了若干个自用app，美中不足只能 在本地使用。一些专门为自身定做的东西，比如随手记灵感，购物单，都希望能 在任意地方使用，127.0.0.1就无法满足了。于是干脆研究了一波怎么整合一下 所有的app并添加个服务器功能。由于这个非常受使用习惯影响，服务器搭建方 式也跟设备相关，就不写细节了，只记录个大概思路。

控制台：app统一入口

img

这里的应用分成两种

  1. 完整的网页应用，单独运行，已经占一个端口，这种情况把参数写成配置文件。 控制台读取参数，从入口的卡片连接到对应端口。
  2. 命令行工具。本来的构想是做个套壳，通过读取配置文件来跑任何工具。但 这样有很大安全隐患，即使实际操作我不可能去rm -rf下毒，还是不应该 这个安全口子。折衷的方案是每个工具都单独写一份从命令行转成网页应用 的套壳，反正ai写起来飞快。

准备工作

跟AI先聊一圈设计，出以下文档

  • 用户需求
  • 整体设计。不用写太细，越细越容易过时。只需要把敲定的重要决策写下来。
  • 任务，milestone。每次摸鱼就让ai去做一条任务。
  • agent.md，告诉ai：少废话，token省着用，不需要提供情绪价值，干活就行。

ai干活

我的体验是，基本款可以让mini，low effort写，因为整个框架并不复杂，但是 遇到需要debug,或者有啥龟毛的美化要求时，得切换成medium,好一点的模型。 一个例子是，我嫌某两个网页元素之间留白过多，结果小一点的模型原地打转找 不出来。

总之很快能无缝使用了。我直觉它把前端写成了shi山，但我也不懂Rust，就忍 了。

从127到192

本地测试好之后，下一步是让局域网内都可以访问。用的方案是caddy+mkcert

  • 服务器ip生成本地证书，证书发给客户端设备
  • 在客户端设备上信任mkcert根证书
  • caddy通过https提供访问权限

这部分按部就班即可，重点是caddy的配置文件。

从192到外网

使用wireguard（VPN） + nftables（防火墙）

硬需求：网络供应商需要提供外网ip。

开放一个公网UDP端口给wireguard专用，所有的传输都通过它。

远程设备->wireguard VPN->内网->控制台->各式应用。防火墙的功用是做一个 双保险，对来自于其它设备的请求进行默认拒绝。

防火墙允许：

  • 已建立的连接
  • wireguard端口
  • VPN虚拟网卡流量
  • 局域网

阻拦：

  • 其它所有公网入站连接

手机上的操作是：做的事是装一个wireguard app,扫二维码，开vpn,对家用服务 器的访问得在这个vpn下。关掉wifi,打开vnp,如果测试成功，就说明能在外网访 问。

例图

电脑端

img

img

img

手机上：

img