手把手教你从零打造一款在线编辑器

我曾经在一家在线教育公司做培训的时候，发现他们一个很有竞争力的产品，就是NW电子教室（为了隐私，把前面两个字用首字母替代了），学员可以直接通过在线编辑器学习编程。这样的好处是学员无须自己配置繁琐的环境，把注意力都集中在核心知识点上。这个NW电子教室帮助他们从众多在线教育公司中脱颖而出，扩招了不少学生。当时我就在琢磨这个NW电子教室实现的原理，直到后来我遇到了code-server，才发现这一切并没有想象中复杂。

code-server库介绍：

code-server是一款由美国一个团队开发的在线的VS Code编辑器解决方案，基础版是免费的，也有付费的企业版。关于基础版与付费版，用法与gitlab类似。因为code-server使用了WebSocket协议，所以要使用它，得先准备一台2核CPU+4G内存以上配置的服务器。这里说一下我的心得，读者如果是作为学习目的，可以直接在阿里云官网上按量付费购买阿里云服务器，一台2核心+8G内存的服务器一个小时才0.5元左右，在学习完后，可以立马释放。既能享受云服务器带来的众多功能，又不用花太多钱。

安装：

code-server安装方式有多种：

1. 通过脚本安装：sudo curl -fsSL https://code-server.dev/install.sh | sh。这种方式是最简单的，也是官方所推荐的。
2. docker安装：

mkdir -p ~/.config
docker run -it --name code-server -p 127.0.0.1:8080:8080 \
-v "$HOME/.config:/home/coder/.config" \
-v "/data/project:/home/coder/project" \
-u "$(id -u):$(id -g)" \
-e "DOCKER_USER=$USER" \
codercom/code-server:latest

其中$HOME/.config用于存放设置VS Code的配置信息，/data/project是工作目录。
3. 通过源代码安装：需要先手动下载源代码，然后再安装，读者如果感兴趣可以查看官方源代码安装教程：https://coder.com/docs/code-server/latest/install#standalone-releases

小编用的是Ubuntu 20 LST版的操作系统，就用官方推荐的脚本的方式来安装。

安装完成后，我们将code-server添加为服务。执行以下命令：

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

他会自动读取当前用户名，将服务设置为code-server@USER。这里不能直接设置服务名为code-server，至于原因，这里还没来得及深究。

然后我们就可以使用systemctl命令控制code-server的启停了：

# 启动code-server
sudo systemctl start code-server@$USER
# 关闭code-server
sudo systemctl stop code-server@$USER

配置code-server：

code-server默认情况下会在/home/[username]/.config/code-server/下生成一个config.yaml文件。这个文件默认的配置为：

bind-addr: 127.0.0.1:8080
auth: password
password: 79abcf83e3sf938d0df23c81
cert: false

bind-add代表监听的域名和端口号，默认是限制本机的8000端口访问，如果想要提供外网访问，则可以修改为0.0.0.0:8080，auth代表授权方式，默认是用密码，而下面的password字段则是安装后随机生成的密码，读者可以自行修改为自己好记的密码。比如我将文件内容修改为如下：

bind-addr: 0.0.0.0:8080
auth: password
password: 111111
cert: false

修改完配置文件后，记得重新启动。命令为：sudo systemctl restart code-server@$USER。

体验：

接下来可以在浏览器中输入：http://[ip]:8080后出现一个登录页面。

输入之前配置文件中默认生成的密码后，即可进入到在线的编辑器页面了。

看到界面，我们有一种非常熟悉的赶脚。这不就是在线版的VS Code吗？

跟本地的VS Code一样，我们点击左边的Extension，然后安装一下汉化包Chinese(Simplified)。

汉化完后的效果如下，不能说本地的效果毫不相干，只能说一模一样。

然后我们还可以再配置一下Python开发环境，同样点开扩展，然后搜索Python插件。

安装完后，左下角会出现系统中已经安装好的Python版本，然后点击他，在命令行中就会出现Python解释器。

这里我们创建一个app.py文件，写一个简单的Flask项目。

然后在浏览器中，我们访问：http://[ip]:5000，就能看到刚开发flask项目效果页面了。

实践了一段时间，用一个字来形容，那就是爽！以后只要我服务器开着，在任何时候任何地点任何设备（甚至是手机），我都能愉快的开发了！（o(╥﹏╥)o，无处不在的web狗）。

部署：

code-server是由node.js运行的项目，本身不具备非常强的web能力。因此如果想要真正用于生产环境，最好在前面加上一个nginx，通过sudo apt install nginx即可安装。安装后，在/etc/nginx/conf.d下添加配置文件，比如叫做codeserver.conf。然后填入以下代码：

server {
    listen 80;
    server_name [云服务器IP地址];

    location / {
        proxy_pass http://127.0.0.1:8080/;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
    }
}

另外还要记得把之前code-server配置中的bind-addr修改为127.0.0.1:8080。那么以后在浏览器中访问http://[ip]即可访问到在线编辑器了。

更多好文请移步公主号：