「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

前言

我第一次想找web IDE的时候，是因为大学入手了一台新的 iPad，当时我就想着能不能用这玩意儿敲代码呢？于是我在 app store 里下载了很多个编程工具，但是没有一个让我感觉好用的。这时候我就发现web IDE这个神奇玩意

下图是 ipad 中使用的样子：

web IDE工具使用场景

性能困扰：大学期间学习开发的同学，相信都有被实验室的辣鸡电脑配置折磨的经历，亦或者是自己的电脑配置不太行，敲代码很卡。那咱们可以通过将自己的开发环境在服务器中部署，到了实验室直接打开浏览器，只需要一个 2核4G 的服务器，用起来还是很丝滑的。
环境统一：有的时候学校的电脑安装的某些软件或者依赖版本和你自己电脑上的不相符，或者一些开发工具的配置不同，可能会影响你的学习效率。使用 web IDE 就可以将环境统一配置(Linux)，如果使用 docker部署的话还可以将环境打包成镜像分享给其他同学使用。
随时开发：这一点和第一点其实相似，利用web IDE可以在浏览器就能跑的特性，我们可以在任何有浏览器的设备跑电脑，笔记本，ipad甚至手机都可以敲代码！

code-server 介绍

这次要介绍的就是 code-server 这个ide工具，它就是大名鼎鼎的Vscode 的服务端版本，官方对它的介绍如下

Run VS Code on any machine anywhere and access it in the browser.

翻译一下就是可以 在任何可以使用浏览器的设备上使用 Vscode

code-server 跑起来之后，其实就是和 Vscode 一模一样 的，只是是在浏览器中使用，如下图：

那么 code-server 是如何实现的呢？如果你了解 vscode 的话，你应该知道 VS Code 是基于 Electron 进行开发的。Electron 则是基于 Node.js和 Chromium 的一个框架。因此只需要编写传统的 html，css，js 就可以开发桌面软件。

这么理解的话，说明 Vscode 的源码本身就是具备跑在浏览器上的能力的，因此只需要做出一些改造即可，简单理解就是将 Vscode 从一个软件改造成了一个传统web项目，后端跑在你的 服务器 上，前端跑在你的 浏览器 中。

code-server 部署

部署 code-server 有两种方式，一种是执行官方脚本直接安装在服务器中，一种是使用 docker 安装。

官方脚本安装方式：

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

docker 安装方式

首先需要在服务器安装 docker ，网上教程很多，这里不赘述
在安装完成docker后，我们创建一个新的目录 /data/code-server 用于挂载我们的容器目录，然后我们执行下面这条命令即可。

sudo docker run -itd --name code-server -p 8080:8080 -u root -w /data -v /data/code-server:/data --auth none code-server:latest

运行成功后，我们在浏览器中访问地址：服务器外网ip:8080 ，就可以进入 code-server 的页面啦~ code-server 和 vscode 的使用逻辑都是一样的，可以直接在上面安装拓展。

这里更推荐使用 docker 噢，将上面那条 docker 的启动命令进行一定的自定义还可以实现更多功能。可以参考这个文档：coder.com/docs/code-s…

使用docker 部署 code-server的优势

利用 docker 的环境隔离机制，我们可以将自己的各个语言的学习或者开发的环境单独启动一个容器并在其中配置。例如前端一个单独的容器安装node.js 后端一个单独的容器安装jdk，各个容器间再安装一些对应的 vscode 拓展，使用起来井井有条

其次如果环境装坏了或者遇到问题直接把容器删了重新启动一个，美滋滋。

code-server 使用技巧

code-server 虽然安装好了，但是还有很多使用技巧值得你学习一下噢。

如果你是一名前端开发，如果使用前端框架进行开发一般都会提供预览的服务器可以通过类似 localhost:3000 的地址访问 node.js 启动的开发预览，在服务启动后你可以直接通过 外网ip:3000 访问预览网站，但如果你是用了docker 进行开发，你需要提前将端口暴露并映射出来，可以修改一下上面的容器启动命令中 -p ，这个参数是容器内部端口绑定到指定的主机端口。

如果你并没有使用现成的前端框架，或者你是直接在 html，css，js 中进行网站构建的，那么你可以使用 live server 这个拓展，帮助你快速启动一个临时服务，但是同样也是需要暴露好端口用于访问的噢。