前言

我们在编程的时候使用的环境大多与电脑有关，如果你想随时随地编程就需要带上电脑，打开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里输入：

docker pull codercom/code-server

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

docker images

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

接下来就是运行code-server了（参数比较多注意看清楚）：

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：

#Debian/Ubuntu系统执行
sudo apt-get -y install screen
#CentOS
yum -y install screen

安装完成后我们新建一个窗口，下面的命令创建一个名为code的窗口并进入，你可以自己改名字：

screen -S code

我们在这个新窗口里启动/重启即可：

#start
docker start code-server
#restart 
docker restart code-server

最后我们按下CTRL+A+D即可返回原页面，而code-server则是在screen里一直运行不会被关闭。

下一次我们进入这个窗口需要使用命令：

screen -r code

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

修改管理员密码

我们发现，在网页版里的设置是没有修改密码的选项的，我们想修改密码需要修改config.yaml配置文件。

我们有两种方法可以修改这个配置文件

方法一

我们可以直接使用code-server在线修改。首先我们先打开新的文件夹：点击菜单-File-Open Folders，文件地址在/root/.config/code-server/config.yaml，写到code-server就可以了，打开文件开始编辑：

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

保存好后我们回到刚才的screen里重启：

screen -r code
docker restart code-server

方法二

我们还可以直接找到该文件修改，首先我们先进入docker安装目录，我的是在/var/lib/docker/overlay2

进入了以后很多文件夹，我们可以通过docker命令查看是哪个文件夹，在ssh输入：

docker inspect code-server

然后在GraphDriver下的Data项目里的MergedDir项记录着它的地址，我们复制这个地址。

接下来我们就可以进行修改了，可以使用vim或者是自己用记事本打开修改都可以。

文件地址就在：刚才复制的地址/root/.config/code-server/config.yaml

同样的修改password后面的值就可以了。

设置中文

我们打开code-server默认是英文的，和vscode原版一样，我们可以安装语言包修改语言：

在code-server上点击左侧的拓展（extension）或者按下Ctrl+shift+X，在搜索框里输入Chinese，选择简体中文安装

接下来就是根据提示点击restart/reload就可以了。

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

我们搭建code-server，公网访问的时候需要使用ip:端口的方法访问，这很不美观，我们可以通过配置反向代理来使用域名访问。

官网文档里说到使用Caddy转发的方法挺简单的，如果你中意使用caddy，你可以查看官网文档：

https://coder.com/docs/code-server/v3.11.1/guide#using-lets-encrypt-with-caddy

当然它还提供了Nginx配置反向代理的方法，接下来便是配置Nginx反向代理：

使用宝塔的用户可以直接在宝塔中安装并修改Nginx配置，跳过下面安装这部分

首先我们先准备好一个域名，并且做A解析到服务器上。

接着安装Nginx（如果你没安装过）。我们可以安装在外面也可以安装在docker里，因为我是自己之前安装在外面了，这里就演示在docker中安装：

同样的拉取镜像并运行：

docker pull nginx
docker run -d -p 80:80 --name nginx nginx

进入容器，并且找到配置文件：

#进入容器
docker exec nginx

PS：这里也可以用前面修改密码的方法二查找容器地址的方法精确找到地址。

我们继续找到配置文件：/etc/nginx/conf.d/default.conf 或者是 /etc/nginx/nginx.conf 或者自己在/etc/nginx/conf.d目录下新建。

PS：在外部安装的就直接是在/etc/nginx/目录下。

我们修改配置文件，加入下面代码：

server {
    listen 80;
    listen [::]:80;    #监听ipv6
    server_name mydomain.com;    #这里mydomain.com改为你的域名

    location / {
      proxy_pass http://localhost:8082/;    #这里改为你的端口
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
    }
}

如果是直接修改nginx.conf，这一段需要在http{}之内。新建则需要在nginx.conf下添加include，在http{}内添加include /etc/nginx/conf.d/example.conf;。

然后我们重启一下nginx：

service nginx reload
#或者docker命令重启
docker restart nginx
#或者服务重启
systemctl restart nginx

接下来直接访问域名就可以了替代ip:端口了。

这个地方容易出现错误导致无法访问，具体看后面的错误及解决方案。

配置域名SSL

我们发现，如果是直接http://域名访问code-server，右下角会弹出错误提示，禁止使用右键剪切板等一些功能。这是因为这一些功能依赖于https的传输，所以我们需要给域名配置SSL，实现https传输。

申请证书

如果你想申请一个免费的证书，你可以使用腾讯云，Let's Encrypt等获取免费证书，在这里就演示使用acme.sh申请证书。

因为我们前面配置域名的时候使用了nginx，于是acme.sh我也使用nginx模式申请。首先是安装acme.sh。

#curl安装
curl https://get.acme.sh | sh -s [email protected]
#wget安装
wget -O -  https://get.acme.sh | sh -s [email protected]

可以把email改成自己的。安装好以后就是开始申请证书：

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

这里记得把example.com改为你的域名。注意这里的域名要和上面配置nginx的域名一直，并且域名已解析到服务器上。

接着等待证书申请完毕。成功大致这样（网络上的图）：

记录下cert和key的地址，等会需要填写。

配置反代

我们接下来就是要修改我们的反向代理了，和前面一样，找到我们添加反向代理配置的地方，修改成：

server {
  listen 443 ssl;
  listen [::]:443 ssl;

  server_name mydomain.com;    #这里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 /var/xxx.cer; 
  ssl_certificate_key /var/xxx.key; 
}

保存重启nginx即可通过https://域名来访问code-server了。

service nginx reload
#或者docker命令重启
docker restart nginx
#或者服务重启
systemctl restart nginx

这里不用修改code-server配置文件中的cert，否则会出现无法访问，后面有记录。

C/C++环境配置

我们搭建好了code-server只是一个空壳，环境还需要我们去配置。还好是在Linux中已经集成了许多内容，接下来演示配置C/C++环境。

在浏览器的code-server界面中快捷键Ctrl+shift+X，或左边栏的【扩展】处，我们输入C/C++发现怎么找都找不到，如图：

可能因为它内置有一个C/C++ Language Basics拓展，所以就认为C/C++拓展不需要了。但我们实际上编译的时候还是会出现无法找到头文件等问题，所以还是自己安装一个。

首先到微软VSCODE商店，搜索C/C++：https://marketplace.visualstudio.com/vscode

找到C/C++后点进去，根据你的系统点击下载拓展：

下载好了以后我们上传都服务器上，在code-server里点击拓展的菜单-选择最下面的从VSIX安装

选择你上传的位置的文件即可。

此时是docker下运行，它的目录只有容器目录下的才能读取！你需要上传到容器目录去或者挂载的地方。

PS：你还可以通过同样的方法安装C/C++ Extension Pack，里面包括了C/C++以及一些拓展。

安装好了以后我们就可以试着输入一些代码了，看看能否正常运行。一般来说我们需要在终端处先安装gcc，因为这是在docker下的，有可能不会被检测到原来安装的。

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

我们安装好了后试着输入看看gcc -v，检测是否安装成功，安装成功如图：

接下来就是测试代码是否能编译运行了，我们写一个最简单的helloworld来测试：

如图正常输出，到这里C/C++环境就配置好了。

Python环境配置

python环境配置就会比C/C++简单多了，因为在线商店里就可以搜索到python拓展。

首先现在拓展那里安装好python拓展，然后我们打开终端。先看看容器里面有没有自带python，输入：

whereis python

出现如图所示说明带有：

接着我们继续检测是否为环境变量：

python -v

结果发现容器里的没有添加到，但是我们再输入：

python3 -v

却出现了信息，所以这里需要配置软连接。（我这里截图没全）

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

输入完以后再查看python命令就可以使用了。

因为默认这个python没有pip，这里顺便配置下pip。

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

然后你想安装哪些库就看你个人喜好了。同理我们也用一个helloworld来验证是否能正常编译运行：

如图正常输出，到这里Python环境也配置好了。

错误&解决方案

反向代理502

你可以尝试在NGINX反向代理配置里，把proxy_pass的端口改为8080或者是你暴露的其他端口，或者是你一开始就不要分开两个端口，即docker运行时参数：-p 8080:8080，就不会出现问题。

遇到这种问题还有可能是nginx没有重启，建议先重启，刷新浏览器缓存看看情况。

service nginx reload
#或者docker命令重启
docker restart nginx
#或者服务重启
systemctl restart nginx

WebSocket close with status code 1006

我们在正确配置域名了以后打开发现出现了错误，即WebSocket close with status code 1006，Unable to read file 。

分析发现每一个错误都跟websocket有关，而最有效的信息便是 1006 这个错误码。在websocket中，1006就是超时的意思，再进一步查阅资料发现是因为我们对地址进行了代理转发而引起的，原因是在代理时没有对websocket进行代理。解决办法：利用Upgrade协议头机制将连接从HTTP连接升级到WebSocket连接。

我们就需要对nginx反代文件进行修改了，修改location部分：

location /
{
    proxy_pass http://127.0.0.1:8080;    #端口
    proxy_http_version 1.1;  
    proxy_redirect     off;
    proxy_set_header Host https://code.example.com;    #域名，看看你有没有ssl
    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;
    
    #Set Nginx Cache
    
    	add_header Cache-Control no-cache;
}

保存后再次刷新网页就可以进入界面了。