目录

一、为什么需要云端开发环境？

本地开发的几大烦恼

作为一个程序员，下面这些场景你一定不陌生：

场景一：电脑没带
下班回家接到线上告警，打开家里那台连 Node.js 都没装的旧电脑叹气——等装完环境，故障早该自愈了。

场景二：环境不一致
“我本地是好的啊”——这句台词在技术圈流传了多少年？项目依赖多了之后，换个 Mac 版本都能编译不过，更别说同事用 Windows 你用的是 Linux。

场景三：你追的剧更新了
额，不好意思串台了。场景三：笔记本性能不够——轻薄本编译大型项目，风扇转得像起飞，电池看着往下掉。你只是想改一行代码，等待时间够冲杯咖啡了。

场景四：代码分散
公司台式机上有一半代码，自家笔记本上有另一半，Git 历史乱成一锅粥。更别提某天笔记本丢了——代码、密钥、环境配置，全剧终。

云端开发和本地开发的区别

对比项本地开发云端开发
代码存放散落在各台设备统一在服务器
开发环境每台设备各搭一套服务器一套，所有人/设备共用
计算资源受限于本地硬件弹性伸缩，按需升级
可访问性必须带着设备有浏览器就能开发
安全性设备丢失=代码丢失数据全在服务器，本地零落盘

在这里插入图片描述

市面主流方案一览

实现云端开发环境，目前主要几条路：

方案原理一句话总结
code-serverVS Code 的 Web 移植版浏览器里跑 VS Code，体验最接近本地
JupyterLab增强版 Notebook数据分析/机器学习的首选
Coder企业级环境管理平台想管理整个团队的环境，用这个
SSH Remote (VS Code)本地 IDE + 远程服务器依赖本地安装 VS Code，换设备还要装
ttyd + vim/tmux终端 Web 化极简方案，适合终端高手

其中 code-server 在"体验最接近本地 VS Code"和"部署最简单"这两个维度上做到了最佳平衡——今天的主角就是它。

二、认识 code-server 并快速部署

code-server 是什么？

code-server 是微软 VS Code 的开源 Web 移植版。简单说就是：

别人打开 VS Code 是一个桌面软件，你打开 VS Code 是一个网页。

它保留了 VS Code 的几乎所有核心能力：

  • 文件树 + 编辑器 + 终端
  • 扩展市场（通过 Open VSX Registry）
  • Git 图形化操作（diff、stage、commit、push）
  • 快捷键体系完全一致
  • 调试器、断点、变量面板

用一句话说服你的朋友：把你 Linux 服务器变成一台永不掉线的开发电脑，浏览器就是你的 IDE。

快速部署（先别急着对外暴露）

先在服务器上把 code-server 跑起来，注意这里只绑本地，不对外开放：

# === 第一步：安装 ===
curl -fsSL https://code-server.dev/install.sh | sh

# === 第二步：配置 ===
mkdir -p ~/.config/code-server
cat > ~/.config/code-server/config.yaml << 'EOF'
bind-addr: 127.0.0.1:8080     # 只绑定本地！这是关键
auth: password
password: MyStrongPassword123! # 改成你自己的强密码
cert: false
EOF

# === 第三步：启动 ===
systemctl --user enable --now code-server

# === 第四步：验证 ===
curl http://127.0.0.1:8080   # 应该返回 HTML（在服务器本机测）

验证是否有输出：

ss -tlnp | grep 8080
# 正确: 127.0.0.1:8080     ← 只绑本地
# 错误: 0.0.0.0:8080       ← 这是对外暴露的，危险！

到这里，code-server 已经在 8080 端口跑起来了，但只有服务器本机能访问——外部连不上。

可是我们要的就是从浏览器访问它，这怎么搞？

怎么从外面安全地连进去？

最直接的想法——把端口公开

很多人第一反应是：“把 127.0.0.1 改成 0.0.0.0 不就行了？”

bind-addr: 0.0.0.0:8080

然后再改个不常见的端口，比如 58743，觉得这样就安全了。

这是典型的蒙眼捂耳朵。 Nmap、Masscan 这类扫描工具全端口扫一圈只要几分钟，腾讯云这种国产大厂 IP 段更是被重点"关照"。端口号藏不住。

端口被扫到之后，戏就来了：

  • 密码爆破：自动化脚本轮番试密码，admin、123456、你的生日——几分钟内你的弱密码就跪了
  • 明文传输：HTTP 下密码和代码在网络上裸奔，同 Wi-Fi 下的人开个 Wireshark 就能嗅探到
  • 漏洞利用：code-server 或其依赖某天爆出漏洞，攻击者顺着端口直接拿服务器权限

所以思路得换：不是换个端口躲着走，而是让端口根本不对外露面。

换一个思路——加个看门人

想象一下：你不是把房门直接开到马路上，而是开在酒店大堂里面。外面的人要找你，得先过大堂前台，前台查验完身份才帮你转接。

这就是 Nginx 反向代理干的事：它站在公网和你服务之间，替你的服务接待外部请求。

直连：          访客 → 直接敲你的门（:8080）→ code-server
反向代理：      访客 → Nginx 前台（HTTPS）→ 验明正身 → 转接 → code-server

code-server 把地址写成 127.0.0.1，这个地址只有本机程序能看到，公网永远直接够不着。Nginx 就是那个唯一能从外面进来的前台——它帮你做下面这些事：

  • 加密传输（SSL/TLS）：访客和前台的对话全加密，不怕半路被窃听
  • 查验频率（限流）：同一个 IP 一分钟只能试五次，脚本爆破了等于白跑
  • 登记来访（Access Log）：谁什么时间来过，有据可查
  • 屏蔽异常：不正常的请求直接在门口就挡掉了

顺便提一句，你可能听过"正向代理"——那是帮你上网的（翻墙就是典型场景）。反向代理刚好反过来，是帮你的服务接客的：

正向代理（替客户端办事）：  你 → 代理服务器 → Google
反向代理（替服务端办事）：  访客 → Nginx → 你的 code-server

画成架构长这样

[公网] ──→ Nginx（端口 443, HTTPS）──→ 127.0.0.1:8080 ──→ code-server
               │
               ├── 验证 SSL 证书（防中间人攻击）
               ├── 限流 5 次/分钟（防密码爆破）
               ├── 记录所有访问日志（可事后审计）
               └── code-server 对公网不可见（攻击面为 0）

一句话：code-server 躲在 127.0.0.1 里面，Nginx 在前台接客，公网永远碰不到真实服务。

三、完整方案：反向代理 + code-server + Git 实战搭建

下来我们从头搭一套可直接上线的云开发环境。整个架构如下：

你的浏览器 ──HTTPS──→ 腾讯云服务器
                       │
                   [安全组] 只开放 22、80、443
                       │
                   [Nginx]   监听 443（HTTPS）
                       │       限流 + SSL + 日志
                       │
                   [code-server] 监听 127.0.0.1:8080（对外不可见）
                       │
                   [Git]    已配置 SSH Key，可直接 push

前置条件

  • 一台腾讯云 Linux 服务器（2C4G 起步，本文以 Ubuntu 22.04 为例）
  • 一个已备案的域名（如 dev.example.com）且 DNS 已指向服务器 IP
  • SSH 能连上服务器

第一步：服务器初始化

# SSH 登录
ssh root@你的服务器IP

# 更新系统和安装基础工具
apt update && apt upgrade -y
apt install curl wget git nginx certbot python3-certbot-nginx -y

# 配置 Git（替换为你自己的信息）
git config --global user.name "你的名字"
git config --global user.email "你的邮箱@example.com"

# 可选：生成 SSH Key 并配置到 Git 平台（GitHub/GitLab/Gitee）
ssh-keygen -t ed25519 -C "你的邮箱@example.com"
cat ~/.ssh/id_ed25519.pub
# 复制输出的公钥，添加到你的代码托管平台 → Settings → SSH Keys

第二步：安装并配置 code-server

# 安装
curl -fsSL https://code-server.dev/install.sh | sh

# 创建配置文件
mkdir -p ~/.config/code-server
cat > ~/.config/code-server/config.yaml << 'EOF'
bind-addr: 127.0.0.1:8080
auth: password
password: YourVeryStrongPassword2024!
cert: false
EOF

# 启动并设置开机自启
systemctl --user enable --now code-server

# 确认只绑了本地（重要！）
ss -tlnp | grep 8080
# 应输出: LISTEN  0  128  127.0.0.1:8080  0.0.0.0:*

如果输出是 0.0.0.0:8080，说明配置没生效。检查 ~/.config/code-server/config.yaml 内容，然后重启：systemctl --user restart code-server。

第三步：配置 Nginx 反向代理

创建一个 Nginx 配置文件。用 vim 打开文件：

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

按 i 进入编辑模式，粘贴以下内容（把你的域名替换 dev.example.com）：

limit_req_zone $binary_remote_addr zone=code_limit:10m rate=2000r/m;

# HTTP → HTTPS 重定向
server {
    listen 80;
    server_name dev.example.com;
    return 301 https://$host$request_uri;
}

# HTTPS 服务器（反向代理核心）
server {
    listen 443 ssl http2;
    server_name dev.example.com;

    ssl_certificate     /etc/letsencrypt/live/dev.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/dev.example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    add_header X-Frame-Options DENY;
    add_header X-Content-Type-Options nosniff;
    add_header Referrer-Policy no-referrer-when-downgrade;

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

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;

        limit_req zone=code_limit burst=200 nodelay;
    }
}

粘贴完后按 Esc，输入 :wq 回车保存退出。

然后启用站点并删除默认配置：

ln -sf /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/
rm -f /etc/nginx/sites-enabled/default

第四步：配置腾讯云安全组

在腾讯云控制台 → 云服务器 → 找到你的实例 → 安全组，设置以下规则：

方向端口协议来源策略用途
入站22TCP你的办公 IP/32允许SSH 管理
入站80TCP0.0.0.0/0允许证书续期 HTTP 验证
入站443TCP0.0.0.0/0允许HTTPS Web 访问
入站所有端口全部0.0.0.0/0拒绝其他端口一律拒绝

特别注意：8080 端口不出现在安全组中——因为 code-server 只绑 127.0.0.1，加上安全组也不让外部访问。

第五步：申请免费 SSL 证书

# 先启动 nginx（临时用 HTTP 验证）
systemctl start nginx

# 申请 Let's Encrypt 证书
certbot --nginx -d dev.example.com --non-interactive --agree-tos -m 你的邮箱@example.com

# 如果上面的命令报错，说明 nginx 配置中有 SSL 路径但证书不存在
# 用 standalone 模式先申请证书：
systemctl stop nginx
certbot certonly --standalone -d dev.example.com --non-interactive --agree-tos -m 你的邮箱@example.com
systemctl start nginx
nginx -t && systemctl reload nginx

# 设置证书自动续期（certbot 会自动加定时任务）
# 验证一下：
crontab -l | grep certbot
# 应该看到类似: 0 3 * * * certbot renew --quiet && systemctl reload nginx
# 如果没有添加成功，先检查证书是否有了，如果有了，手动添加定时任务检查自动续期
# 添加每天凌晨 3 点自动检查续期
  (crontab -l 2>/dev/null; echo "0 3 * * * certbot renew --quiet && systemctl reload nginx") | crontab -

在这里插入图片描述

第六步：验证部署

# 1. 检查 code-server 监听
ss -tlnp | grep 8080
# 应: 127.0.0.1:8080 （不是 0.0.0.0:8080）

# 2. 检查 nginx 监听
ss -tlnp | grep -E '443|80'

# 3. 尝试从外部直接访问 8080（应该不通）
# 在你的本地电脑上执行：
# curl http://服务器IP:8080    ← 应该超时或拒绝连接

# 4. 检查 code-server 服务状态
systemctl --user status code-server

# 5. 检查 nginx 状态
systemctl status nginx

浏览器打开 https://dev.example.com（替换成你的域名）：

  • 地址栏出现小锁图标（HTTPS 生效）
  • 看到 code-server 登录页面
  • 输入密码后进入 VS Code 界面

在这里插入图片描述
在这里插入图片描述

第七步：初始化 Git 工作区

进入 code-server 后，做以下几件事：

# 打开终端（Ctrl+`），拉取代码
mkdir -p ~/workspace
cd ~/workspace

# 克隆你的项目
git clone git@github.com:你的用户名/你的项目.git
# 或者从零开始：
git init my-project
cd my-project

在 code-server 中安装常用扩展（左侧扩展面板搜索安装）：

扩展ID用途
Chinese (Simplified)MS-CEINTL.vscode-language-pack-zh-hans中文界面
GitLenseamodio.gitlensGit 历史可视化
Prettieresbenp.prettier-vscode代码格式化
ESLintdbaeumer.vscode-eslintJS/TS 代码检查
Pythonms-python.pythonPython 支持
Dockerms-azuretools.vscode-dockerDocker 管理（需服务器有 docker）

日常使用：你的开发工作流

部署完成后，每天的开发流程简化成这样：

1. 打开任意设备的浏览器 → https://dev.example.com
2. 输入密码 → 进入你的完整开发环境
3. Ctrl+` 打开终端 → git pull → 改代码 → 编译 → 调试
4. 侧边栏 Git 面板 → 查看 diff → 写 commit message → push
5. 关浏览器，走人
6. 换台电脑 → 打开浏览器 → 打开上一次的文件，接着写

什么环境不一致、什么本地装依赖报错、什么风扇起飞——全都不存在了。代码和数据都在服务器上，你只需要一个能打开浏览器的设备。

最终效果如下：
在这里插入图片描述

维护小贴士

code-server 升级：

curl -fsSL https://code-server.dev/install.sh | sh
# 重启后生效
systemctl --user restart code-server

查看 Nginx 访问日志（有人访问过你的环境一目了然）：

tail -f /var/log/nginx/access.log

SSL 证书续期检查：

certbot renew --dry-run  # 模拟续期，确认定时任务正常工作

服务器磁盘告警：每天写代码，日志和依赖会膨胀。建议定期清理：

# 查看磁盘使用
df -h
# 清理 apt 缓存
apt autoclean
# 清理 Docker 无用的镜像和容器（如果用了 Docker）
docker system prune -f
# nginx # 运维
Logo
https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

cover

当 AI 修图师装上“万能插头“：MCP 如何改变修图工作流

avatar AI编程社区
cover

2026年8月开发者实战指南：ChatGPT Plus / Pro + Codex 如何协同完成需求分析、编码、测试、调试与代码审查

avatar AI编程社区
cover

投资一台B300，部署Claude Opus 5多久才能回本？

avatar AI编程社区