行走编程：把你的 Mac 变成一台随身 AI 开发工作站

前几个月，我发现自己的编程习惯正在发生变化。

以前写代码的时候，我必须坐在电脑前：

text 复制代码

打开 IDE
敲代码
调试
提交

开发工作和电脑被牢牢绑定在一起。

但 AI 编程工具出现以后，这种关系开始改变。

现在很多时候，我并不是在「写代码」。

而是在：

text 复制代码

描述需求
解释业务规则
审查实现方案
检查 AI 的输出结果

真正敲代码的工作，越来越多地交给 Claude Code、Codex 等 AI Agent 完成。

渐渐地，我意识到一个问题：

如果我的主要工作已经从「写代码」变成了「给 AI 下任务」，那我为什么还必须一直坐在电脑前？

有一天，我带孩子去公园。

孩子在玩滑梯，我坐在旁边。

脑子里突然想到一个功能设计。

按照以前的习惯，我只能：

text 复制代码

记下来
回家
打开电脑
再开始开发

但如果 AI 已经能帮我写代码，那么理论上我只需要：

text 复制代码

告诉 AI 我要什么

剩下的事情交给它完成。

于是我产生了一个想法：

能不能让我的 Mac 一直运行在家里？

然后我用手机随时连接进去。

想到一个需求时，直接拿出手机：

text 复制代码

分析这个模块的数据流。

检查 ReportScreen 的状态管理问题。

帮我重构这个页面。

先给出方案，不要改代码。

根据设计稿完成剩余功能。

甚至直接使用手机语音输入：

text 复制代码

"帮我检查最近这个需求的实现，
看看有没有边界条件遗漏。"

AI 开始工作。

而我继续散步。

过一会儿再拿出手机：

text 复制代码

查看分析结果
审核代码
决定是否执行

这其实已经不是传统意义上的"坐在电脑前编程"。

而是一种新的工作方式：

行走编程（Walking Programming）

在这种模式下：

text 复制代码

人负责思考
AI 负责执行

人负责决策
AI 负责实现

人负责审核
AI 负责生产

电脑不再是工作的地点。

电脑只是一个运行 AI 的服务器。

而手机成为了随身携带的控制器。

为了实现这种工作方式，我最终搭建了下面这套环境：

text 复制代码

Mac
└── code-server :8080

        ↓ frp

云服务器
└── frps :18080（仅内部访问）

        ↓

nginx :443
└── Let's Encrypt

        ↓

https://code.xxx.com

最终效果是：

text 复制代码

家里的 Mac 持续运行

Claude Code 持续运行

Codex 持续运行

项目代码持续存在

tmux 保持所有会话

手机随时连接

无论是在：

text 复制代码

地铁上
咖啡馆里
公园里
排队时
陪孩子时

都可以打开浏览器。

进入自己的 VS Code。

给 AI 下达新的任务。

查看 AI 的工作成果。

继续推进项目。

接下来，我将一步一步介绍如何搭建这套属于自己的 AI 行走编程环境。

一、目标

我们希望实现这样一个架构：

text 复制代码

Mac
└── code-server :8080

        ↓ frp

云服务器
└── frps :18080（仅本机访问）

        ↓

nginx :443
└── Let's Encrypt HTTPS

        ↓

https://code.xxx.com

最终效果是：

在 Mac 上运行 code-server、Claude Code、Codex、Node.js、pnpm、Git 等开发环境。

然后在手机、平板或其他电脑的浏览器里访问：

text 复制代码

https://code.xxx.com

就可以打开一个网页版 VS Code，在里面操作项目、打开终端、运行 Claude Code / Codex，并通过手机语音输入给 AI 编程工具下指令。

二、为什么不用 VS Code Remote Tunnel？

VS Code Remote Tunnel 很方便，但在中国网络环境下可能比较慢，因为它依赖官方远程隧道服务。

code-server + frp + Nginx 的优势是：

text 复制代码

1. 服务跑在自己的 Mac 上
2. 中转走自己的云服务器
3. 访问入口由自己的 Nginx 控制
4. HTTPS 证书可控
5. 可以加 Nginx 密码验证
6. 速度和稳定性更可控

三、准备条件

你需要准备：

text 复制代码

1. 一台 Mac
2. 一台云服务器
3. 一个域名，例如 code.xxx.com
4. Mac 上已经安装 code-server
5. 云服务器上安装 frps、nginx、certbot
6. Mac 上安装 frpc

域名需要解析到云服务器公网 IP。

例如：

text 复制代码

code.xxx.com  A记录  你的云服务器公网IP

四、Mac 上启动 code-server

1. 安装 code-server

如果使用 Homebrew：

bash 复制代码

brew install code-server

2. 启动 code-server

假设项目目录是：

bash 复制代码

~/projects/mint-project-new

可以启动：

bash 复制代码

code-server ~/projects/mint-project-new

默认服务地址通常是：

text 复制代码

http://127.0.0.1:8080

3. 查看配置

配置文件一般在：

bash 复制代码

~/.config/code-server/config.yaml

可以查看：

bash 复制代码

cat ~/.config/code-server/config.yaml

示例：

yaml 复制代码

bind-addr: 127.0.0.1:8080
auth: password
password: your-code-server-password
cert: false

这里保持 127.0.0.1:8080 即可。

因为 code-server 只需要被 Mac 本机的 frpc 访问，不需要直接暴露到局域网或公网。

五、云服务器安装 frps

1. 下载 frp

去 frp 的 GitHub Release 下载对应系统版本。

例如 Linux amd64：

bash 复制代码

wget https://github.com/fatedier/frp/releases/download/v0.xx.x/frp_0.xx.x_linux_amd64.tar.gz
tar -zxvf frp_0.xx.x_linux_amd64.tar.gz
cd frp_0.xx.x_linux_amd64

2. 配置 frps

新建或修改：

bash 复制代码

frps.toml

示例：

toml 复制代码

bindPort = 7000

启动 frps：

bash 复制代码

./frps -c frps.toml

也可以用 pm2 或 systemd 后台运行。

pm2 示例：

bash 复制代码

pm2 start ./frps --name frps -- -c frps.toml

六、Mac 上配置 frpc

Mac 上新建：

bash 复制代码

frpc.toml

示例：

toml 复制代码

serverAddr = "你的云服务器公网IP"
serverPort = 7000

[[proxies]]
name = "code-server"
type = "tcp"
localIP = "127.0.0.1"
localPort = 8080
remotePort = 18080

含义是：

text 复制代码

Mac 本机 127.0.0.1:8080
    ↓
frpc
    ↓
云服务器 127.0.0.1:18080 / 0.0.0.0:18080

启动 frpc：

bash 复制代码

./frpc -c frpc.toml

如果你希望长期运行，也可以用 pm2：

bash 复制代码

pm2 start ./frpc --name frpc-code-server -- -c frpc.toml

七、重要安全点：不要开放 18080

frp 映射出来的 18080 不应该直接给公网访问。

云服务器防火墙只开放：

text 复制代码

80
443
7000

不要开放：

text 复制代码

最终应该让外部用户只能访问：

text 复制代码

https://code.xxx.com

然后由 Nginx 反向代理到：

text 复制代码

http://127.0.0.1:18080

八、云服务器安装 Nginx

Ubuntu / Debian：

bash 复制代码

sudo apt update
sudo apt install nginx -y

检查 Nginx：

bash 复制代码

sudo systemctl status nginx

九、配置 Nginx 反向代理

新建配置文件：

bash 复制代码

sudo vim /etc/nginx/sites-available/code-server

先写 HTTP 版本：

nginx 复制代码

server {
    listen 80;
    server_name code.xxx.com;

    location / {
        proxy_pass http://127.0.0.1:18080;

        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

启用配置：

bash 复制代码

sudo ln -s /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/code-server

检查配置：

bash 复制代码

sudo nginx -t

重载 Nginx：

bash 复制代码

sudo systemctl reload nginx

十、申请 Let's Encrypt HTTPS 证书

1. 安装 certbot

bash 复制代码

sudo apt update
sudo apt install certbot python3-certbot-nginx -y

2. 申请证书

bash 复制代码

sudo certbot --nginx -d code.xxx.com

过程中会让你输入邮箱、同意协议，并选择是否将 HTTP 重定向到 HTTPS。

建议选择：

text 复制代码

Redirect

申请成功后，证书默认会放在：

bash 复制代码

/etc/letsencrypt/live/code.xxx.com/fullchain.pem
/etc/letsencrypt/live/code.xxx.com/privkey.pem

不需要手动复制证书。

Certbot 会自动修改 Nginx 配置。

十一、最终 Nginx 配置示例

最终配置大概是：

nginx 复制代码

server {
    server_name code.xxx.com;

    location / {
        proxy_pass http://127.0.0.1:18080;

        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/code.xxx.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/code.xxx.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

server {
    listen 80;
    server_name code.xxx.com;
    return 301 https://$host$request_uri;
}

检查：

bash 复制代码

sudo nginx -t
sudo systemctl reload nginx

十二、再加一层 Nginx 密码验证

因为 code-server 是开发环境，里面可能有代码、密钥、终端、AI 编程工具，所以建议再加一层 Nginx Basic Auth。

1. 安装 htpasswd

bash 复制代码

sudo apt install apache2-utils -y

2. 创建账号密码

例如用户名是 admin：

bash 复制代码

sudo htpasswd -c /etc/nginx/.htpasswd admin

输入密码即可。

3. 修改 Nginx 配置

在 location / 里加入：

nginx 复制代码

auth_basic "Private Code Server";
auth_basic_user_file /etc/nginx/.htpasswd;

完整示例：

nginx 复制代码

server {
    server_name code.xxx.com;

    location / {
        auth_basic "Private Code Server";
        auth_basic_user_file /etc/nginx/.htpasswd;

        proxy_pass http://127.0.0.1:18080;

        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/code.xxx.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/code.xxx.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

server {
    listen 80;
    server_name code.xxx.com;
    return 301 https://$host$request_uri;
}

检查并重载：

bash 复制代码

sudo nginx -t
sudo systemctl reload nginx

现在访问：

text 复制代码

https://code.xxx.com

会先弹出浏览器账号密码框。

通过后，才会进入 code-server 登录页。

十三、在 code-server 中使用 Claude Code / Codex

code-server 本质上是浏览器版 VS Code。

Claude Code 和 Codex 本质上是终端 CLI 工具。

所以只要它们在 Mac 上能运行，在 code-server 的 Terminal 里也能运行。

进入 code-server 后，打开 Terminal：

bash 复制代码

which claude
which codex

如果能看到路径，例如：

text 复制代码

/opt/homebrew/bin/claude
/opt/homebrew/bin/codex

就可以直接运行：

bash 复制代码

claude

或者：

bash 复制代码

codex

这时它们实际运行在你的 Mac 上。

手机只是通过浏览器远程操作。

十四、推荐配合 tmux 使用

手机网络可能断开，浏览器也可能被系统杀后台。

为了避免 Claude Code / Codex 会话中断，推荐使用 tmux。

安装：

bash 复制代码

brew install tmux

进入项目：

bash 复制代码

cd ~/projects/mint-project-new

创建 tmux 会话：

bash 复制代码

tmux new -s ai-code

然后在 tmux 里运行：

bash 复制代码

claude

或者：

bash 复制代码

codex

下次重新连接：

bash 复制代码

tmux attach -t ai-code

这样即使手机断线，AI 编程工具仍然在 Mac 上继续运行。

十五、最终访问链路

最终链路是：

text 复制代码

手机浏览器
    ↓
https://code.xxx.com
    ↓
Nginx 443 HTTPS
    ↓
Nginx Basic Auth
    ↓
127.0.0.1:18080
    ↓
frps
    ↓
frpc
    ↓
Mac code-server 127.0.0.1:8080
    ↓
VS Code Web Terminal
    ↓
Claude Code / Codex

这套方案的核心思想是：

text 复制代码

公网只暴露 HTTPS 入口
frp 映射端口不直接暴露
code-server 不直接暴露
Nginx 负责 HTTPS 和第一层认证
code-server 负责第二层认证
Claude Code / Codex 运行在 Mac 本机

十六、常见问题

1. 为什么不直接开放 8080？

不建议。

code-server 是开发环境，一旦暴露，风险很高。

更安全的做法是：

text 复制代码

code-server 只监听 Mac 本机 127.0.0.1:8080
frp 转发到云服务器
云服务器只通过 Nginx HTTPS 暴露

2. 为什么 Nginx 要配置 WebSocket？

code-server 使用 WebSocket 做终端、编辑器通信。

所以必须有：

nginx 复制代码

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

否则可能出现页面能打开，但终端异常、连接断开、加载失败等问题。

3. Basic Auth 有必要吗？

有必要。

最终建议至少三层保护：

text 复制代码

第一层：Nginx Basic Auth
第二层：code-server password
第三层：Claude / Codex 自己的登录或 API Key

4. 手机语音输入能不能用？

可以。

手机输入法的语音输入会先转成文字，再输入到网页中的编辑器或终端。

尤其适合在 Claude Code / Codex 中输入自然语言任务，例如：

text 复制代码

分析这个页面的数据流，先不要修改代码。

或者：

text 复制代码

基于当前代码，找出 ReportScreen 里状态管理最混乱的地方，并给出重构计划。

5. 适合在手机上直接写代码吗？

不太适合。

手机更适合：

text 复制代码

1. 查看代码
2. Review AI 修改
3. 给 Claude Code / Codex 下任务
4. 看运行日志
5. 做小范围修改
6. 远程重启服务

不适合长时间精细编辑代码。

十七、总结

这套方案把 Mac 变成一个自己的 AI 编程工作站。

你可以在 Mac 上运行完整开发环境：

text 复制代码

VS Code
Node.js
pnpm
Git
Claude Code
Codex
项目代码

然后通过：

text 复制代码

code-server + frp + Nginx + HTTPS

把它安全地暴露给移动端浏览器。

最终你可以在手机上打开：

text 复制代码

https://code.xxx.com

用浏览器进入 VS Code 界面，打开终端，使用 Claude Code / Codex，通过语音输入给 AI 编程工具下任务。

对于 AI 编程来说，这种方式特别适合：

text 复制代码

白天在电脑上开发
晚上用手机继续查看
外出时远程让 AI 分析问题
临时用语音给 AI 下任务
长任务交给 tmux 保持运行

它不是为了让手机变成完整电脑，而是让手机成为一个可以随时接入 AI 编程工作站的控制端。