1. WebIDE简介

WebIDE是一个现代化的开发工具，它可以让我们直接在浏览器中编写、运行和调试代码。不需要安装任何软件，只需要一个现代化的浏览器和网络连接就可以进行开发。这是一种全新的开发方式，并迅速得到了广大开发者的欢迎。

参考文档：

2. 主流WebIDE对比

2.1. VSCode流派

VSCode流派基于VSCode，提供了通过浏览器访问VSCode IDE的功能。
支持VSCode插件，并提供了与VSCode相同的编辑器功能。

代表：Codespaces、coder/code-server、CodeSandbox

2.2. Projector流派

JetBrains Projector流派基于JetBrains，提供了通过浏览器远程访问JetBrains IDE的功能。
支持多个编程语言和多种插件，并提供了与JetBrains IDE相同的编辑器功能。

代表：JetBrains Projector

2.3. Theia流派

Theia流派基于Eclipse Theia，部分功能复用VSCode，但是在扩展能力上，远超VSCode。

代表：Gitpod、阿里云OpenSumi、华为云CodeArtsIDE、Google云IDE

2.4. StackBlitz

StackBlitz是一款专为Web应用程序开发设计的WebIDE，适合前端开发。

3. code-server工作原理

通过浏览器或者客户端连接远程的IDE（code-server），远程IDE负责执行，结果实时返回。如果产生数据，那么数据存储在远程磁盘上。
远程IDE可以运行在VM上，也可以运行在容器中。

4. 安装配置code-server

参考文档：Coder Docs - Install by Docker

1、安装code-server

# This will start a code-server container and expose it at http://127.0.0.1:8080.
# It will also mount your current directory into the container as `/home/coder/project`
# and forward your UID/GID so that all file system operations occur as your user outside
# the container.
#
# Your $HOME/.config is mounted at $HOME/.config within the container to ensure you can
# easily access/modify your code-server config in $HOME/.config/code-server/config.json
# outside the container.
mkdir -p ~/.config
docker run -it --name code-server -d \
  -p 8080:8080 \
  -v "$HOME/.local:/home/coder/.local" \
  -v "$HOME/.config:/home/coder/.config" \
  -v "$PWD:/home/coder/project" \
  -u "$(id -u):$(id -g)" \
  -e "DOCKER_USER=$USER" \
  codercom/code-server:latest

2、查看code-server状态

1	docker logs code-server

5. 使用code-server

1、浏览器访问code-server服务
假设主机IP为 192.168.50.101，那么浏览器访问 http://192.168.50.101:8080/login

2、获取密码

1	docker exec -it code-server cat /root/.config/code-server/config.yaml

获取到密码后，在浏览器页面中输入密码，即可进入code-server。

3、使用code-server
使用方法和vscode基本没有差别。

一个计算机技术爱好者与学习者

好好学Docker：使用Docker安装配置WebIDE VSCode