2243 字
11 分钟
【VPS折腾记录】Docker部署code-server实现在线IDE

前言#

我们在编程的时候使用的环境大多与电脑有关,如果你想随时随地编程就需要带上电脑,打开 IDE 进行编程。这对于是平板电脑、手机等其他设备就不够方便了。为了随时随地编程,于是就找到一个新的解决方案——code-server,搭建云平台版的 VSCODE,使用浏览器进行编程。

于是本章就记录我使用 Docker 部署 code-server 实现在线 IDE 的过程,以及遇到的问题和解决方案。

项目官网:https://coder.com/ https://github.com/coder/code-server

PS:部署这个项目需要耐心和随时备份的习惯!!!我还原备份了不知道多少次 😂


准备工作#

我们在部署前需要做一些准备工作,本次记录使用的环境:

  • VPS:Hong Kong BGP(cld 机房),有条件的建议选择大陆的服务器,速度会更快。
  • 系统:Debian 11(Linux x86_64)
  • 环境:安装好 Docker,Docker Compose 等。

我们先确认一下 docker 是否安装成功,在 ssh 输入 docker -v 出现版本号类似页面即可。


部署#

部署前提示,请注意备份,请注意备份,请注意备份!!!

和其他的 docker 一样,我们也是要先拉取镜像,在 ssh 里输入:

Terminal window
docker pull codercom/code-server

大概是上图这样就是成功拉取了。为了以防万一还是查看镜像看看有没有成功:

Terminal window
docker images

看到 code-server 就说明拉取成功。

接下来就是运行 code-server 了(参数比较多注意看清楚):

Terminal window
docker run -d -u root --restart=always --privileged=true --name code-server -p 8082:8080 -e PASSWORD=123456 -v /home/code:/home/code codercom/code-server:latest
# -d 后台运行
# -u root 使用 root 用户来登录容器
# --restart=always 跟随宿主机启动
# --privileged=true 宿主机设备的完全访问权限
# --name 容器名称
# -p 端口映射
# -e PASSWORD 设置开机密码
# -v 挂载数据卷 (示例挂载到 /home/code,代码保存在这里容易寻找)

运行成功会给出一串 id,不成功会报错。

成功以后,我们打开浏览器,输入 http://你的ip:8082,输入密码即可登录到我们的在线 IDE 了。

部署就到这里结束了,你以为这就完了嘛?下面的才是重点!!!


进阶设置#

不间断运行#

首先遇到的一个问题就是:这个进程退出 ssh 时会被关掉,就导致你要启动这个服务,ssh 必须在线,这搭建来不就没什么用了?下面是一个解决方案(后台运行配合 Screen):

首先我们先看看安装/更新 screen:

Terminal window
# Debian/Ubuntu
sudo apt-get -y install screen
# CentOS
yum -y install screen

安装完成后新建一个窗口(名为 code),并进入:

Terminal window
screen -S code

在这个新窗口里启动/重启即可:

Terminal window
# start
docker start code-server
# restart
docker restart code-server

最后按下 CTRL + A + D 返回原页面,而 code-server 则是在 screen 里一直运行不会被关闭。
下一次进入这个窗口使用:

Terminal window
screen -r code

这样我们就设置好了不间断运行。


修改管理员密码#

我们发现,在网页版里的设置是没有修改密码的选项的,我们想修改密码需要修改 config.yaml 配置文件。可以用两种方法:

方法一(在线修改)#

直接使用 code-server 在线修改。点击菜单 File → Open Folder,文件地址填入:

Terminal window
/root/.config/code-server/config.yaml

打开文件开始编辑:

修改配置文件中的 password 后面的值,记得保存。

保存好后回到刚才的 screen 里重启:

Terminal window
screen -r code
docker restart code-server

方法二(在宿主机上修改)#

直接在宿主机找到该文件修改。首先进入 docker 存储(例如 /var/lib/docker/overlay2)。
为了精确定位容器合并目录,执行:

Terminal window
docker inspect code-server

在输出中找到 GraphDriver -> Data -> MergedDir,复制该目录路径。
配置文件路径:

Terminal window
<MergedDir>/root/.config/code-server/config.yaml

同样修改 password 后面的值并保存。


设置中文#

打开 code-server 默认是英文,和 VS Code 原版一样,安装语言包即可。
在扩展(Extensions)中搜索 Chinese,安装 “Chinese (Simplified) Language Pack”,根据提示点击 Restart/Reload 即可。


配置反向代理使用域名访问#

公网访问使用 ip:端口 很不美观,可以通过反向代理使用域名访问。

官方文档有使用 Caddy 的方法:
Using Let’s Encrypt with Caddy

下面演示 Nginx 的反向代理:

使用宝塔面板可直接在面板中安装并修改 Nginx 配置,跳过安装步骤。
请准备好一个域名并 A 记录解析到服务器。

如果 Nginx 未安装,执行(示例为 Docker 外安装,自行选择):

Terminal window
# Debian/Ubuntu
sudo apt update && sudo apt install -y nginx
# CentOS
yum -y install nginx

修改默认配置(如 /etc/nginx/nginx.conf),确保在 http {} 内包含:

Terminal window
include /etc/nginx/conf.d/*.conf;

/etc/nginx/conf.d/ 下新建配置文件(如 code.conf):

server {
listen 80;
listen [::]:80;
server_name mydomain.com; # 改为你的域名
location / {
proxy_pass http://localhost:8082/; # 改为你的 code-server 映射端口
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
}

保存后重启 Nginx:

Terminal window
service nginx reload
# 或
systemctl restart nginx

然后即可通过 http://域名 访问。


配置域名 SSL#

使用 http:// 访问 code-server 时右下角会弹出错误提示(剪切板等功能受限),这是因为这些功能依赖于 HTTPS,所以需要给域名配置 SSL。

申请证书(acme.sh)#

Terminal window
# 使用 curl 安装
curl https://get.acme.sh | sh -s email=my@example.com
# 使用 wget 安装
wget -O - https://get.acme.sh | sh -s email=my@example.com

安装好以后开始申请证书(基于 Nginx 模式,需确保上一步反代已经生效):

Terminal window
acme.sh --issue --nginx -d example.com

成功后记录 certkey 的路径,备用。

配置反向代理(HTTPS)#

将前面反代配置改为:

server {
listen 443 ssl;
listen [::]:443 ssl;
server_name mydomain.com; # 改为你的域名
location / {
proxy_pass http://localhost:8082/; # 改为你的端口
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
proxy_redirect off;
}
ssl_certificate /path/to/your/fullchain.cer;
ssl_certificate_key /path/to/your/private.key;
}
# HTTP 自动跳转 HTTPS(可选)
server {
listen 80;
server_name mydomain.com;
return 301 https://$host$request_uri;
}

重启 Nginx 后即可通过 https://域名 访问 code-server。

这里不用修改 code-server 配置文件中的 cert,否则可能出现无法访问的问题(详见后文错误排查)。


C/C++ 环境配置#

在浏览器的 code-server 界面中安装 C/C++ 支持时,扩展列表可能找不到官方 C/C++ 扩展(仅有 C/C++ Language Basics)。
可从 VS Code 扩展商店手动下载 VSIX 安装包:

由于运行在容器内,VSIX 文件需位于容器可访问的目录(或挂载目录)中。

安装完成后,在终端安装 gcc:

Terminal window
# Debian/Ubuntu
sudo apt-get update
sudo apt-get install -y gcc
# CentOS
yum -y install gcc gcc-c++ autoconf make

检测是否安装成功:

Terminal window
gcc -v

编写一个简单的 hello.c 测试编译运行(示例):

#include <stdio.h>
int main() {
printf("hello world\n");
return 0;
}

Python 环境配置#

Python 相对简单:

  1. 安装 “Python” 扩展
  2. 在容器终端中检查 Python 是否可用
Terminal window
whereis python
python -v
python3 -v

若仅 python3 可用,则创建软链接:

Terminal window
sudo ln -s /usr/bin/python3 /usr/bin/python

安装 pip:

Terminal window
# Debian/Ubuntu
sudo apt-get update
sudo apt-get install -y python3-pip
# CentOS
yum -y install epel-release
yum -y install python-pip

随后即可按需安装第三方库,编写 hello.py 测试:

print("hello world")

错误 & 解决方案#

反向代理 502#

  • 在 Nginx 反代配置里,将 proxy_pass 的端口确认指向 code-server 容器暴露的正确端口(例如 8082 → 8080 的映射关系)。
  • 或者直接将 docker 运行参数改成 -p 8080:8080,避免端口不一致造成的困扰。
  • 确认 Nginx 已重载配置:
Terminal window
service nginx reload
# 或
systemctl restart nginx

WebSocket close with status code 1006#

该错误通常与 WebSocket 未正确代理有关。
在 Nginx 的 location / 配置中,确保包含以下头并开启升级连接:

location / {
proxy_pass http://127.0.0.1:8080; # 按需调整
proxy_http_version 1.1;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_connect_timeout 60;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
add_header X-Cache $upstream_cache_status;
add_header Cache-Control no-cache;
}

保存后重启 Nginx,刷新页面即可。

code-server 配置错误证书#

如果在 code-server 的配置文件中直接配置 cert,需要 IP 证书 且路径位于 容器内,否则浏览器可能不认可或访问失败。
通常建议 不要 在 code-server 内启用证书,而是 只在 Nginx 做 TLS 终止(即上文的 HTTPS 反代方案)。


后记#

到这里这一篇记录就结束了。我搭建 code-server 加上各种配置整整花了一天时间,其中重装了不知道几十次,所以在 折腾前一定要备份!下面是参考资料:

【VPS折腾记录】Docker部署code-server实现在线IDE
https://hoyue.fun/vps-code-server.html
作者
Hoyue
发布于
2022-08-24
最后更新于
2022-09-12
许可协议
CC BY-NC-SA 4.0
评论