基于 Code-server 快速部署自己的云开发环境

1. 前言

Web IDE,顾名思义就是云端开发环境,把 IDE 部署在云上。打开浏览器,连上云 IDE,就可以方便敲代码跑程序。想象一下,带上一台 iPad 或者华为、小米平板,配上蓝牙键盘,坐在阴凉下,或者沙滩上,吹着海风,面朝大海敲代码,多么惬意。

其实 Web IDE 很早就有,但那些都只能说是玩具,直到现在才有一些不错的产品推出,比如微软和 Github 的 Visual Studio Codespaces、coding.net 的 Cloud Studio、华为云 CloudIDE 等。不过,这些产品要么还在测试,要么免费用会有限制或者价格不菲,目前还不是非常方便。

如果想要低成本愉快地使用,自己动手搭建是一个不错的方案。对配置要求不高的话,一年几十块一百多块就能买到廉价的 VPS 或者云主机就足够了。

自己DIY 一套Web IDE 比较成熟的方案有两个,code-server 和 Theia。毕竟 code-server 是基于VS code魔改的,与vs code的插件体系兼容性更好。所以更推荐code-server。Theia虽然有自己的插件体系,也宣称兼容vs code的插件,也是一套优秀的WEB IDE解决方案,但是兼容程度谁知道呢?

Code-server是由 Coder 开发的,把 VS Code 搬到了浏览器上。

下面使用三种方式在一台 4 核 8GB 内存 60 GB SSD 的 VPS 上部署 code-server。这台 VPS 一年 24 刀,配置能满足基本的使用。这篇文章很长,但部署过程很简单,如果不想看太多字,可直接拉到最后。

2. 申请云主机

到自己的云服务提供商界面创建云主机

2G8U 80G
OS: Centos 7.9

3. VPN 连接云服务商网络

4. 登录到云主机

1
ssh  -i ~/.ssh/ssh_key root@server_intranet_ip

5. 安装方式一:使用脚本安装 code-server

如果使用安装脚本,则可以预览安装过程中即将发生的情况:

如果对脚本安装有任何担心,请参阅Is curl|bash insecure?
如果仍然有担心,请参考本文介绍的其他安装方式

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

确定没有问题后,开始正式安装。

1
2
3

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

您可以通过添加或修改一个或多个标志来修改安装过程:

  • –dry-run:在不运行命令的情况下回显安装过程的命令。
  • –method:选择安装方法。
    • –method=detect:检测包管理器,但回退到–method=standalone。
    • –method=standalone:在~/.local 中安装一个独立版本的归档文件。
  • –prefix=/usr/local:在系统范围内安装独立版本的归档文件。
  • –version=X.X.X:安装 X.X.X 版本,而不是最新版本。
  • –help:参阅帮助文档。
  • –edge:安装最新的 edge 版本(即预发行版)

完成后,安装脚本将打印出运行和启动 code-server 的说明。

6. 安装方式二:rpm/deb 包安装方式

6.1. 下载安装包

1
2
3
4
5
6
7

# 适用于 x86_64硬件架构 Fedora, CentOS, RHEL, SUSE,Almalinux 等 Redhat 系列的操作系统
curl -L --output /tmp/code-server-4.92.2-amd64.rpm https://github.com/coder/code-server/releases/download/v4.92.2/code-server-4.92.2-amd64.rpm

# 适用于 x86_64硬件架构 Debian, Ubuntu等Debian系列操作系统
curl -L --output /tmp/code-server_4.92.2_amd64.deb https://github.com/coder/code-server/releases/download/v4.92.2/code-server_4.92.2_amd64.deb

其中版本可以替换成自己需要的版本, 版本信息以及 release notes 可以到 code-server 项目的release 页面查询

6.2. 安装软件包

1
2
3
4
5
6
7

# 适用于 x86_64硬件架构 Fedora, CentOS, RHEL, SUSE,Almalinux 等 Redhat 系列的操作系统
sudo rpm -i /tmp/code-server-4.92.2-amd64.rpm

# 适用于 x86_64硬件架构 Debian, Ubuntu等Debian系列操作系统
sudo dpkg -i /tmp/code-server_4.92.2_amd64.deb

6.3. 设置为开机启动

1
sudo systemctl enable --now code-server@$USER

现在可以访问 http://127.0.0.1:8080.
密码保存在 ~/.config/code-server/config.yaml

6.4. 开放端口

如果要允许外部电脑访问 code-server,这需要修改 IP 地址绑定并开发相应端口

vi ~/.config/code-server/config.yaml

1
2
3

bind-addr: 0.0.0.0:8080

开放端口

1
2
3
4
5
6
7
8
9
10
# 检查防火墙是否开启
sudo firewall-cmd --state

# 显示默认区域的所有规则
sudo firewall-cmd --list-all

# 如果开启, 需放行80端口
sudo firewall-cmd --add-port=8080/tcp --permanent
sudo firewall-cmd --reload

7. 安装方式三:Docker 安装方式

7.1. 安装 Docker

参考博客 安装并配置 docker | 鹏叔的技术博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 添加docker-ce yum源
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
# 把yum包更新到最新
sudo yum clean all && sudo yum update
# 安装依赖的的软件包
sudo yum install -y device-mapper-persistent-data lvm2 git
# 安装docker
# 1. 查看可用的docker版本
yum list docker-ce --showduplicates | sort -r

# 2. 选择一个版本进行安装
sudo yum install -y docker-ce-<version no e.g. 20.10.9-3.el7>

# 启动Docker,然后加入开机启动
sudo systemctl start docker
sudo systemctl enable docker

# 验证是否安装成功 docker version
sudo docker version

7.2. 设置 docker

使用 Docker 镜像加速器

由于网络原因,我们在 pull Image 的时候,从 Docker Hub 上下载会很慢。

1
2
3
4
5
6
sudo vi /etc/docker/daemon.json
#添加后:
{
"registry-mirrors": ["https://registry.docker-cn.com"],
"live-restore": true
}

重启 docker 服务

1
sudo systemctl restart docker

8. Docker 拉取 Code-Server 镜像, 并启动容器

拉取镜像:

1
docker pull codercom/code-server

启动容器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

mkdir -p ~/.config
docker run -itd --name code-server -p 0.0.0.0:8080:8080 \
-v "$HOME/.config:/home/coder/.config" \
-v "$PWD:/home/coder/project" \
-u "$(id -u):$(id -g)" \
-e "DOCKER_USER=$USER" \
codercom/code-server:latest

[2022-12-21T07:36:33.289Z] info Wrote default config file to ~/.config/code-server/config.yaml
[2022-12-21T07:36:33.553Z] info code-server 4.9.1 f7989a4dfcf21085e52157a01924d79d708bcc05
[2022-12-21T07:36:33.554Z] info Using user-data-dir ~/.local/share/code-server
[2022-12-21T07:36:33.567Z] info Using config file ~/.config/code-server/config.yaml
[2022-12-21T07:36:33.567Z] info HTTP server listening on http://0.0.0.0:8080/
[2022-12-21T07:36:33.567Z] info - Authentication is enabled
[2022-12-21T07:36:33.567Z] info - Using password from ~/.config/code-server/config.yaml
[2022-12-21T07:36:33.568Z] info - Not serving HTTPS

将容器设置为开机启动

1
docker update --restart=always code-server

在宿主机上用浏览器打开http://cloud_vm_ip:8080, 即可访问 code-server, 密码可以在容器的~/.config/code-server/config.yaml 中找到.

可以使用如下命令查看密码

1
2
3

docker exec -it code-server cat ~/.config/code-server/config.yaml

9. 安装插件以及配置 code-server

打开访问 code-server, 例如 http://localhost:8080

打开终端,输入以下命令,即可安装插件

例如:

1
2
3
4
5
6
7
8
9
10
11
12
code-server --install-extension eamodio.gitlens
code-server --install-extension esbenp.prettier-vscode
code-server --install-extension golang.go
code-server --install-extension k--kato.intellij-idea-keyb
code-server --install-extension Mikael.Angular-BeastCode
code-server --install-extension mrmlnc.vscode-lebab
code-server --install-extension oderwat.indent-rainbow
code-server --install-extension stivo.tailwind-fold
code-server --install-extension vscode-icons-team.vscode-i
code-server --install-extension wix.vscode-import-cost
code-server --install-extension yzhang.markdown-all-in-one
code-server --install-extension zerefdev.todo-highlighter

code-server 配置,可参考我的博客 VSCode 基本配置指南 | 鹏叔的技术博客 以及 vscode 常用快捷键 | 鹏叔的技术博客

10. 关联阅读

另外,若要获取最近更新, 请访问原文基于 Code-server vscode 的云开发环境 | 鹏叔的技术博客

11. trouble shooting

  1. 解决 docker 无法启动,报:start request repeated too quickly for docker.service 错误
    参考 https://blog.csdn.net/weixin_39246554/article/details/121800320

12. 参考文档

code-server github 官网

随时随地敲代码,基于 Theia 快速部署自己的云开发环境

云开发工具 code-server 安装手册

code-server install - Fedora, CentOS, RHEL, SUSE

coder install.sh

基于 Code-server 快速部署自己的云开发环境

https://pengtech.net/vscode/cloud_ide.html

作者

鹏叔

发布于

2022-12-21

更新于

2024-08-28

许可协议

评论