如何搭建Code-Server：将 VS Code 搬到浏览器

技术社区 作者：iTrust 2025-04-28 13:03:53 阅读：10

 在日常的编程工作中，我们通常使用 VS Code 作为主力编辑器，它强大的功能和丰富的插件支持使得开发工作变得更加高效。然而，随着工作环境的变化（比如在不同设备间切换，或者远程开发），如何持续保持高效的编程体验变得尤为重要。幸运的是，Code-Server 这个开源工具正是为了解决这个问题而诞生的。

Code-Server 是由 Coder 团队开发的一个工具，它可以将本地的 VS Code 编辑器搬到浏览器上。通过在云服务器或本地机器上搭建 Code-Server，我们可以在任何设备上通过浏览器访问 VS Code，带来无缝的开发体验。

本文将介绍如何搭建并配置一个 Code-Server 环境，让你随时随地都能享受 VS Code 带来的便利。

一、什么是 Code-Server？

Code-Server 是一个开源项目，它将 Visual Studio Code 的完整功能带到了浏览器端。它可以让你在任何地方通过浏览器远程访问和使用 VS Code，而无需安装本地的编辑器。这种方式非常适合于以下几种场景：

• 在不同的设备间切换工作。

• 使用云服务器进行远程开发，尤其是在资源较为受限的设备（如平板、轻量级笔记本）上进行开发。

• 实现与团队成员的远程协作，避免开发环境的差异问题。

二、搭建 Code-Server 的准备工作

在开始搭建之前，我们需要一个运行 Code-Server 的机器。你可以选择使用以下任一环境：

• 本地机器：如你的开发机器（Linux、macOS 或 Windows）。

• 云服务器：如 AWS、阿里云、腾讯云等云平台的虚拟机。

硬件配置推荐

我们将以 Linux (Debian) 系统 为例，来展示如何搭建 Code-Server，其他操作系统也有类似的步骤。

三、安装和配置 Code-Server

1. 安装依赖项

在搭建 Code-Server 之前，确保你的系统中已经安装了以下软件：

• Node.js（Code-Server 依赖）

• npm（Node.js 的包管理器）

• curl（用于下载文件）

使用以下命令安装它们：

sudo apt update sudo apt install -y curl wget nodejs npm

2. 安装 Code-Server

在终端中执行以下命令，下载并安装 Code-Server：

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

这个命令会下载并执行 Code-Server 安装脚本。安装完成后，code-server 将自动被安装到系统中。

3. 启动 Code-Server

安装完成后，我们可以通过命令行启动 Code-Server。默认情况下，Code-Server 会监听在 localhost:8080 端口上。

code-server

执行命令后，Code-Server 会开始运行，输出类似如下的日志信息：

info  Server listening on http://127.0.0.1:8080 info    - Use `code-server --help` to see the full list of options

如果你希望通过远程机器来访问 Code-Server，可以通过指定 0.0.0.0 来让它监听所有 IP 地址：

code-server --bind-addr 0.0.0.0:8080

4. 配置密码保护

默认情况下，Code-Server 会要求你输入一个密码才能访问。你可以设置自己的密码，或者禁用密码验证。

1. 设置密码：在启动 Code-Server 时，通过 --password 选项设置密码：

   code-server --password yourpassword

2. 禁用密码验证：如果你不想使用密码保护（不推荐用于生产环境），可以禁用密码：

   code-server --auth none

5. 配置反向代理（可选）

如果你希望在公网上访问 Code-Server，建议配置一个反向代理（如 Nginx 或 Apache），这样可以通过域名访问并提高安全性。

示例：使用 Nginx 配置反向代理

1. 安装 Nginx：

   sudo apt install nginx

2. 配置 Nginx 反向代理：

   创建一个新的配置文件 /etc/nginx/sites-available/code-server：

   server {     listen 80;     server_name your-domain.com;     location / {         proxy_pass http://127.0.0.1:8080;  # Code-Server --bind-addr         proxy_set_header Host $host;         proxy_set_header X-Real-IP $remote_addr;         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;         proxy_set_header X-Forwarded-Proto $scheme;     } }

3. 启用该配置并重启 Nginx：

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

6. 使用 HTTPS（可选）

如果你希望使用 HTTPS 来访问 Code-Server，可以使用 Let's Encrypt 来生成免费的 SSL 证书。

• 安装 Certbot 并生成证书：

  sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d your-domain.com

• 然后在 Nginx 配置文件中启用 HTTPS。

四、访问 Code-Server

至此，你已经成功安装并配置了 Code-Server。接下来，你可以通过以下方式访问它：

1. 本地访问：在浏览器中输入 http://localhost:8080（或 https://your-domain.com，如果已设置 HTTPS）。

2. 远程访问：如果你已经配置了反向代理和 SSL，那么通过你配置的域名和端口就可以访问。

输入设置的密码后，你将进入与本地 VS Code 完全相同的开发环境，开始编写代码。

五、结语

通过搭建 Code-Server，你将能够随时随地通过浏览器访问你熟悉的 VS Code 开发环境，摆脱了在不同设备间频繁切换和配置环境的困扰。无论是本地部署还是云端部署，Code-Server 都为开发者提供了强大的便利，极大地提高了远程办公和跨设备开发的效率。

希望本文能够帮助你顺利搭建并使用 Code-Server，享受高效的云端编程体验！