code-server

Visual Studio Code Online

Visual Studio Code是微软推出的基于[Nodejs + Electron]的免费开源适配多端的代码编辑器。一个字牛B！让人爱不释手的原因有但不只有以下几点

  • 基于Nodejs - 前端开发者友好的
  • 开源 - 可以定制
  • 适配多端 - 客户端/网页版

本文介绍如何将 Visual Studio Code 部署在服务器上，并使用浏览器访问它。接着你就可以方便地 coding anywhere。

code-server

由于Visual Studio Code编译部署web版本具有一定的复杂性，而且在不同环境下编译部署有时候会出现层出不穷的问题。于是code-server应运而生。

使用code-server可以更方便更容易部署Visual Studio Code浏览器版本。

code-server 环境需求

硬件

下面是官方给出的推荐服务器配置

For a good experience, we recommend at least:

1 GB of RAM

2 cores

笔者演示安装的服务环境为

  • centos 7.6
  • 1核心 2GB腾讯云轻应用服务器

软件

对于下面亮点，是我踩过坑的。如果不满足的话，会导致失败或者需要多次重试。

  • 服务器node版本高于node v12
  • 能够流畅访问github静态资源

git host

设置host优化下载速度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 修改hosts文件
> vim /etc/hosts
# 加入以下内容

# GitHub Start
# from https://github.com/ButterAndButterfly/GithubHost
# Last update at 2021-03-17 05:04:39 (Machine Local Time)
140.82.112.6 api.github.com
185.199.110.153 assets-cdn.github.com
185.199.110.133 avatars.githubusercontent.com
185.199.110.133 avatars0.githubusercontent.com
185.199.108.133 camo.githubusercontent.com
185.199.109.133 cloud.githubusercontent.com
140.82.113.9 codeload.github.com
185.199.108.133 favicons.githubusercontent.com
140.82.114.4 gist.github.com
185.199.108.133 gist.githubusercontent.com
140.82.114.4 github.com
185.199.108.154 github.githubassets.com
185.199.109.133 marketplace-screenshots.githubusercontent.com
140.82.114.3 octocaptcha.com
185.199.110.133 raw.githubusercontent.com
185.199.108.133 repository-images.githubusercontent.com
140.82.112.13 uploads.github.com
185.199.108.133 user-images.githubusercontent.com
# GitHub End

安装示例

安装Nodejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 下载node-v14发行版linux amd版本二进制包
> weget https://npm.taobao.org/mirrors/node/v14.16.0/node-v14.16.0-linux-x64.tar.xz

# 解压文件
> xz -d node-v14.16.0-linux-x64.tar.xz
> tar xvf node-v14.16.0-linux-x64.tar

# 移动至目标安装目录
> mv ./node-v14.16.0-linux-x64 /opt/node-v14.16.0

# 激活全局命令
> export NODE_HOME=/opt/node-v14.16.0
> export PATH=$NODE_HOME/bin:$PATH

# 验证安装
> node -v
v14.16.0
> npm -v
6.13.4

安装code-server

下载

Releases版本列表

1
2
3
# 登录远程服务器
# 从github上下载程序程序包，请根据系统选择下载相应的版本
> wget https://github.com/cdr/code-server/releases/download/v3.9.1/code-server-3.9.1-amd64.rpm

安装

1
2
# 安装
> sudo yum install ./code-server-3.9.1-amd64.rpm -y

启动

yum 安装成功会在全局注册 code-serve 命令

1
2
3
4
5
6
7
8
# 验证程序能否启动
> code-server
[2021-03-18T10:47:26.763Z] info  code-server 3.9.1 e0203f2a36c9b7036fefa50eec6cf8fa36c5c015
[2021-03-18T10:47:26.764Z] info  Using user-data-dir ~/.local/share/code-server
[2021-03-18T10:47:26.781Z] info  Using config file ~/.config/code-server/config.yaml
[2021-03-18T10:47:26.781Z] info  HTTP server listening on http://127.0.0.1:8080 
[2021-03-18T10:47:26.781Z] info    - Authentication is disabled 
[2021-03-18T10:47:26.781Z] info    - Not serving HTTPS

像上面这样的日志，便是code-server成功启动了。日志表示出code-server的工作情况

  • 默认工作目录： ~/.local/share/code-server
  • 生成了默认配置文件：~/.config/code-server/config.yaml

配置

这一步是可选的，code-server会默认启动在8080端口，并且设置开启【输入密码才能使用】。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# [可选]修改配置，使用vi编辑器修改配置
> vi ~/.config/code-server/config.yaml


# 按a进入插入模式
bind-addr: 127.0.0.1:8080
# auth: password
# password: 036fefa50eec6cf8fa36c5c015
auth: none
cert: false

# 编辑完成按ESC，输入:wq，推出编辑器

# 注册服务并启动服务
# @user为启动code-server的用户，为了避免权限滥用不建议使用 code-server@root
> sudo systemctl enable --now code-server@lighthouse

# 服务器设置完成
> logout

访问

1
2
3
4
5
6
7
8
9
10
11
# 返回本机，打开终端

# 本地ssh映射code-server服务
# eg：ssh -N -L (本机端口):(远程服务器端口) (linux用户名)@(服务器IP地址)
# eg：ssh -N -L 8082:127.0.0.1:8080 [user]@<instance-ip>
# -N disables executing a remote shell

> ssh -N -L 8082:127.0.0.1:8080 lighthouse@3.135.61.1

# 输入密码后，打开本地浏览器访问 localhost:8080

配置服务和自启动

使用which命令找到code-server命令在全局的位置

1
> which code-server

创建service文件，附上参考链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 进入系统服务文件目录
> cd /usr/lib/systemd/system

// 创建service文件
> sudo vim code-server.service

// 刷新系统服务列表
> systemctl daemon-reload

// 查询service文件
> systemctl list-unit-files | grep code

// 以服务方式启动code-server
> sudo systemctl start code-server

// 查看服务状态
> systemctl list-units | grep code

// 停止服务
> sudo systemctl stop code-server

// 启用开机自启
> sudo systemctl enable code-server

// 禁用开机自启
> sudo systemctl disable code-server

演示service文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
[Unit]
Description=code-server
After=nginx.service

[Service]
User=[code-server登录用户]
Group=[code-server登录用户所在用户组]
Type=simple
ExecStart=/usr/bin/code-server --config [你的code-server配置文件路径]
Restart=always

[Install]
WantedBy=multi-user.target

资料

其他应用

Github 代码在线在vscode中打开
例如：
https://github.com/Leslin/thinkphp5-restfulapi
改为：
https://github1s.com/Leslin/thinkphp5-restfulapi

#工具
code-server
https://jacksiongt.github.io/2021/05/07/code-server/
作者
Jacksion
发布于
2021年5月7日
许可协议