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

行走编程:把你的 Mac 变成一台随身 AI 开发工作站 行走编程把你的 Mac 变成一台随身 AI 开发工作站前几个月我发现自己的编程习惯正在发生变化。以前写代码的时候我必须坐在电脑前打开 IDE 敲代码 调试 提交开发工作和电脑被牢牢绑定在一起。但 AI 编程工具出现以后这种关系开始改变。现在很多时候我并不是在「写代码」。而是在描述需求 解释业务规则 审查实现方案 检查 AI 的输出结果真正敲代码的工作越来越多地交给 Claude Code、Codex 等 AI Agent 完成。渐渐地我意识到一个问题如果我的主要工作已经从「写代码」变成了「给 AI 下任务」那我为什么还必须一直坐在电脑前有一天我带孩子去公园。孩子在玩滑梯我坐在旁边。脑子里突然想到一个功能设计。按照以前的习惯我只能记下来 回家 打开电脑 再开始开发但如果 AI 已经能帮我写代码那么理论上我只需要告诉 AI 我要什么剩下的事情交给它完成。于是我产生了一个想法能不能让我的 Mac 一直运行在家里然后我用手机随时连接进去。想到一个需求时直接拿出手机分析这个模块的数据流。 检查 ReportScreen 的状态管理问题。 帮我重构这个页面。 先给出方案不要改代码。 根据设计稿完成剩余功能。甚至直接使用手机语音输入“帮我检查最近这个需求的实现 看看有没有边界条件遗漏。”AI 开始工作。而我继续散步。过一会儿再拿出手机查看分析结果 审核代码 决定是否执行这其实已经不是传统意义上的“坐在电脑前编程”。而是一种新的工作方式行走编程Walking Programming在这种模式下人负责思考 AI 负责执行 人负责决策 AI 负责实现 人负责审核 AI 负责生产电脑不再是工作的地点。电脑只是一个运行 AI 的服务器。而手机成为了随身携带的控制器。为了实现这种工作方式我最终搭建了下面这套环境Mac └── code-server :8080 ↓ frp 云服务器 └── frps :18080仅内部访问 ↓ nginx :443 └── Lets Encrypt ↓ https://code.xxx.com最终效果是家里的 Mac 持续运行 Claude Code 持续运行 Codex 持续运行 项目代码持续存在 tmux 保持所有会话 手机随时连接无论是在地铁上 咖啡馆里 公园里 排队时 陪孩子时都可以打开浏览器。进入自己的 VS Code。给 AI 下达新的任务。查看 AI 的工作成果。继续推进项目。接下来我将一步一步介绍如何搭建这套属于自己的 AI 行走编程环境。一、目标我们希望实现这样一个架构Mac └── code-server :8080 ↓ frp 云服务器 └── frps :18080仅本机访问 ↓ nginx :443 └── Lets Encrypt HTTPS ↓ https://code.xxx.com最终效果是在 Mac 上运行 code-server、Claude Code、Codex、Node.js、pnpm、Git 等开发环境。然后在手机、平板或其他电脑的浏览器里访问https://code.xxx.com就可以打开一个网页版 VS Code在里面操作项目、打开终端、运行 Claude Code / Codex并通过手机语音输入给 AI 编程工具下指令。二、为什么不用 VS Code Remote TunnelVS Code Remote Tunnel 很方便但在中国网络环境下可能比较慢因为它依赖官方远程隧道服务。code-server frp Nginx 的优势是1. 服务跑在自己的 Mac 上 2. 中转走自己的云服务器 3. 访问入口由自己的 Nginx 控制 4. HTTPS 证书可控 5. 可以加 Nginx 密码验证 6. 速度和稳定性更可控三、准备条件你需要准备1. 一台 Mac 2. 一台云服务器 3. 一个域名例如 code.xxx.com 4. Mac 上已经安装 code-server 5. 云服务器上安装 frps、nginx、certbot 6. Mac 上安装 frpc域名需要解析到云服务器公网 IP。例如code.xxx.com A记录 你的云服务器公网IP四、Mac 上启动 code-server1. 安装 code-server如果使用 Homebrewbrewinstallcode-server2. 启动 code-server假设项目目录是~/projects/mint-project-new可以启动code-server ~/projects/mint-project-new默认服务地址通常是http://127.0.0.1:80803. 查看配置配置文件一般在~/.config/code-server/config.yaml可以查看cat~/.config/code-server/config.yaml示例bind-addr:127.0.0.1:8080auth:passwordpassword:your-code-server-passwordcert:false这里保持127.0.0.1:8080即可。因为 code-server 只需要被 Mac 本机的 frpc 访问不需要直接暴露到局域网或公网。五、云服务器安装 frps1. 下载 frp去 frp 的 GitHub Release 下载对应系统版本。例如 Linux amd64wgethttps://github.com/fatedier/frp/releases/download/v0.xx.x/frp_0.xx.x_linux_amd64.tar.gztar-zxvffrp_0.xx.x_linux_amd64.tar.gzcdfrp_0.xx.x_linux_amd642. 配置 frps新建或修改frps.toml示例bindPort 7000启动 frps./frps-cfrps.toml也可以用 pm2 或 systemd 后台运行。pm2 示例pm2 start ./frps--namefrps ---cfrps.toml六、Mac 上配置 frpcMac 上新建frpc.toml示例serverAddr 你的云服务器公网IP serverPort 7000 [[proxies]] name code-server type tcp localIP 127.0.0.1 localPort 8080 remotePort 18080含义是Mac 本机 127.0.0.1:8080 ↓ frpc ↓ 云服务器 127.0.0.1:18080 / 0.0.0.0:18080启动 frpc./frpc-cfrpc.toml如果你希望长期运行也可以用 pm2pm2 start ./frpc--namefrpc-code-server ---cfrpc.toml七、重要安全点不要开放 18080frp 映射出来的18080不应该直接给公网访问。云服务器防火墙只开放80 443 7000不要开放18080最终应该让外部用户只能访问https://code.xxx.com然后由 Nginx 反向代理到http://127.0.0.1:18080八、云服务器安装 NginxUbuntu / Debiansudoaptupdatesudoaptinstallnginx-y检查 Nginxsudosystemctl status nginx九、配置 Nginx 反向代理新建配置文件sudovim/etc/nginx/sites-available/code-server先写 HTTP 版本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; } }启用配置sudoln-s/etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/code-server检查配置sudonginx-t重载 Nginxsudosystemctl reload nginx十、申请 Let’s Encrypt HTTPS 证书1. 安装 certbotsudoaptupdatesudoaptinstallcertbot python3-certbot-nginx-y2. 申请证书sudocertbot--nginx-dcode.xxx.com过程中会让你输入邮箱、同意协议并选择是否将 HTTP 重定向到 HTTPS。建议选择Redirect申请成功后证书默认会放在/etc/letsencrypt/live/code.xxx.com/fullchain.pem /etc/letsencrypt/live/code.xxx.com/privkey.pem不需要手动复制证书。Certbot 会自动修改 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; }检查sudonginx-tsudosystemctl reload nginx十二、再加一层 Nginx 密码验证因为 code-server 是开发环境里面可能有代码、密钥、终端、AI 编程工具所以建议再加一层 Nginx Basic Auth。1. 安装 htpasswdsudoaptinstallapache2-utils-y2. 创建账号密码例如用户名是adminsudohtpasswd-c/etc/nginx/.htpasswd admin输入密码即可。3. 修改 Nginx 配置在location /里加入auth_basic Private Code Server; auth_basic_user_file /etc/nginx/.htpasswd;完整示例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; }检查并重载sudonginx-tsudosystemctl reload nginx现在访问https://code.xxx.com会先弹出浏览器账号密码框。通过后才会进入 code-server 登录页。十三、在 code-server 中使用 Claude Code / Codexcode-server 本质上是浏览器版 VS Code。Claude Code 和 Codex 本质上是终端 CLI 工具。所以只要它们在 Mac 上能运行在 code-server 的 Terminal 里也能运行。进入 code-server 后打开 Terminalwhichclaudewhichcodex如果能看到路径例如/opt/homebrew/bin/claude /opt/homebrew/bin/codex就可以直接运行claude或者codex这时它们实际运行在你的 Mac 上。手机只是通过浏览器远程操作。十四、推荐配合 tmux 使用手机网络可能断开浏览器也可能被系统杀后台。为了避免 Claude Code / Codex 会话中断推荐使用 tmux。安装brewinstalltmux进入项目cd~/projects/mint-project-new创建 tmux 会话tmux new-sai-code然后在 tmux 里运行claude或者codex下次重新连接tmux attach-tai-code这样即使手机断线AI 编程工具仍然在 Mac 上继续运行。十五、最终访问链路最终链路是手机浏览器 ↓ 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这套方案的核心思想是公网只暴露 HTTPS 入口 frp 映射端口不直接暴露 code-server 不直接暴露 Nginx 负责 HTTPS 和第一层认证 code-server 负责第二层认证 Claude Code / Codex 运行在 Mac 本机十六、常见问题1. 为什么不直接开放 8080不建议。code-server 是开发环境一旦暴露风险很高。更安全的做法是code-server 只监听 Mac 本机 127.0.0.1:8080 frp 转发到云服务器 云服务器只通过 Nginx HTTPS 暴露2. 为什么 Nginx 要配置 WebSocketcode-server 使用 WebSocket 做终端、编辑器通信。所以必须有proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade;否则可能出现页面能打开但终端异常、连接断开、加载失败等问题。3. Basic Auth 有必要吗有必要。最终建议至少三层保护第一层Nginx Basic Auth 第二层code-server password 第三层Claude / Codex 自己的登录或 API Key4. 手机语音输入能不能用可以。手机输入法的语音输入会先转成文字再输入到网页中的编辑器或终端。尤其适合在 Claude Code / Codex 中输入自然语言任务例如分析这个页面的数据流先不要修改代码。或者基于当前代码找出 ReportScreen 里状态管理最混乱的地方并给出重构计划。5. 适合在手机上直接写代码吗不太适合。手机更适合1. 查看代码 2. Review AI 修改 3. 给 Claude Code / Codex 下任务 4. 看运行日志 5. 做小范围修改 6. 远程重启服务不适合长时间精细编辑代码。十七、总结这套方案把 Mac 变成一个自己的 AI 编程工作站。你可以在 Mac 上运行完整开发环境VS Code Node.js pnpm Git Claude Code Codex 项目代码然后通过code-server frp Nginx HTTPS把它安全地暴露给移动端浏览器。最终你可以在手机上打开https://code.xxx.com用浏览器进入 VS Code 界面打开终端使用 Claude Code / Codex通过语音输入给 AI 编程工具下任务。对于 AI 编程来说这种方式特别适合白天在电脑上开发 晚上用手机继续查看 外出时远程让 AI 分析问题 临时用语音给 AI 下任务 长任务交给 tmux 保持运行它不是为了让手机变成完整电脑而是让手机成为一个可以随时接入 AI 编程工作站的控制端。