kekxv 技术日志

kekxv

0%

在Windows上运行Code Server：结合WSL打造你的云端VS Code开发环境

发表于 分类于 ， ， ，

前言：因为我的主力开发机器并不是Windows，但是我又需要使用vs2015开发Windows的应用程序。所以，我希望能通过web ide 进行开发，而不是远程工具，这样我就可以将他部署在任何地方，实体机、虚拟机都可

各位开发者，想必都对 VS Code 这款强大的本地代码编辑器情有独钟。它轻量、高效，插件生态丰富。但当你需要一个可以在任何浏览器中访问的 VS Code 环境时，例如在平板上编写代码，或者远程连接到一台高性能服务器进行开发，code-server 就应运而生了。

code-server 允许你在服务器上运行 VS Code 后端，并通过浏览器前端进行交互，提供与本地 VS Code 几乎一致的使用体验。然而，code-server 本身并不直接支持 Windows 系统。那么，如何在 Windows 上实现这种“云端 IDE”的梦想呢？答案就是利用 **Windows Subsystem for Linux (WSL)**！

通过 WSL，我们可以在 Windows 系统内部运行一个完整的 Linux 环境，从而完美规避 code-server 不支持 Windows 的问题，同时又能享受到 Windows 系统的便利。

本文将详细指导你如何一步步在 Windows 上通过 WSL 安装和配置 code-server，甚至包括如何集成 Bazel 等构建工具，以及实现开机自启动和网络访问。

准备工作：安装 WSL

为了让 code-server 在 Windows 上运行，我们首先需要安装并配置好 WSL。如果你尚未安装，打开 PowerShell (以管理员身份运行) 或命令提示符，执行以下命令：

1
wsl --install

系统会提示你选择一个 Linux 发行版（例如 Ubuntu），然后会自动完成下载和安装。安装完成后，你可能需要重启计算机。

提示： 如果你已经安装了 WSL，可以直接进入下一步。要查看已安装的发行版，可以运行 wsl -l -v。

在 WSL 中安装 Code Server

进入 WSL 环境后（直接在终端输入 wsl 即可），你可以使用以下命令来安装 code-server。这是官方推荐的安装脚本，它会为你处理大部分依赖：

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

安装的具体过程和最新信息，请务必参考 code-server 的官方 GitHub 文档：coder/code-server#getting-started。

安装完毕后，你可以尝试执行 code-server 命令来测试是否安装成功。

重要提示： code-server 默认会生成一个随机密码用于访问。你可以在其配置文件中修改或禁用密码。默认的配置文件路径是 ~/.config/code-server/config.yaml。你可以通过 code-server --help 查看更多配置选项。

此时，你应该就可以在浏览器中访问 http://localhost:8080 来使用你的 code-server 了！

高级集成：WSL 与 Windows 应用的互操作性（以 Bazel 为例）

WSL 的一个强大特性是它能够直接在 Linux 环境中执行 Windows 的 .exe 程序，例如 ping.exe。这一点对于需要与 Windows 本地工具链交互的开发场景（如 Bazel 构建）尤其有用。

如果你是 Bazel 用户，并且希望在 WSL 中的 code-server 里调用 Windows 上的 Bazel，可以按照以下步骤操作：

  1. 安装 Bazel for Windows： 首先将 bazel.exe 或 bazelisk.exe 安装到你的 Windows 系统中。

  2. 创建软链接： 在 WSL 终端中，你需要将 Windows 上的 Bazel 可执行文件链接到 Linux 的 PATH 路径下，使其可以直接被 code-server 的终端识别。

    • 首先，在 WSL 中使用 which bazel.exe 或 which bazelisk.exe 来查看其在 WSL 中映射的路径（通常在 /mnt/c/Program Files/... 等）。
    • 然后，创建一个软链接到 /usr/local/bin 目录：
      1
      ln -s /mnt/c/Path/To/Your/bazelisk.exe /usr/local/bin/bazel
      请将 /mnt/c/Path/To/Your/bazelisk.exe 替换为你在 WSL 中找到的实际路径。注意： 软链接名称 bazel 不应包含 .exe 后缀。

    重要注意事项： Bazel 不支持直接在网络路径（如 Samba 共享）上进行构建。因此，你的项目代码最好存放在 Windows 的本地磁盘（例如 C: 盘或 D: 盘）上，这些路径在 WSL 中会映射为 /mnt/c/ 或 /mnt/d/。

配置完毕后，你就可以在 code-server 的网页终端中执行 bazel version 来测试命令了。Bazel 具备智能的环境发现能力，通常能够自动找到像 Node.js、Visual Studio 等开发环境，无需在 WSL 内部进行额外配置。

Code Server 开机自启动配置

在 Windows 上让 code-server 开机自启动，我们不推荐使用 WSL 内部的 systemctl 或 service 进行管理。因为这样做，WSL 环境无法自动继承 Windows 的环境变量，你需要手动设置，非常麻烦。

一个更简单高效的方法是创建一个 Windows 批处理 (BAT) 脚本，并将其放到 Windows 的启动目录，或者通过 Windows 的任务计划程序来管理。

方法一：使用 BAT 脚本（推荐新手）

创建一个 .bat 文件（例如 code_server_startup.bat），将其内容复制到文件中，并根据你的实际情况进行修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
@echo off
rem code_server_startup.bat
rem This script starts code-server inside WSL with specific environment variables and aliases.

rem --- Configuration ---

rem Define the WSL distribution name if you have multiple and want to target a specific one.
rem If omitted, 'wsl.exe' will use your default WSL distribution.
rem Example: set "WSL_DISTRO_NAME=Ubuntu-22.04"
set "WSL_DISTRO_NAME=Ubuntu"
rem <-- Change this to your WSL distro name if not 'Ubuntu' or if you want to be specific.
rem     To find your distro names, open CMD/PowerShell and run 'wsl -l -v'

rem Path to the code-server executable within WSL.
rem Usually it's in the PATH (e.g., if installed via code-server.dev/install.sh), so just 'code-server' is enough.
rem If not, specify the full path, e.g., CODE_SERVER_PATH=/usr/local/bin/code-server
set "CODE_SERVER_PATH=code-server"

rem Define the default workspace for code-server.
rem This will be the initial folder opened when code-server starts.
rem 这里是code-server启动时默认打开的工作目录
set "DEFAULT_WORKSPACE=/mnt/c/work/"
rem <-- 请根据你的实际情况修改，例如 /mnt/d/my-projects

rem --- End Configuration ---

echo Starting code-server in WSL (Distro: %WSL_DISTRO_NAME%)...
echo Default Workspace: %DEFAULT_WORKSPACE%

rem Construct the command to be executed inside WSL.
rem DEFAULT_WORKSPACE='%DEFAULT_WORKSPACE%' sets the environment variable for code-server inside WSL.
rem %CODE_SERVER_PATH% starts code-server.
rem The 'bash -c' ensures all commands run sequentially in a new bash session.
set "WSL_COMMAND=DEFAULT_WORKSPACE='%DEFAULT_WORKSPACE%' %CODE_SERVER_PATH% --bind-addr 0.0.0.0:8080"
rem 注意：这里添加了 --bind-addr 0.0.0.0:8080 以确保code-server监听所有网络接口，方便外部访问

rem Execute the command in WSL.
rem Using 'start "" /min' will run the WSL console window minimized in the background.
rem If you want to see the WSL console, remove '/min'.
start "" /min wsl.exe -d %WSL_DISTRO_NAME% bash -c "%WSL_COMMAND%"

rem Optional: Add a pause here if you want to see any output/errors from the WSL command
rem before the batch window closes (if run by double-clicking).
rem If run from Startup, it will usually close automatically without a pause.
rem pause

将这个 .bat 文件放置到 Windows 的启动文件夹中，这样每次开机时它都会自动运行。你可以通过在运行 (Win + R) 中输入 shell:startup 来快速打开启动文件夹。

方法二：使用任务计划程序 (Task Scheduler)

对于更复杂的启动需求或需要更高的可靠性，建议使用 Windows 的任务计划程序。你可以配置一个任务，在用户登录时或系统启动时执行上述 .bat 脚本，并可以设置隐藏窗口运行等高级选项。

Code Server 的网络访问配置

默认情况下，code-server 在 WSL 中运行，只能通过 http://localhost:8080 在本地 Windows 上访问。如果你想让它在局域网内被其他设备访问，或者通过公网访问，需要进行额外的配置：

1. 配置 Code Server 监听所有网络接口

首先，确保 code-server 监听的地址不是 127.0.0.1（localhost），而是 0.0.0.0，这样它才能接受来自外部网络的连接。你可以在 ~/.config/code-server/config.yaml 配置文件中修改 bind-addr 选项，或者在启动命令中添加 --bind-addr 0.0.0.0:8080 参数。

示例（在 config.yaml 中）：

1
2
bind-addr: 0.0.0.0:8080
password: your_password_here # 或者使用 hashed_password

2. 配置 Windows 防火墙

即使 code-server 监听了 0.0.0.0，Windows 防火墙也可能会阻止外部连接。你需要创建一个入站规则，允许特定端口（默认是 8080）的流量通过。

  • 打开“Windows Defender 防火墙” -> “高级设置” -> “入站规则” -> “新建规则”。
  • 选择“端口”，下一步，选择“TCP”，特定本地端口填写 8080（或你配置的端口）。
  • 允许连接，选择适用的网络类型（域、专用、公用），命名并完成。

3. 端口转发（针对某些WSL2网络环境）

在某些 WSL2 的网络配置下，即使进行了上述设置，外部设备可能仍然无法直接访问。这是因为 WSL2 运行在一个轻量级虚拟机中，其网络与 Windows 主机是分离的。此时，你需要设置 Windows 的端口转发：

首先，检查现有的端口转发规则：

1
netsh interface portproxy show v4tov4

如果你的输出类似这样，说明已经有规则了：
img.png

如果没有，或者需要添加新的规则，可以使用以下命令：

1
netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=8088 connectaddress=127.0.0.1 connectport=8080

命令解释：

  • listenaddress=0.0.0.0：监听所有传入连接。
  • listenport=8088：对外暴露的端口。
  • connectaddress=127.0.0.1：将流量转发到本地（Windows主机自身）。
  • connectport=8080：Windows主机再将流量转发到WSL2中 code-server 监听的端口。

注意： listenport (8088) 和 connectport (8080) 不应相同，否则会引起冲突。你可以选择任何未被占用的端口作为 listenport。

如果需要删除转发规则：

1
netsh interface portproxy delete v4tovov4 listenaddress=0.0.0.0 listenport=8088

4. 公网访问（内网穿透）

如果你的电脑在内网中，但需要从外部网络访问 code-server，你就需要使用内网穿透服务。常见的工具有：

  • ngrok: 简单易用，免费版有流量限制。
  • NPS/FRP: 开源，需要一台公网服务器进行部署。

选择一个适合你的内网穿透工具，将其配置为将你的公网端口转发到 Windows 主机的 8088 端口（或你设置的 listenport）。

结语

通过 code-server 结合 WSL，我们成功地在 Windows 上搭建了一个功能完善、可远程访问的 VS Code 开发环境。这不仅让你能够充分利用 Windows 的本地资源，还能享受到 Linux 开发的便利性，同时实现随时随地通过浏览器进行编码的自由。

希望这篇博文能帮助你顺利配置自己的“云端 IDE”！如果你在实践过程中遇到任何问题或有更好的建议，欢迎在评论区留言交流。祝你编码愉快！