🔌 VSCode Remote SSH 连接指南

通过 VSCode Remote SSH 连接到开发服务器和 GPU 推理机，实现本地写代码、远程跑模型的开发体验。

一、开发环境总览

机器 IP 用途 端口
云服务器 82.156.214.59 前端开发 + Flask 后端 + 论坛 22(SSH), 5000(平台), 5001(论坛)
GPU 推理机 123.58.111.244 vLLM + SDXL + FLUX 等模型推理 22(SSH), 3990(vLLM), 7860(SDXL), 8188(FLUX)

二、SSH 配置步骤

2.1 在本地生成 SSH Key

ssh-keygen -t ed25519 -C "your_email@example.com"

一路回车，默认生成在 ~/.ssh/id_ed25519.pub

2.2 把公钥添加到服务器

# 方法一：一行命令（在本地终端执行）
ssh-copy-id root@82.156.214.59

# 方法二：手动复制
cat ~/.ssh/id_ed25519.pub | ssh root@82.156.214.59 "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys"

# 如果需要连接 GPU 机，同样操作
ssh-copy-id root@123.58.111.244

2.3 配置 SSH Config（推荐）

# Ascent Creator 云服务器
Host ascent-cloud
    HostName 82.156.214.59
    User root
    Port 22
    IdentityFile ~/.ssh/id_ed25519

# GPU 推理服务器
Host ascent-gpu
    HostName 123.58.111.244
    User root
    Port 22
    IdentityFile ~/.ssh/id_ed25519

# Gitee（确保已添加公钥到 Gitee 账户）
Host gitee.com
    User git
    IdentityFile ~/.ssh/id_ed25519

配置完后可直接用 ssh ascent-cloud 或 ssh ascent-gpu 连接，无需记忆 IP。

三、VSCode Remote SSH 连接

3.1 安装扩展

在 VSCode 扩展市场搜索并安装：Remote - SSH（Microsoft 官方）

其他推荐扩展：

  • Python (Microsoft) - Python 语言支持
  • Vue - Official (Vue.js) - Vue 3 语法高亮
  • Tailwind CSS IntelliSense - Tailwind 类名提示
  • Prettier - 代码格式化
  • GitLens - 代码追溯
  • SQLite Viewer - 数据库查看

3.2 建立连接

  1. 点击 VSCode 左下角绿色 > 图标（或按 F1 输入 Remote-SSH: Connect to Host）
  2. 选择 ascent-cloud（我们刚配置的 SSH 主机）
  3. VSCode 会在新窗口打开远程连接
  4. 打开项目目录：/root/models_20260529220733/ai-creator-platform

3.3 首次连接后

  • VSCode 会自动在远端安装 Server
  • 打开终端：Ctrl + ` - 会自动连接到远端服务器 Shell
  • 推荐安装 Python + Vue 扩展到远端（扩展 - 本地已安装 - 点击在SSH中安装）

四、端口转发（本地访问远程服务）

  • 端口面板：VSCode 底部面板 - 端口 标签
  • 转发 5000 端口：点击"转发端口" - 输入 5000 - 本地浏览器访问 http://localhost:5000
  • 转发 5001 端口：同上，本地访问论坛

五、项目目录结构与开发命令

ai-creator-platform/
├── index.html           # Vue 入口
├── package.json         # 前端依赖
├── vite.config.js       # Vite 构建配置
├── tailwind.config.js   # Tailwind 主题
├── Dockerfile           # Docker 部署
├── src/                 # 前端源码
│   ├── main.js          # Vue 入口
│   ├── router/index.js  # 路由
│   ├── stores/app.js    # Pinia 状态
│   ├── services/api.js  # API 封装
│   ├── style.css        # 全局样式
│   └── views/           # 页面（14个工坊）
└── backend/
    ├── app.py           # Flask 主程序
    ├── config.py        # 模型配置
    └── configs/         # 服务配置

常用开发命令：

cd /root/models_20260529220733/ai-creator-platform

npm install           # 安装前端依赖
npm run dev           # 前端热更新开发服务器
npm run build         # 前端构建

cd backend && python3 app.py   # 启动 Flask 后端