NAS部署CodeServer：远程开发环境搭建与使用教程

Code Server 是一款由 Coder 团队开发的开源工具，它能够将 Visual Studio Code 编辑器部署到服务器端，用户通过 Web 浏览器即可访问，享受几乎完整的 VS Code 开发功能。这种部署方式特别适合跨设备远程编程、团队环境统一管理以及云端协作项目，为开发者提供灵活高效的编码体验。

Image

CodeServer安装步骤

通过 Docker Compose 可以快速在 NAS 上部署 Code Server，以下是一个标准配置示例：

services:  
  code-server:  
    image: linuxserver/code-server:latest  
    container_name: code-server  
    environment:  
      - PUID=1000  
      - PGID=1000  
      - TZ=Asia/Shanghai  
    volumes:  
      - ./config:/config  
    ports:  
      - 8443:8443  
    restart: unless-stopped

参数说明（更多选项建议参考官方文档）：

  • PUID（环境变量，可选）：用于设置用户权限的 UserID
  • PGID（环境变量，可选）：用于设置用户组权限的 GroupID
  • TZ（环境变量）：配置系统时区，例如 Asia/Shanghai
  • PASSWORD（环境变量，可选）：可设置访问密码以增强安全性
  • 8443（端口）：用于访问 Web 界面的默认端口
  • 8080（端口，可选）：常用于运行开发项目的备用端口
  • 5500（端口，可选）：另一个常用端口，适合项目调试和运行

CodeServer基本使用

在浏览器地址栏输入 http://NAS的IP:8443 即可访问 Code Server 的 Web 界面，开始远程开发工作。

Image

首次使用时，系统会提示选择工作文件夹，勾选并确认信任目录以启用完整功能。

Image

个性化主题设置

点击界面左下角的设置图标，选择颜色主题选项来自定义外观。

Image

Code Server 提供了丰富的主题选择，包括多种浅色和深色方案，用户可以根据个人偏好进行调整。深色主题在长时间编码时能有效减轻视觉疲劳，提升工作舒适度。

Image

切换到深色主题后，代码编辑区域背景变暗，文字对比度更柔和，有助于保护视力并提高专注力。

Image

中文界面配置

打开扩展市场界面，首次加载可能需要一些时间，请耐心等待。

Image

在搜索框中输入“chinese”关键词，找到中文语言包后点击安装按钮。

Image

系统会提示确认信任该扩展，选择信任并继续安装过程。

Image

安装完成后，界面可能不会立即切换为中文，需要进行额外设置。

Image

点击左下角图标打开控制面板，或使用快捷键 Ctrl+Shift+P 调出命令面板。

Image

在搜索框中输入“Configure Display Language”命令。

Image

从语言列表中选择“中文（简体）”或其他中文选项。

Image

确认选择后，点击重启按钮使设置生效。

Image

重启后界面将切换为中文，菜单和提示文字都会以中文显示，方便本地用户操作。

Image

实战演示：创建HTML页面

为了帮助初学者快速上手，这里通过一个简单的 HTML 网页示例演示基本操作流程。

打开资源管理器侧边栏，新建一个名为“html”的文件夹用于存放项目文件。

Image

展开新建的文件夹，右键点击创建名为“index.html”的文件。

Image

文件创建后，右侧编辑区域即可开始编写代码，享受流畅的远程开发体验。

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>hello world</title>  
    <style>  
      body {  
        background-color: black;  
        color: white;  
        margin: 0;  
        min-height: 100vh;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        font-family: Arial, sans-serif;  
        font-size: 24px;  
      }  
    </style>  
</head>  
  
<body>  
    hello world  
</body>  
  
</html>

Image

编写完 HTML 代码后，需要安装一个实时预览插件。在扩展商店中搜索“Live Server”并安装。

Image

选择信任该扩展并完成安装步骤。

Image

安装成功后，编辑器底部状态栏会显示“Go Live”按钮，表示插件已就绪。

Image

回到 HTML 文件编辑界面，右键点击文件，菜单中选择“Open with Live Server”选项启动实时预览。

Image

系统会自动在新标签页中打开预览页面，注意地址栏显示的是经过代理的本地地址。

Image

如果直接点击文件夹链接可能会遇到路径问题，正确的访问地址应包含完整路径信息。

Image

如果在 Docker 配置中映射了 5500 端口，也可以直接通过该端口访问运行中的项目页面。

Image

总结与评价

对于普通用户而言，部署 Code Server 可能并非必要，因为本地编辑器已能满足基本需求。然而，对于程序员、开发团队以及编程学习者来说，这种远程开发方式提供了显著的便利性和功能性优势。用户只需保持文件同步，即可随时随地通过网页继续工作，同时保留 VS Code 熟悉的操作逻辑和丰富的扩展生态系统，使用体验与本地编辑器高度一致。

综合推荐指数：⭐⭐⭐⭐（普通用户可能用不到，因此未给满分）

使用体验评分：⭐⭐⭐⭐⭐（完整继承 VS Code 功能，Web 端操作流畅自然）

部署难度评价：⭐⭐（过程简单，适合初学者尝试）