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

Y_
1,364 阅读5分钟

你是否想过，随时随地，都能在任何设备上轻松编码？ 你是否厌倦了笨重的IDE，渴望更灵活、便捷的开发体验？ 今天就来体验 Code-Server 的魅力，让你的浏览器秒变开发利器，彻底摆脱对特定电脑的束缚，开启云端编程新纪元！

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

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

接下来我甩几张官方的图片，让你看看 Code-Server 的魅力：

code-server官方介绍图片1

code-server官方介绍图片2

项目介绍

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

相关链接:

环境准备

最低配置说明

code-server 官方建议服务器最低配置是：

  • 1 GB 内存
  • 2 个 CPU 内核
  • 必须能启用 WebSockets (这个不管)

服务器准备

必要前提:

  • 一台有公网 IP 的 Linux 服务器，可以选择腾讯云，阿里云，或者雨云等。
  • 本文以 雨云 为例，新用户注册有优惠。 您可以点击此链接 www.rainyun.com/NTEzMTM1_?s… 注册账号。

注册完毕后，请按照以下步骤创建一台自己的云服务器。

创建云服务器

  1. 点击 云产品 → 云服务器 → 立即购买。

创建云服务器-1

  1. 选择距离您较近的区域，以保证低延迟。

选择区域

  1. 带宽建议选择上传和下载大于 30M 即可。
  2. 处理器和内存建议选择 2 核 4G。当然，如果想要搭建好的在线 IDE 运行更流畅，还是需要配上更好的配置。

配置选择和带宽大小

  1. 选择 Ubuntu 22.04 版本，并勾选预装 Docker，接下来的教程会用到 Docker。

选择系统和预装 docker

  1. 最后点击 立即购买，并按照提示进行购买。
  2. 购买后等待机器部署完毕，点击购买的服务器，进入管理面板，找到远程连接相关信息。

进入服务器管理界面

服务器用户名以及密码

  1. 使用 PowerShell 进行远程连接。

打开powershell

  1. 输入 ssh root@您的服务器IP 例如 ssh root@154.9.227.239 回车后，首次需要输入 yes，再次回车后即可登录服务器。

ssh连接

到此为止，我们的云服务器就创建好了。

开始部署

接下来，我们将通过 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 中可以直接使用，需要登录，按照官方的步骤即可登录。 Codeium.codeium转存失败，建议直接上传图片文件

  • Continue.continue: 一个领先的开源人工智能代码助手。您可以连接任何模型和任何上下文，在 VS Code 和 JetBrains 中构建自定义的自动完成和聊天体验。 Continue.continue

相关链接

雨云 - 新一代云服务提供商

我的博客：https://blog.ivwv.site

avatar
文章
阅读
粉丝