vscode网页版code-server搭建和使用

主力编辑器是vscode, 手上正好也有台闲置的服务器. 如果把vscode搞到浏览器中, 那么在一些没有vscode的设备上也可以愉快的敲代码了. code-server它可以让有浏览器的设备访问服务器上运行的vscode.

这篇文章记录下code-server搭建的过程, 已经将搭建好的服务绑定到域名并访问. 本文主要涉及以下内容:

• code-server安装与启动.
• ufw端口转发.

---

code-server安装与启动

服务器是腾讯云轻量, 系统选择了官方的Ubuntu 22.04 LTS, 因为Ubuntu相较于其他官方系统比较新, 同时也提供了iptables的用户访问软件ufw, 可以很方便进行端口转发.

code-server下载建议到官方代码仓库看readme. 如果打不开可以到gitee找到对应镜像下载.

• 官方地址code-server github.com
• 镜像地址code-server gitee.com

code-server安装很简单, 官方文档上只需要一行curl -fsSL https://code-server.dev/install.sh | sh即可.

之后, 可以使用命令启动code-server. 首次启动配置文件被写道~/.config/code-server/config.yaml.

lighthouse@VM-8-8-ubuntu:~$ code-server
[2023-02-26T09:00:37.563Z] info  Wrote default config file to ~/.config/code-server/config.yaml
[2023-02-26T09:00:37.979Z] info  code-server 4.10.0 ac1fba8bde0c3f29bf6bc27d3d7d75cb2390a7c2
[2023-02-26T09:00:37.982Z] info  Using user-data-dir ~/.local/share/code-server
[2023-02-26T09:00:37.994Z] info  Using config file ~/.config/code-server/config.yaml
[2023-02-26T09:00:37.995Z] info  HTTP server listening on http://127.0.0.1:8080/
[2023-02-26T09:00:37.996Z] info    - Authentication is enabled
[2023-02-26T09:00:37.996Z] info      - Using password from ~/.config/code-server/config.yaml
[2023-02-26T09:00:37.997Z] info    - Not serving HTTPS

先结束掉程序, 打开配置文件vi ~/.config/code-server/config.yaml. 其中包括绑定ip端口和密码.

lighthouse@VM-8-8-ubuntu:~$ vi ~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: f0f8901fb4a9d537935d122f
cert: false
~
~

ip端口改成本机ip端口, 密码改为自己的密码.

lighthouse@VM-8-8-ubuntu:~$ vi ~/.config/code-server/config.yaml
bind-addr: 0.0.0.0:8080
auth: password
password: password-here
cert: false
~
~

code-server重启服务即可访问, 监听地址已经到本机了, 此时可以通过ip端口访问到.

lighthouse@VM-8-8-ubuntu:~$ code-server
[2023-02-26T09:11:32.627Z] info  code-server 4.10.0 ac1fba8bde0c3f29bf6bc27d3d7d75cb2390a7c2
[2023-02-26T09:11:32.631Z] info  Using user-data-dir ~/.local/share/code-server
[2023-02-26T09:11:32.641Z] info  Using config file ~/.config/code-server/config.yaml
[2023-02-26T09:11:32.642Z] info  HTTP server listening on http://0.0.0.0:8080/
[2023-02-26T09:11:32.643Z] info    - Authentication is enabled
[2023-02-26T09:11:32.643Z] info      - Using password from ~/.config/code-server/config.yaml
[2023-02-26T09:11:32.644Z] info    - Not serving HTTPS

ufw端口转发

ip端口总是怪怪的, 特别是绑定域名后. 有没有办法可以隐藏端口或者端口绑定到80么.

• 直接监听0.0.0.0:80
• 反向代理nginx
• 端口转发iptables

直接监听的问题就是用户运行的程序不能直接监听1024以下的端口, 所以必须以root运行, 这样就会有新的问题, 这个程序可能因为不当的操作对操作系统造成毁灭性的影响. 因此很多软件mysql等并不推荐使用root运行而是建立的mysql用户运行.

反向代理的问题的, 反向代理的是http协议, code-server中还会有一些交互通过websocket协议完成, 需要额外的配置websocket反向代理.

copy

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

location / {
    proxy_pass http://vscode;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

反向代理使用的过程中, 发现插件与这种方式不兼容, 导致lsp启动失败, IDE直接退化成页面editor, 对敲代码来说是不可接受的.

端口转发可能是最优解法, 因为iptables作用在传输层.

上面提到ufw帮助用户更好的去写iptables的一些规则, 本质上还是对iptables的规则编写. 总体步骤如下.

1. 开启对应端口
2. 配置转发规则

首先先开启ufw和涉及到的两个端口:80 :8080, 命令比较分散统一记录在下面.

copy

lighthouse@VM-8-8-ubuntu:~$ sudo su
root@VM-8-8-ubuntu:/home/lighthouse# ufw enable
Firewall is active and enabled on system startup
root@VM-8-8-ubuntu:/home/lighthouse# ufw allow 80
Rule added
Rule added (v6)
root@VM-8-8-ubuntu:/home/lighthouse# ufw allow 8080
Rule added
Rule added (v6)
root@VM-8-8-ubuntu:/home/lighthouse# ufw reload
Firewall reloaded
root@VM-8-8-ubuntu:/home/lighthouse# ufw status
Status: active

To                         Action      From
--                         ------      ----
80                         ALLOW       Anywhere
8080                       ALLOW       Anywhere
80 (v6)                    ALLOW       Anywhere (v6)
8080 (v6)                  ALLOW       Anywhere (v6)

其次在*filter前配置下*nat转发规则即可, 就可以重新访问不带端口的域名了, 接着绑定下域名到ip的映射即可.

copy

*nat
:PREROUTING ACCEPT [0:0]
-A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080
COMMIT

---

总之记录下这次code-server搭建过程, 包括如何对code-server下载安装, 如何配置ufw防火墙和端口转发以及过程中对几种转发方式的思考. 希望大家少走弯路.