【原创】code server 初体验

概要

1、什么是 code server?

code servercoder 公司基于微软开源的 Visual Studio Code 开发的一款产品。

2、code server 的目标是什么?

code server 的目标是为开发者构建一个便捷统一的开发环境,让开发者能从任意设备、任意位置通过浏览器来进行代码的编写。从而免去了常规的 IDE 开发流程中的环境搭建的问题。

3、code server 有哪些优点?

a、环境统一

code server 解决的第一个问题就是跨设备的环境一致性。因为 code server 始终运行在一个远程的云端环境,因此他的开发环境始终是一致的,不会出现不同平台或者不同设备运行相同的代码而出现各种问题的情况。

我相信有不少程序员遇到过类似的问题。比如,同样的代码在 MacOS 上运行正常,在 Windows 上运行报错;或者在同事 A 的电脑上运行正常,而在同事 B 的电脑上运行报错。

而 code server 解决了这个问题,对于同一个项目的代码开发,不管是谁,运行代码的环境都是 code server 所在的服务器环境,这有效的避免的环境不同带来的问题,让程序员把精力更多地放在代码编写上,而不是去解决各种平台切换带来的问题上。

b、任意设备

有时候,有些程序的运行环境或者调度环境要求较高,需要较高的配置,而较高的配置一般都意味着昂贵以及不那么便携,相信肯定有人在开发及运行程序时需要使用专门的工作站设备而不是个人电脑。

但如果你刚好有事需要出差或者离开岗位,这时有需要修复一个 BUG 时,你带上工作站意味着你需要一直背着一个厚重的 10 斤往上的设备,如果你不带着那么你连修复 BUG 的设备或者环境都没有。还有人可能使用的是台式电脑进行开发,这就更加不具备便携的能力了。

而使用 code server 也能完全避免此类问题,我们的运行环境位于远程的一个高配置服务器或者云端环境,而我们只需要使用我们的任意带有浏览器的功能连接到网络,打开 code server 的访问地址,就可以编写代码。

我们可以在手机、平板、电脑等等设备上来进行开发,它更多便携更加方便,而且不需要我们的设备具有高配置的环境。

c、安全性

有些产品对代码安全有较高要求。比如需要防止程序员将代码直接 clone 打包带走去了竞争公司,这显然危害巨大。

而 code server 也可以避免这个问题,因为可以把代码的管理完全只放在 code server 服务器上,程序员不能完整的克隆或者打包完整代码,每个程序员只能访问自己开发的部分代码。这样有效地使产品安全性有了保障。

4、code server 的缺点?

a、code server 需要网络

虽然目前的网络发展已经非常成熟,不管是宽带还是移动互联网都非常方便,但还是不能保证在任何地方都有非常完善的网络环境。如果你没有完好的网络环境,那么写代码本身就变得不可能。

b、操作便捷性

由于是在浏览器中进行编辑。因此,部分操作可能无法像在本地的 IDE 中那样方便,比如各种快捷键的使用等。(此处为我体验后补充,code-server 支持大部分与 vs code 一样的快捷键,而且还根据访问平台有不同的适配,比如我使用 MacOS 访问 code-server,那么快捷键就适配了 MacOS 的键盘特征,大赞!不过也有少部分的快捷键与 vs code 不同,比如新建文件的快捷键 code-server 默认没有设置,因为它与浏览器的默认打开新标签页的快捷键冲突了)

c、稳定性

由于 code-server 是一个后台服务进程,所以一旦这个进程由于各种原因 DOWN 了,那么所有人的工作将直接停滞。所以,保证服务的稳定性是一个需要考虑的问题。但我觉得不应该是它的缺点,毕竟它是有解的。

注:以上的这些优缺点仅是本人根据自己的浅显理解总结而来,难免会有理解错误。因此,以上内容仅供参考,也欢迎指正我的错误。

5、安装环境

官方推荐至少需要 1 GB Ram 和 2 cores 的机器,可以是物理机器,虚拟机,各种云环境。操作系统推荐 Linux。同时也支持 MacOS 及 FreeBSD.

本次安装环境是一台虚拟机,配置如下:

OS: Ubuntu 18.04.1
CPU: 4 cores
Memory: 16 GB Ram
Softwares: curl 7.58.0,code-server 3.5.0

安装步骤

官方提供了一个 shell 脚本便于一键自动化安装过程,不过在国内使用体验还是比较勉强..

1、使用脚本打印安装过程

官方脚本提供了一个 --dry-run 的参数,使用这个参数会将该安装脚本安装 code server 所需要的几个步骤都打印出来以供参考,这个脚本会检测你当前的操作系统,并根据不同的操作系统来进行不同的安装过程。

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

如下示例:

jiangzl@ubuntu:~$ curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run
Ubuntu 18.04.5 LTS
Installing v3.5.0 deb package from GitHub releases.
+ mkdir -p ~/.cache/code-server
+ curl -#fL -o ~/.cache/code-server/code-server_3.5.0_amd64.deb.incomplete -C - https://github.com/cdr/code-server/releases/download/v3.5.0/code-server_3.5.0_amd64.deb
+ mv ~/.cache/code-server/code-server_3.5.0_amd64.deb.incomplete ~/.cache/code-server/code-server_3.5.0_amd64.deb
+ sudo dpkg -i ~/.cache/code-server/code-server_3.5.0_amd64.deb
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

可以看到安装过程大概分四步:

a、创建一个 code-server 的 cache 目录

b、从 github 上下载安装包程序

c、使用 dpkg 安装下载的安装包程序

d、启动服务

注:如果执行此脚本的过程中出现报错如下,请在当前博客搜索此错误查看解决方案

curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused

2、使用脚本安装

执行如下命令进行安装

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

如下示例:

jiangzl@ubuntu:~$ curl -fsSL https://code-server.dev/install.sh | sh
Ubuntu 18.04.5 LTS
Installing v3.5.0 deb package from GitHub releases.
+ mkdir -p ~/.cache/code-server
+ curl -#fL -o ~/.cache/code-server/code-server_3.5.0_amd64.deb.incomplete -C - https://github.com/cdr/code-server/releases/download/v3.5.0/code-server_3.5.0_amd64.deb
                                                                           0.1%-#O#- #   #

下载过程可能需要一定时间... 没办法.

3、使用安装包进行安装

  • 下载安装包

如果你使用脚本安装不方便或者太慢,也可以尝试下载该软件包然后离线安装。

注意,离线安装的方式需要你根据你要安装的环境选择对应平台及版本的安装包,比如,Ubuntu 使用 .deb 的包安装 3.5.0 版本,则下载如下安装包:

https://github.com/cdr/code-server/releases/download/v3.5.0/code-server_3.5.0_amd64.deb

github 各版本下载地址:

https://github.com/cdr/code-server/releases

v3.5.0 .deb 安装包百度网盘地址:

链接: https://pan.baidu.com/s/1thjmIDY2onWaf3OyxCHGWA  密码: 9bf4
  • 安装

执行如下命令进行安装

sudo dpkg -i ${file_path}/code-server_3.5.0_amd64.deb

其中 ${file_path} 表示你的软件包下载存放的目录,需要替换成自己的软件包所有的目录。

如下示例

jiangzl@ubuntu:~$ pwd
/home/jiangzl
jiangzl@ubuntu:~$ ls
code-server_3.5.0_amd64.deb  Desktop  Documents  Downloads  elk  examples.desktop  Music  Pictures  Public  Templates  Videos
jiangzl@ubuntu:~$ sudo dpkg -i ~/code-server_3.5.0_amd64.deb
[sudo] password for jiangzl:
Selecting previously unselected package code-server.
(Reading database ... 169777 files and directories currently installed.)
Preparing to unpack .../code-server_3.5.0_amd64.deb ...
Unpacking code-server (3.5.0) ...
Setting up code-server (3.5.0) ...

到此即安装完成,可以说安装还是非常方便的。

4、运行 code server

由于 code server 是一个远程服务。因此,它需要运行一个进程并监听一个端口

如下示例:

jiangzl@ubuntu:~$ code-server
[2020-09-06T17:19:35.484Z] info  Wrote default config file to ~/.config/code-server/config.yaml
[2020-09-06T17:19:35.486Z] info  Using config file ~/.config/code-server/config.yaml
[2020-09-06T17:19:35.637Z] info  Using user-data-dir ~/.local/share/code-server
[2020-09-06T17:19:35.640Z] info  code-server 3.5.0 de41646fc402b968ca6d555fdf2da7de9554d28a
[2020-09-06T17:19:35.643Z] info  HTTP server listening on http://127.0.0.1:8080
[2020-09-06T17:19:35.643Z] info      - Using password from ~/.config/code-server/config.yaml
[2020-09-06T17:19:35.643Z] info      - To disable use `--auth none`
[2020-09-06T17:19:35.643Z] info    - Not serving HTTPS

从上面可以看到,code-server 运行并监听了本地的 8080 端口。此时,我们能从 code-server 运行的服务器本地浏览器访问到 code-server 服务,但还不能从其他设备访问到 code-server 服务。

这是因为 code-server 服务默认绑定到 127.0.0.1:8080,如果我们想远程远程 code-server 服务应该怎么做呢?

很简单,我们只需要给 code-server 运行命令传入如下参数即可:

jiangzl@ubuntu:~$ code-server --bind-addr=0.0.0.0:8080
[2020-09-06T17:28:22.822Z] info  Using config file ~/.config/code-server/config.yaml
[2020-09-06T17:28:22.964Z] info  Using user-data-dir ~/.local/share/code-server
[2020-09-06T17:28:22.967Z] info  code-server 3.5.0 de41646fc402b968ca6d555fdf2da7de9554d28a
[2020-09-06T17:28:22.970Z] info  HTTP server listening on http://0.0.0.0:8080
[2020-09-06T17:28:22.970Z] info      - Using password from ~/.config/code-server/config.yaml
[2020-09-06T17:28:22.970Z] info      - To disable use `--auth none`
[2020-09-06T17:28:22.970Z] info    - Not serving HTTPS

code-server 可使用参数可参考附录部分。

注:通过命令行参数来配置 code-server 的运行挺方便但不是特别推荐,因为如果我们需要在生产环境部署,可能有很多的配置项,全部都通过命令行来传参控制运行显示比较乱而且不方便管理。建议通过配置文件来进行配置和管理,具体方法请参考下文部分。

配置体验

1、配置远程可访问

code-server 的配置文件默认是在 ~/.config/code-server/config.yaml,当我们使用 code-server 命令默认运行之后就会生成一个位于当前用户 home 目录下的 .config/code-server 目录下的 config.yaml 配置文件。

如下示例:

jiangzl@ubuntu:~/.config/code-server$ pwd
/home/jiangzl/.config/code-server
jiangzl@ubuntu:~/.config/code-server$ cat config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: this is a password
cert: false

可以看到 bind-addr 是 127.0.0.1:8080,auth 是 password 方式,password 则生产了默认的,cert 表示未使用 ssl 连接。

这里我们需要 code-server 可以被远程访问,我们只需要将配置文件改为如下的内容:

bind-addr: 0.0.0.0:8080
auth: password
password: this is a password
cert: false

保存退出,再使用 code-server 运行试试

jiangzl@ubuntu:~$ code-server
[2020-09-06T17:40:14.656Z] info  Using config file ~/.config/code-server/config.yaml
[2020-09-06T17:40:14.800Z] info  Using user-data-dir ~/.local/share/code-server
[2020-09-06T17:40:14.803Z] info  code-server 3.5.0 de41646fc402b968ca6d555fdf2da7de9554d28a
[2020-09-06T17:40:14.805Z] info  HTTP server listening on http://0.0.0.0:8080
[2020-09-06T17:40:14.805Z] info      - Using password from ~/.config/code-server/config.yaml
[2020-09-06T17:40:14.805Z] info      - To disable use `--auth none`
[2020-09-06T17:40:14.806Z] info    - Not serving HTTPS

注:如果你不想先运行一次 code-server 生成默认配置文件,也可以手动创建一个 ~/.config/code-server 目录并创建 config.yaml 文件,并加入配置内容即可。

如下示例:

mkdir -p ~/.config/code-server
cd ~/.config/code-server
vim config.yaml

2、配置系统管理进程

在命令行执行如下命令进行系统服务管理注册

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

如下示例

jiangzl@ubuntu:~/.config/code-server$ sudo systemctl enable --now code-server@$USER
[sudo] password for jiangzl: 
Created symlink /etc/systemd/system/default.target.wants/code-server@jiangzl.service → /usr/lib/systemd/system/code-server@.service.

然后,就可以使用如下命令来管理 code-server 的服务了

jiangzl@ubuntu:~/.config/code-server$ sudo systemctl status code-server@$USER
● code-server@jiangzl.service - code-server
   Loaded: loaded (/usr/lib/systemd/system/code-server@.service; indirect; vendor preset: enabled)
   Active: failed (Result: exit-code) since Sun 2020-09-06 10:58:23 PDT; 2min 54s ago
  Process: 125534 ExecStart=/usr/bin/code-server (code=exited, status=1/FAILURE)
 Main PID: 125534 (code=exited, status=1/FAILURE)
Sep 06 10:58:23 ubuntu systemd[1]: code-server@jiangzl.service: Service hold-off time over, scheduling restart.
Sep 06 10:58:23 ubuntu systemd[1]: code-server@jiangzl.service: Scheduled restart job, restart counter is at 5.
Sep 06 10:58:23 ubuntu systemd[1]: Stopped code-server.
Sep 06 10:58:23 ubuntu systemd[1]: code-server@jiangzl.service: Start request repeated too quickly.
Sep 06 10:58:23 ubuntu systemd[1]: code-server@jiangzl.service: Failed with result 'exit-code'.
Sep 06 10:58:23 ubuntu systemd[1]: Failed to start code-server.
jiangzl@ubuntu:~/.config/code-server$ sudo systemctl status code-server@$USER 
● code-server@jiangzl.service - code-server
   Loaded: loaded (/usr/lib/systemd/system/code-server@.service; indirect; vendor preset: enabled)
   Active: active (running) since Sun 2020-09-06 11:02:16 PDT; 1min 24s ago
 Main PID: 126156 (node)
    Tasks: 22 (limit: 19127)
   CGroup: /system.slice/system-code\x2dserver.slice/code-server@jiangzl.service
           ├─126156 /usr/lib/code-server/lib/node /usr/lib/code-server
           └─126174 /usr/lib/code-server/lib/node /usr/lib/code-server
Sep 06 11:02:16 ubuntu code-server[126156]: [2020-09-06T18:02:16.866Z] warn  discarding socket connection: vscode is not running
Sep 06 11:02:16 ubuntu code-server[126156]: [2020-09-06T18:02:16.882Z] warn  discarding socket connection: vscode is not running
Sep 06 11:02:36 ubuntu code-server[126156]: [2020-09-06T18:02:36.936Z] warn  discarding socket connection: vscode is not running
Sep 06 11:02:36 ubuntu code-server[126156]: [2020-09-06T18:02:36.953Z] warn  discarding socket connection: vscode is not running
Sep 06 11:02:57 ubuntu code-server[126156]: [2020-09-06T18:02:57.000Z] warn  discarding socket connection: vscode is not running
Sep 06 11:02:57 ubuntu code-server[126156]: [2020-09-06T18:02:57.015Z] warn  discarding socket connection: vscode is not running
Sep 06 11:03:17 ubuntu code-server[126156]: [2020-09-06T18:03:17.082Z] warn  discarding socket connection: vscode is not running
Sep 06 11:03:17 ubuntu code-server[126156]: [2020-09-06T18:03:17.100Z] warn  discarding socket connection: vscode is not running
Sep 06 11:03:37 ubuntu code-server[126156]: [2020-09-06T18:03:37.150Z] warn  discarding socket connection: vscode is not running
Sep 06 11:03:37 ubuntu code-server[126156]: [2020-09-06T18:03:37.169Z] warn  discarding socket connection: vscode is not running

常用命令

sudo systemctl status code-server@$USER # 查看 code-server 进程状态
sudo systemctl start code-server@$USER    # 启动 code-server 进程
sudo systemctl stop code-server@$USER    # 停止 code-server 进程
sudo systemctl restart code-server@$USER    # 重启 code-server 进程

3、远程访问

我从局域网内的另一台设备访问 code-server 服务,出现如下页面,表示访问成功。

密码是 ~/.config/code-server/config.yaml 文件中生成的,从文件中拷贝密码然后输入并提交,出现如下的界面。啊,是不是有内味儿了...

注:

1、密码是 32 位的加密密文,请自行妥善保存,将用于安全认证。你也可以自己生产密文并在配置文件中进行配置。

2、右下解的通知消息可得知,如果是非 SSL 的方式,则 code-server 的功能将有部分限制,这也是安全性的考虑。

4、hello-world 初体验

这里以写一个 python hello word 来进行初体验。

a、安装 python 扩展

b、创建一个 hello-world.py 文件

按 command + s (MacOS)保存文件,可以看到保存文件的位置是在远程的服务器上。

c、编写代码

在代码编辑区编写如下代码

# -*- coding:utf8 -*-
print('hello world!')

d、运行代码

右键编辑区,选择 "Run Python File in Terminal",即可看到在下方的 TERMINAL 窗口输出了 hello world!

总结

1、个人初体验的感觉是非常棒的,code-server 做到了非常贴近原生 vs code IDE 的使用体验,而这一切你只需要在浏览器上就可以完成,它真的是非常非常的酷!!!

2、如果你是个人使用,只是为了给自己提供一个方便的可远程访问的开发环境。那么你可以配合内网穿透来实现外网访问。IT'S SO COOOOOL! TRY IT!

比如,下面是我通过我的 ipad 上的 Chrome 浏览器访问 code-server 并运行我刚才创建的 hello-world.py 程序的截图,是不是非常的棒呢!

3、如果你是企业级的使用,强烈推荐使用 SSL 配置,这是安全性上必不可少的一环!

附录

参考:

https://github.com/cdr/code-server/blob/v3.5.0/doc/guide.md

code-server 命令:

jiangzl@ubuntu:~$ code-server --help
[2020-09-06T17:21:43.124Z] info  Using config file ~/.config/code-server/config.yaml
code-server 3.5.0 de41646fc402b968ca6d555fdf2da7de9554d28a
Usage: code-server [options] [path]
Options
      --auth                The type of authentication to use. [password, none]
      --password            The password for password authentication (can only be passed in via $PASSWORD or the config file).
      --cert                Path to certificate. Generated if no path is provided.
      --cert-key            Path to certificate key when using non-generated cert.
      --disable-telemetry   Disable telemetry.
   -h --help                Show this output.
      --open                Open in browser on startup. Does not work remotely.
      --bind-addr           Address to bind to in host:port. You can also use $PORT to override the port.
      --config              Path to yaml config file. Every flag maps directly to a key in the config file.
      --socket              Path to a socket (bind-addr will be ignored).
   -v --version             Display version information.
      --user-data-dir       Path to the user data directory.
      --extensions-dir      Path to the extensions directory.
      --list-extensions     List installed VS Code extensions.
      --force               Avoid prompts when installing VS Code extensions.
      --install-extension   Install or update a VS Code extension by id or vsix. The identifier of an extension is `${publisher}.${name}`. To install a specific version provide `@${version}`. For example: 'vscode.csharp@1.2.3'.
      --enable-proposed-api Enable proposed API features for extensions. Can receive one or more extension IDs to enable individually.
      --uninstall-extension Uninstall a VS Code extension by id.
      --show-versions       Show VS Code extension versions.
      --proxy-domain        Domain used for proxying ports.
   -n --new-window          Force to open a new window. (use with open-in)
   -r --reuse-window        Force to open a file or folder in an already opened window. (use with open-in)
-vvv --verbose             Enable verbose logging.

You may also like...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注