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

0%

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

1. WebIDE简介

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

参考文档:

2. 主流WebIDE对比

2.1. VSCode流派

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

代表:Codespacescoder/code-serverCodeSandbox

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 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基本没有差别。