企业官网建设流程全解析

前言

在台式机、笔记本和平板之间切换开发时，真正麻烦的往往不是代码文件，而是每台设备都要重新安装编辑器、插件和相关工具。环境配置稍有不同，同一个项目还可能出现不同的运行结果。

如果手中有一台能够长期运行的Linux主机、服务器或者NAS，可以考虑把开发环境集中放在这台设备上。日常使用时，其他电脑只需要打开浏览器，就能进入同一套文件目录和编辑环境。

code-server可以将接近VS Code的开发界面运行在服务器中，并通过网页提供文件编辑、插件安装、终端和项目管理等功能。代码和运行环境保存在服务器端，本地设备主要负责页面访问和操作。

本文将从Docker安装开始，完成code-server镜像下载、容器启动和密码配置，并演示中文界面、Live Server插件和终端功能。最后再通过cpolar配置公网地址，让人在其他网络环境中也能进入这套在线开发环境。

1.什么是code-server？

code-server是一个开源项目，它将Microsoft Visual Studio Code（VS Code） 运行在远程服务器上，并通过Web浏览器 提供访问能力。简单来说：

code-server = VS Code + 浏览器访问 + 云端运行

核心特点

工作原理

• 你在服务器（本地、云主机、NAS 等）上运行 code-server
• code-server 启动一个 Web 服务（默认端口 8080）
• 你通过浏览器访问 http://你的服务器IP:8080
• 输入密码后，即可在网页中使用 VS Code 界面操作服务器上的文件

典型使用场景

• 远程开发：在家连接公司/实验室的高性能服务器写代码
• 教学演示：老师一键分发统一编程环境给学生
• 移动办公：用 iPad + 键盘随时随地编码
• 资源受限设备：在低配笔记本或树莓派上通过浏览器使用强大 IDE
• 团队共享环境：快速为新成员提供预装工具链的开发沙箱

技术栈简述

• 基于 VS Code 的开源版本（OSS） 构建
• 使用 Node.js 和 TypeScript 开发
• 通过 WebSocket 实现编辑器与浏览器的实时同步
• 支持 Linux / macOS / Windows / Docker / Kubernetes 部署

2.安装docker

安装Docker：

curl-fsSLhttps://get.docker.com/|sh

启用Docker服务：

systemctlenable--nowdocker

检查Docker状态：

systemctl statusdocker

3.部署code-server

3.1 安装code-server

使用以下命令下载最新的code-server镜像：

dockerpull codercom/code-server:latest

启动code-server容器：

dockerrun-d\--namecode-server\-p8000:8080\-ePASSWORD=123456\-v/docker/vscode/data:/root/.vscode-server\codercom/code-server:latest

验证部署，打开docker发现确实已经启动容器啦：

部署完成后，在浏览器中输入http://localhost:8008就能看到code-server的界面：

3.2 使用code-server

使用启动命令的密码“123456”登录：

登录成功后，同意协议并进行下一步：

安装中文版vscode:

点击如图所示：

选择中文版。

然后就成功啦！

搜索“Live Server”安装，为了后续查看页面效果：

可以新建一个文件，创造页面看看：

也可以使用终端：

code-server是一个强大的工具，它让你可以在任何设备的浏览器中运行完整的VS Code开发环境。但默认情况下，code-server只能在本地访问（如 http://localhost:8080），无法从外部网络直接使用。

这时候，你就需要一个内网穿透工具——而cpolar正是为此而生。

4.安装cpolar实现随时随地开发

4.1 什么是cpolar？

cpolar是一款安全高效的内网穿透工具，无需公网IP或复杂配置，只需一条命令，即可将本地服务器、Web服务或任意端口映射到公网，让你随时随地远程访问内网应用，特别适合开发调试、远程运维和应急部署等场景。

4.2 部署cpolar

cpolar 可以将你本地电脑中的服务（如 SSH、Web、数据库）映射到公网。即使你在家里或外出时，也可以通过公网地址连接回本地运行的开发环境。

❤️以下是安装cpolar步骤：

使用一键脚本安装命令：

sudocurlhttps://get.cpolar.sh|sh

安装完成后，执行下方命令查看cpolar服务状态：（如图所示即为正常启动）

sudosystemctl status cpolar

Cpolar安装和成功启动服务后，在浏览器上输入虚拟机主机IP加9200端口即:【http://ip:9200】访问Cpolar管理界面，使用Cpolar官网注册的账号登录,登录后即可看到cpolar web 配置界面,接下来在web 界面配置即可：

打开浏览器访问本地9200端口，使用cpolar账户密码登录即可,登录后即可对隧道进行管理。

5.配置公网地址

登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理——创建隧道：

• 隧道名称：可自定义，本例使用了:vscode，注意不要与已有的隧道名称重复
• 协议：http
• 本地地址：8000
• 域名类型：随机域名
• 地区：选择China Top

创建成功后，打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了公网地址，接下来就可以在其他电脑或者移动端设备（异地）上，使用地址访问。

访问成功。

6.保留固定公网地址

使用cpolar为其配置二级子域名，该地址为固定地址，不会随机变化。

点击左侧的预留，选择保留二级子域名，地区选择china Top，然后设置一个二级子域名名称，我使用的是vscode，大家可以自定义。填写备注信息，点击保留。

登录cpolar web UI管理界面，点击左侧仪表盘的隧道管理——隧道列表，找到所要配置的隧道，点击右侧的编辑。

修改隧道信息，将保留成功的二级子域名配置到隧道中

• 域名类型：选择二级子域名
• Sub Domain：填写保留成功的二级子域名
• 地区: China Top

点击更新

更新完成后，打开在线隧道列表，此时可以看到随机的公网地址已经发生变化，地址名称也变成了保留和固定的二级子域名名称。

最后，我们使用固定的公网地址在任意设备的浏览器中访问，可以看到成功访问的页面，这样一个永久不会变化的二级子域名公网网址即设置好了。

总结

完成以上配置后，code-server已经可以通过浏览器访问。登录后可以编辑服务器中的文件、安装插件、使用终端，并按照项目需求继续配置语言环境和开发工具。

安装中文语言包后，界面操作会更直观；配合Live Server等插件，也可以在编辑HTML、CSS和JavaScript文件时查看页面效果。更换电脑后，不需要重新搭建全部编辑环境，只要打开同一个code-server地址即可继续工作。

通过cpolar建立公网隧道后，原本只能在本机或局域网中访问的code-server页面，也可以从其他网络环境打开。继续设置固定二级子域名后，访问入口能够保持不变，更适合长期使用。

需要注意的是，code-server不仅能够读取和修改文件，还能通过终端执行命令。正式开放公网访问前，应更换示例中的简单密码，限制容器权限和挂载目录，并定期更新镜像、备份项目文件及检查异常登录情况。同时还要核对端口映射，本文Docker命令对应的访问端口应与实际映射配置保持一致。