在网上看过诸多搭建方式后，总结出一套可行的方案：包括上线vscode、导入拓展、绑定域名、添加证书等操作。

原帖子  https://zhuanlan.zhihu.com/p/342964881，在此基础上整理的安装方法

vscode_online优点

  • 基于浏览器，实现超级跨平台访问，只要你的设备能联网并且有一个浏览器，就能运行VSCode Online
  • 一个功能完整的VSCode，你可以通过安装各种VSCode插件将其配置成适合自己的IDE
  • 界面美观（它的颜值绝对能吊打机房的Dev-cpp等各种上古IDE）
  • 较为安全，支持密码登录，支持https
  • 任何电脑下，都能访问到相同的配置环境，共享你的云文件！

效果图

1、安装Vscode-online

通过Code-server安装vscode-online是目前最推荐的方式

1.1、一键安装

在服务器上运行一键安装脚本

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

当显示以下内容时，说明已经安装成功

1
2
3
4
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

如果运行后一直无响应，可能是网络被墙了，这里有个偏方：

手动打开https://code-server.dev/install.sh ，复制代码到服务器上，命名为install.sh

然后bash install.sh 执行该程序

执行上面的install.sh文件后，会出现以下内容，其中右边的链接就是要下载的一个安装包，如果服务器下载速度慢，我们可以手动下载好后上传到服务器

随后执行以下命令(ubuntu/debian可以使用，其实版本自行百度对应安装包的安装方法)

1
2
3
dpkg -i 下载的安装包的名字
如：
dpkg -i code-server.deb

安装好后，照常进入以下步骤

1.2、修改配置

路径为./.config/code-server/config.yaml 。

如果找不到配置文件，就用命令搜索下 find / -name code-server 。

使用vim打开配置文件，默认如下：

1
2
3
4
bind-addr: 127.0.0.1:8080  
auth: password
password: 1a980e91db7a998a2a7c72ef
cert: false
  • bind-addr:要修改成0.0.0.0:8080，为了能在公网上打开，端口8080可以也修改成其它的端口

（一定要在腾讯云或阿里云后台开放对应端口！如果开放了端口仍不能打开，可以尝试关掉防火墙ufw disable ）

  • auth   表示是否需要密码认证登陆
  • password   登陆密码
  • cert   是否开启https认证，需要ssl证书，这个下文会搞定

修改后如下：

1
2
3
4
bind-addr: 0.0.0.0:1122  #如修改成端口1122
auth: password
password: 1a980e91db7a998a2a7c72ef
cert: false

1.3、运行code-server

安装好后，显示的这两句话就提示了两种运行方式

1
2
3
4
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

1、（推荐）

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

执行后，会立即启动服务并在后台一直运行，并且code-server@$USER服务将开机自启。

1
systemctl stop code-server@$USER #即可停止进程

2、

1
code-server

执行后，**只会在前台运行，**并会显示以下内容

第一种执行方式可以通过systemctl status code-server@root 查看服务运行状态，也会显示如下内容

info code-server 3.8.0 c4610f7829701aadb045d450013b84491c30580d

info Using user-data-dir ~/.local/share/code-server

info Using config file ~/.config/code-server/config.yaml #配置文件位置

info HTTP server listening on http://0.0.0.0:1122 #ip及端口

info - Authentication is enabled #开启了登陆认证

info - Using password from ~/.config/code-server/config.yaml

info - Not serving HTTPS #未开启https

1.4、访问ip+端口

现在，你可以在浏览器上输入你的公网ip+端口，尝试访问！如图

2、安装插件

2.1、安装中文插件

安装好后刷新网页即可

2.2、安装code-runner

此插件可以运行多种语言，但不支持调试

安装好code-runner后可以写代码测试，按ctrl+alt+n即可运行

2.3、安装c++/python等插件

注意：部分插件与服务器系统版本不对应，需要自行在网站（点击直达）上找对应版本，如果插件安装后不可用，vscode右下角会提示错误信息以及解决方法

经过测试，python/shell脚本/html css代码下载插件后即可运行

但编译c/c++时总会跳转到launch.json文件，说明是文件没配置好，我试了多种方式后仍然失败

3、绑定域名与添加证书

在.config/code-server/config.yaml文件中就可以修改配置，但经过尝试发现在这里添加的域名无法被解析，最终选择通过宝塔完成。

3.1、禁用ip登陆

只通过域名登陆，不用ip登陆在此设置

在config.yaml中的第一行改成127.0.0.1:1122(对应端口) ，确保可以让服务器本地跳转而公网不能访问

3.2、填写域名

在宝塔上新建网站，输入对应域名，点击提交

3.3、添加证书

添加好证书后，点击配置文件（就在SSL上面，如上图）

1、注释**root那行，**为了不引入到其它目录

2、添加下面这代码到合适位置

1
2
3
4
5
6
7
location / { # "/"代表在根目录代理，如果域名已经搭了其他的网站，可以考虑映射在一个不冲突的目录下
      proxy_pass http://localhost:1122/;#记得将端口修改为实际的端口
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
    }

另外，要注释这段代码，否则打开的页面空白

3.4、重启nginx

重启nginx后，在浏览器输入域名试试能否正常打开

常见问题

网页空白：

可能是防火墙未关：命令 ufw disable

可能是腾讯云或阿里云等控制台防火墙未放行端口

可能是4.3节没有注释掉禁用js的代码