# 云端开发环境设计方案
本文档设计一个可以从手机、电脑等多设备访问的云端开发环境，主要用于运行 Claude Code。
## 目录
1. [方案概览](#方案概览)
2. [方案 A：本地电脑作为服务器](#方案-a本地电脑作为服务器)
3. [方案 B：云服务器方案](#方案-b云服务器方案)
4. [方案 C：云开发环境（推荐）](#方案-c云开发环境推荐)
5. [手机访问方案](#手机访问方案)
6. [推荐选择](#推荐选择)
---
## 方案概览
| 方案 | 成本 | 配置难度 | 稳定性 | 适合场景 |
|------|------|----------|--------|----------|
| A. 本地电脑 | 免费 | 中等 | 依赖电脑 | 有闲置电脑、对成本敏感 |
| B. 云服务器 (VPS) | $5-20/月 | 较高 | 高 | 需要完全控制、长期使用 |
| C. 云开发环境 | $0-20/月 | 低 | 高 | 快速上手、临时使用 |
---
## 方案 A：本地电脑作为服务器
### 架构图
```
┌─────────────────────────────────────────────────────────────┐
│ 互联网 │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Tailscale / Cloudflare Tunnel │
│ (内网穿透/安全隧道) │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 你的电脑 (一直开机) │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────┐ │
│ │ code-server │ │ SSH │ │ ttyd │ │
│ │ (浏览器 IDE) │ │ (终端访问) │ │ (Web终端) │ │
│ │ Port 8080 │ │ Port 22 │ │ Port 7681 │ │
│ └─────────────────┘ └─────────────────┘ └─────────────┘ │
│ │ │
│ ┌───────▼───────┐ │
│ │ Claude Code │ │
│ │ (CLI 工具) │ │
│ └───────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### 步骤 1：安装 Tailscale（推荐的内网穿透方案）
Tailscale 是最简单安全的内网穿透方案，免费套餐足够个人使用。
```bash
# macOS
brew install tailscale
# Linux (Ubuntu/Debian)
curl -fsSL https://tailscale.com/install.sh | sh
# 启动并登录
sudo tailscale up
```
登录后，你的电脑会获得一个固定的 Tailscale IP（如 `100.x.x.x`），可以从任何安装了 Tailscale 的设备访问。
### 步骤 2：安装 code-server（浏览器中的 VS Code）
```bash
# 使用官方安装脚本
curl -fsSL https://code-server.dev/install.sh | sh
# 启动 code-server
code-server --bind-addr 0.0.0.0:8080
# 或者后台运行
code-server --bind-addr 0.0.0.0:8080 &
```
配置文件位于 `~/.config/code-server/config.yaml`：
```yaml
bind-addr: 0.0.0.0:8080
auth: password
password: your-secure-password
cert: false
```
### 步骤 3：安装 ttyd（可选，Web 终端）
如果只需要终端访问，ttyd 更轻量：
```bash
# macOS
brew install ttyd
# Linux
sudo apt install ttyd
# 启动（绑定到 bash）
ttyd -p 7681 -W bash
```
### 步骤 4：配置 Claude Code
```bash
# 确保 Claude Code 已安装
npm install -g @anthropic-ai/claude-code
# 设置 API Key
export ANTHROPIC_API_KEY="your-api-key"
# 验证安装
claude --version
```
### 步骤 5：设置开机自启动
**macOS (使用 launchd)：**
创建 `~/Library/LaunchAgents/com.codeserver.plist`：
```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Label</key>
<string>com.codeserver</string>
<key>ProgramArguments</key>
<array>
<string>/usr/local/bin/code-server</string>
<string>--bind-addr</string>
<string>0.0.0.0:8080</string>
</array>
<key>RunAtLoad</key>
<true/>
<key>KeepAlive</key>
<true/>
</dict>
</plist>
```
```bash
launchctl load ~/Library/LaunchAgents/com.codeserver.plist
```
**Linux (使用 systemd)：**
```bash
sudo systemctl enable --now code-server@$USER
```
### 访问方式
1. **同一网络下**：直接访问 `http://电脑IP:8080`
2. **外网访问**：
- 手机/其他设备安装 Tailscale
- 访问 `http://100.x.x.x:8080`（Tailscale IP）
---
## 方案 B：云服务器方案
### 推荐的 VPS 提供商
| 提供商 | 最低价格 | 特点 |
|--------|----------|------|
| Vultr | $5/月 | 按小时计费，可随时删除 |
| DigitalOcean | $6/月 | 稳定，有丰富文档 |
| Linode | $5/月 | 性能好 |
| AWS Lightsail | $5/月 | AWS 生态 |
| 腾讯云/阿里云 | ¥50-100/月 | 国内访问快 |
### 架构图
```
┌─────────────────────────────────────────────────────────────┐
│ 互联网 │
└─────────────────────────────────────────────────────────────┘
│
┌─────────────────┼─────────────────┐
▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐
│ 手机 │ │ 电脑 │ │ 平板 │
└─────────┘ └─────────┘ └─────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 云服务器 (VPS) │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Caddy / Nginx │ │
│ │ (反向代理 + HTTPS + 认证) │ │
│ └──────────────────────────────────────────────────────┘ │
│ │ │
│ ┌────────────────────┼────────────────────┐ │
│ ▼ ▼ ▼ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ code-server │ │ ttyd │ │ SSH │ │
│ │ (VS Code) │ │ (Web终端) │ │ (终端) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ┌───────▼───────┐ │
│ │ Claude Code │ │
│ │ 项目文件 │ │
│ └───────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### 一键部署脚本
创建 `setup-cloud-dev.sh`：
```bash
#!/bin/bash
set -e
echo "=== 云端开发环境安装脚本 ==="
# 更新系统
sudo apt update && sudo apt upgrade -y
# 安装基础工具
sudo apt install -y curl wget git build-essential
# 安装 Node.js 20
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
# 安装 code-server
curl -fsSL https://code-server.dev/install.sh | sh
# 安装 ttyd
sudo apt install -y ttyd
# 安装 Caddy (反向代理)
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install -y caddy
# 安装 Claude Code
sudo npm install -g @anthropic-ai/claude-code
# 配置 code-server
mkdir -p ~/.config/code-server
cat > ~/.config/code-server/config.yaml << EOF
bind-addr: 127.0.0.1:8080
auth: password
password: $(openssl rand -base64 24)
cert: false
EOF
echo "密码已保存到 ~/.config/code-server/config.yaml"
# 启动服务
sudo systemctl enable --now code-server@$USER
echo "=== 安装完成 ==="
echo "请配置 Caddy 进行反向代理"
```
### Caddy 配置（自动 HTTPS）
编辑 `/etc/caddy/Caddyfile`：
```
your-domain.com {
# code-server (VS Code)
reverse_proxy /code/* localhost:8080
# ttyd (Web 终端)
reverse_proxy /terminal/* localhost:7681
# 基础认证（可选，code-server 已有认证）
basicauth /* {
admin $2a$14$your-bcrypt-hash
}
}
```
---
## 方案 C：云开发环境（推荐）
这是最简单的方案，使用现成的云开发环境服务。
### 选项 1：GitHub Codespaces（强烈推荐）
**优点：**
- 与 GitHub 深度集成
- 免费额度：每月 60 小时（2 核）或 30 小时（4 核）
- 支持浏览器和 VS Code 桌面版访问
- 预配置的开发环境
**设置步骤：**
1. 打开你的 GitHub 仓库
2. 点击 `Code` → `Codespaces` → `Create codespace`
3. 等待环境启动（通常 1-2 分钟）
4. 在终端中安装 Claude Code：
```bash
npm install -g @anthropic-ai/claude-code
export ANTHROPIC_API_KEY="your-key"
claude
```
**配置文件** `.devcontainer/devcontainer.json`：
```json
{
"name": "Claude Code Dev Environment",
"image": "mcr.microsoft.com/devcontainers/base:ubuntu",
"features": {
"ghcr.io/devcontainers/features/node:1": {
"version": "20"
},
"ghcr.io/devcontainers/features/python:1": {
"version": "3.11"
}
},
"postCreateCommand": "npm install -g @anthropic-ai/claude-code",
"customizations": {
"vscode": {
"extensions": [
"ms-python.python",
"esbenp.prettier-vscode"
]
}
},
"secrets": {
"ANTHROPIC_API_KEY": {
"description": "Your Anthropic API key for Claude Code"
}
}
}
```
### 选项 2：Gitpod
**优点：**
- 每月 50 小时免费
- 快速启动
- 支持多种 IDE（VS Code、JetBrains）
**使用方式：**
在仓库 URL 前加上 `gitpod.io/#`：
```
https://gitpod.io/#https://github.com/your-username/your-repo
```
**配置文件** `.gitpod.yml`：
```yaml
image: gitpod/workspace-full
tasks:
- name: Setup Claude Code
init: |
npm install -g @anthropic-ai/claude-code
command: |
echo "Claude Code ready! Run: claude"
ports:
- port: 8080
onOpen: open-preview
vscode:
extensions:
- ms-python.python
```
### 选项 3：Google Cloud Shell（完全免费）
**优点：**
- 完全免费
- 5GB 持久存储
- 内置 Web 编辑器
**限制：**
- 每周有使用时间限制
- 资源有限（1 vCPU, 1.7GB RAM）
**访问方式：**
1. 访问 https://shell.cloud.google.com
2. 安装 Claude Code：
```bash
npm install -g @anthropic-ai/claude-code
```
---
## 手机访问方案
### iOS 推荐 App
| App | 用途 | 价格 |
|-----|------|------|
| **Tailscale** | 内网穿透 | 免费 |
| **Termius** | SSH 客户端 | 免费/Pro |
| **Blink Shell** | 高级终端 | ¥128 买断 |
| **Safari** | 访问 code-server | 内置 |
### Android 推荐 App
| App | 用途 | 价格 |
|-----|------|------|
| **Tailscale** | 内网穿透 | 免费 |
| **Termux** | 本地终端 + SSH | 免费 |
| **JuiceSSH** | SSH 客户端 | 免费/Pro |
| **Chrome** | 访问 code-server | 内置 |
### 手机访问 code-server 优化
在手机浏览器中，code-server 可以安装为 PWA（渐进式 Web 应用）：
1. 在 Safari/Chrome 中打开 code-server
2. 点击"添加到主屏幕"
3. 像原生应用一样使用
---
## 推荐选择
### 根据需求选择：
```
你的使用场景是什么？
│
├── 只是偶尔需要远程开发
│ └── 推荐：GitHub Codespaces（免费额度够用）
│
├── 经常需要，有一台闲置电脑
│ └── 推荐：方案 A（本地电脑 + Tailscale + code-server）
│
├── 需要 24/7 稳定访问，愿意付费
│ └── 推荐：方案 B（VPS + code-server）
│
└── 想要最简单的方案
└── 推荐：GitHub Codespaces
```
### 我的建议
对于运行 Claude Code 的场景，我推荐 **方案 A（本地电脑）+ Tailscale**：
1. **成本低**：只需要保持电脑开机
2. **资源充足**：本地电脑性能通常比便宜的 VPS 好
3. **安全**：Tailscale 使用 WireGuard，非常安全
4. **简单**：安装 Tailscale + code-server 只需 10 分钟
如果不想让电脑一直开着，**GitHub Codespaces** 是最佳选择：
- 免费额度足够
- 无需任何配置
- 从浏览器直接访问
---
## 快速开始
### 最简方案：本地电脑 + Tailscale（5 分钟搞定）
```bash
# 1. 安装 Tailscale
# macOS
brew install tailscale
# 或 Linux
curl -fsSL https://tailscale.com/install.sh | sh
# 2. 启动 Tailscale
sudo tailscale up
# 3. 安装 code-server
curl -fsSL https://code-server.dev/install.sh | sh
# 4. 启动 code-server
code-server --bind-addr 0.0.0.0:8080
# 5. 在手机上
# - 安装 Tailscale App 并登录同一账号
# - 浏览器访问 http://100.x.x.x:8080（你的 Tailscale IP）
# - 输入密码（见 ~/.config/code-server/config.yaml）
# 6. 在 code-server 终端中使用 Claude Code
claude
```
完成！现在你可以从任何设备访问你的开发环境了。
