浏览器也能开发代码？Code-Server带你玩转云端编程！

vvw&

已于 2025-05-31 23:06:37 修改

阅读量1.1k

点赞数 31

分类专栏：技术文章文章标签：服务器运维 Windows

于 2024-10-27 19:09:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53510183/article/details/143272760

版权

技术文章专栏收录该内容

119 篇文章

订阅专栏

想象一下，无论你身处咖啡厅，还是在高铁上，甚至在旅途中，只需打开手机或平板电脑的浏览器，就能流畅地编写代码、调试程序。这并非遥不可及，Code-Server 就能帮你实现！

你也许使用过其他的云开发平台，例如 GitHub Codespaces、CodeSandbox、Gitpod、StackBlitz、Replit 等等。仔细观察你会发现，这些平台的界面都与 VS Code 非常相似。这是因为它们都是基于 VS Code 的 Web 端——code-server 进行二次开发的。

接下来我会教大家如何部署这样一个云开发平台，自己随时随地只要有网络就可以进行开发和调试。
先甩几张官方的图片，让你看看 Code-Server 的魅力：

code-server官方介绍图片2

项目介绍

code-server 是由 Coder 公司开发的一款开源项目，它将 VS Code 的强大功能搬到了云端，让你可以像使用本地 IDE 一样在浏览器中进行开发。

相关链接:

Github地址：https://github.com/coder/code-server
官网：https://coder.com/
官方文档：https://coder.com/docs/
Docker 镜像：https://hub.docker.com/r/linuxserver/code-server

准备工作

准备一台云服务器

若尚未拥有服务器，可前往雨云官网 https://rainyun.ivwv.site 进行注册，新用户有专属优惠。

开始部署

接下来，我们将通过 Docker、Docker Compose 和一键脚本方式进行部署。

环境变量介绍

首先，我们来介绍一下 code-server 的环境变量：

参数	中文解释
`-p 8443`	指定 Web 图形界面监听的端口号
`-e PUID=1000`	指定运行 code-server 的用户 ID
`-e PGID=1000`	指定运行 code-server 的用户组 ID
`-e TZ=Asia/Shanghai`	指定 code-server 使用的时区
`-e PASSWORD=password`	（可选）设置 Web 图形界面的登录密码，如果 `PASSWORD` 和 `HASHED_PASSWORD` 都没有提供，则不会启用身份验证
`-e HASHED_PASSWORD=`	（可选）设置 Web 图形界面的登录密码，优先级高于 `PASSWORD` 参数
`-e SUDO_PASSWORD=password`	（可选）如果设置了此变量，则用户在 code-server 终端中将拥有 sudo 权限，密码为指定值
`-e SUDO_PASSWORD_HASH=`	（可选）通过哈希值设置 sudo 密码，优先级高于 `SUDO_PASSWORD` 变量。格式为 `$type$salt$hashed`
`-e PROXY_DOMAIN=code-server.my.domain`	（可选）如果设置了此变量，则该域名将被代理用于子域名代理
`-e DEFAULT_WORKSPACE=/config/workspace`	（可选）如果设置了此变量，则 code-server 将默认打开此目录
`-v /config`	挂载 code-server 的配置文件目录

部分环境变量说明:

SUDO_PASSWORD: 如果你在非 root 用户下搭建，想要进行一些 root 权限的操作，就需要设置这个，否则会提示没有权限。
PROXY_DOMAIN: 一般不需要理会这个。

接下来的两种 docker 方式，如果你想快速运行部署尝试，直接按照下面的命令和配置即可。

docker run 命令：

 docker run -d \
  --name=code-server \
  -e PUID=1000 \
  -e PGID=1000 \
  -e TZ=Asia/Shanghai \
  -e PASSWORD=password `#可选，设置密码` \
  -e DEFAULT_WORKSPACE=/config/workspace `#可选，设置默认工作区` \
  -p 8443:8443 \
  -v ~/code-server/config:/config \
  --restart unless-stopped \
  lscr.io/linuxserver/code-server:latest

docker compose 方式(选其一)：

vim docker-compose.yaml

将以下内容填入

version: "3.8"  # 指定 Docker Compose 文件版本

services:
  code-server:
    image: lscr.io/linuxserver/code-server:latest  # 指定镜像
    container_name: code-server  # 容器名称
    restart: unless-stopped  # 重启策略
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Shanghai
      - PASSWORD=password # 可选，设置密码
      - DEFAULT_WORKSPACE=/config/workspace # 可选，设置默认工作区
    ports:
      - "8443:8443"  # 端口映射
    volumes:
      - ~/code-server/config:/config  # 数据卷挂载

启动

docker compose up -d

以上两种方式任选其一即可，等待拉取好镜像并成功启动后，可以使用 docker ps -a 查看是否正常运行。按照我给出的命令，容器内的工作区会在 ~/code-server/config/workspace 目录下。接下来我跟着我一起完成下面创建文件步骤：

cd ~/code-server/config/workspace

# 这里我们先创建一个文件，待会打开浏览器进入部署好的 code-server中再查看
echo "hello world" > hello.txt

效果查看

浏览器网址栏输入 http://<你的服务器IP地址>:8443 例如 http://154.9.227.239:8443 当看到下面登录界面时，就说明部署成功了。
当看到下面登录界面时，就说明部署成功了

输入我们创建时设置的环境变量 PASSWORD 的值即可登录，我这里是 password，输入后点击 SUBMIT 按钮即可。登录成功后，我们就进入到了 code-server 的工作区了，可以看到网址栏 folder 路由参数的值等于 /config/workspace 这正是我们 DEFAULT_WORKSPACE 环境变量的值。再看左侧文件资源管理器，可以看到我们创建的文件 hello.txt 了。点开后看到是我们刚刚创建的文件内容，也就是 hello world。

一键脚本安装

这里我还给大家介绍一下一键部署脚本的使用方法。
终端运行如下命令：

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

运行后会输出如下信息，说明安装成功：

➜  ~ curl -fsSL https://code-server.dev/install.sh | sh
Ubuntu 24.04.1 LTS
Installing v4.93.1 of the amd64 deb package from GitHub.

+ mkdir -p ~/.cache/code-server
+ curl -#fL -o ~/.cache/code-server/code-server_4.93.1_amd64.deb.incomplete -C - https://github.com/coder/code-server/releases/download/v4.93.1/code-server_4.93.1_amd64.deb
######################################################################## 100.0%
+ mv ~/.cache/code-server/code-server_4.93.1_amd64.deb.incomplete ~/.cache/code-server/code-server_4.93.1_amd64.deb
+ dpkg -i ~/.cache/code-server/code-server_4.93.1_amd64.deb
Selecting previously unselected package code-server.
(Reading database ... 124053 files and directories currently installed.)
Preparing to unpack .../code-server_4.93.1_amd64.deb ...
Unpacking code-server (4.93.1) ...
Setting up code-server (4.93.1) ...

deb package has been installed.

To have systemd start code-server now and restart on boot:
  sudo systemctl enable --now code-server@$USER
Or, if you don't want/need a background service you can run:
  code-server

Deploy code-server for your team with Coder: https://github.com/coder/coder

接下来需要修改一下配置文件：

vim /root/.config/code-server/config.yaml

# 会看到以下信息
bind-addr: 127.0.0.1:8080
auth: password
password: 91f68f9646aef0b1e811a113
cert: false

这里我们需要将 bind-addr 设置为 0.0.0.0:8080,不然会访问不了。初始密码太长了，我们需要将 password 设置为我们想要的密码。
然后保存退出即可。
以下是我修改后的配置文件：

bind-addr: 0.0.0.0:8080
auth: password
password: password
cert: false

启动 code-server

# 设置开机自启动
sudo systemctl enable --now code-server@$USER

# 启动
sudo systemctl start code-server@$USER

到这一步，我们就部署好了，浏览器可以打开 http://<你的服务器IP地址>:8080 进行访问。
一键脚本方式安装

与 docker 方式一样，输入密码就可以登录了。如果你想控制code-server, 还有以下命令：

# 停止
sudo systemctl stop code-server@$USER

# 重启
sudo systemctl restart code-server@$USER

插件安装

如果是经常使用 VScode 的小伙伴，那么一定也会安装中文插件吧。我也教一下不会安装的小伙伴吧，毕竟，我可是要手把手教会呢！点击左侧插件图标，搜索框输入 MS-CEINTL.vscode-language-pack-zh-hans 安装第一个即可，安装好后刷新页面即可。

好用插件推荐

这里我也推荐几个好用的开发插件吧，希望能给大家带来帮助：

Codeium.codeium: 一个可以平替 Github Copilot 的代码补全插件，在部署好的 code-server 中可以直接登录使用。
Continue.continue: 一个AI插件。

相关链接

我的博客：https://blog.ivwv.site
雨云官网：https://rainyun.ivwv.site