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

1. 前言

如果手头上有多个设备，需要经常轮换着使用，又或者经常出门不想带太沉的笔记本电脑，想随时随地写代码，Web IDE 可以帮到你。

Web IDE，顾名思义就是云端开发环境，把 IDE 部署在云上。打开浏览器，连上云 IDE，就可以方便敲代码跑程序。想象一下，带上一台 iPad 或者华为、小米平板，配上蓝牙键盘，坐在阴凉的动物园树下，边看动物边敲代码，多惬意。

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

如果想要低成本愉快使用，自己来搭建是一个不错的方案。对配置要求不高的话，一年几十块一百多块就能买到廉价的 VPS 或者云主机。Web IDE 的部署方案推荐两个，code-server 和 Theia。

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

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

2. 申请云主机

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

2G8U 80G
OS: Centos 7.9

3. VPN 连接云服务商网络

• frp 内网穿透 | 鹏叔的技术博客

• 使用 WireGuard 内网穿透 | 鹏叔的技术博客

4. 登录到云主机

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

5. 安装方式一：使用脚本安装

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

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

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

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

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. 下载安装包

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

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

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

6.2. 安装软件包

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

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

6.3. 设置为开机启动

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

bind-addr: 0.0.0.0:8080

开放端口

# 检查防火墙是否开启
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 | 鹏叔的技术博客

# 添加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 上下载会很慢。

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

重启 docker 服务

sudo systemctl restart docker

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

拉取镜像:

docker pull codercom/code-server

启动容器:

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

将容器设置为开机启动

docker update --restart=always code-server

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

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

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

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

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

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

例如：

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. 关联阅读

• vscode 常用快捷键
• Fedora linux 上安装 Visual Studio Code
• 如何升级 vscode
• VSCode 基本配置指南

另外，若要获取最近更新， 请访问原文基于 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