Docker建站（五）Theia：云端IDE，在线版VSCode

1、关于

theia 是一套构建基于 web 的云端工具和 IDE 的开源框架。theia 提供了一个工作框架、模块系统、和 git 集成等一些可重用的特性。基于 theia 的工具可以远程部署，并通过浏览器或桌面应用如 Electron 进行访问。theia 基于 Typescript、HTML、CSS、LSP（Language Server Protocol）和 VS Code 提供的 Monaco 代码编辑器构建。
它是一套开源框架，而不是一个最终产品，开发者可以基于 theia 构建和自定义一款属于自己的 IDE 或工具，例如 gitpod、建模工具等。
——Google

1.1、优点

• 为终端用户提供完整的多语言 IDE（不仅仅是智能编辑器）。
• 同时支持桌面和云端的 IDE。
• 和 VS Code 体验高度一致，大大降低学习成本。
• 方便扩展，开发者可定制自己的 IDE。
• 由 Eclipse 基金会托管，是一个与厂商无关的项目。

1.2、缺点

• 第一次打开界面或刷新界面时，会加载所有插件，耗时较长，20s~1min。
• 增加一个新插件需要重新编译整个 IDE。
• 默认只支持 nodejs 语言，其它语言可在扩展处安装，或者在 theia 自带的命令行终端中安装。
• 通过界面操作，只能打开服务器上已有的项目或新建文件夹。
• 不能上传项目，但是可以在 theia 上自带的终端执行 git 命令拉取 git 项目，也可以通过其它命令如 rsync 或 scp 命令自行将本地项目拷贝到远程服务器。

2、安装

2.1、官方镜像

执行：

此处内容需要评论回复（自动审核）或加入 QQ 技术交流群（立即获得内容）后方可阅读。赞助（二维码在文章下方）后联系作者可一次性解锁所有（包括之后的新文章）。

但是，可借助 ngx_http_auth_digest 模块进行登录认证。

下载 ngx_http_auth_digest：

1
2

wget https://github.com/atomx/nginx-http-auth-digest/archive/v1.0.0.tar.gz
tar zxvf v1.0.0.tar.gz

编译安装 nginx 时，加上参数：

1

--add-module=/path/to/nginx-http-auth-digest

记得修改/path/to/nginx-http-auth-digest为实际路径！

生成登录密码：

1
2

apt-get install -y apache2-utils
htdigest -c /usr/local/passwd.digest theia admin

其中

/usr/local/passwd.digest

为密码文件路径，

theia 为 realm，必须与后面要提到的 nginx 配置文件保持一致。
admin 为登录用户名。

在 nginx 配置文件中添加 server 段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

server {
    listen 80 default_server;
    auth_digest_user_file /usr/local/passwd.digest;
    auth_digest_shm_size  8m;   # the storage space allocated for tracking active sessions
    
    location / {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        auth_digest 'theia';
        auth_digest_timeout 60s;    # allow users to wait 1 minute between receiving the
                                    # challenge and hitting send in the browser dialog box
        auth_digest_expires 600s;   # after a successful challenge/response, let the client
                                    # continue to use the same nonce for additional requests
                                    # for 600 seconds before generating a new challenge
        auth_digest_replays 60;     # also generate a new challenge if the client uses the
                                    # same nonce more than 60 times before the expire time limit

        proxy_pass http://127.0.0.1:3000;
    }
}

其中，

• auth_digest_user_file 必须与设置密码的 htdigest 命令中的密码文件参数保持一致。
• auth_digest 必须与设置密码的 htdigest 命令的 realm 参数保持一致。
• proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; 这两行必须有，否则不能正确代理 websocket。

这个配置相当于每 (auth_digest_timeout+auth_digest_expires)=660s 允许 auth_digest_shm_size/((48 + ceil(auth_digest_replays/8))bytes)=(810241024)/(48+8)=149.8k 次请求，即每 660s 允许约 149.8k 次请求。登录认证 10min 后过期。

最后启动 nginx，会弹出登录认证框，输入用户名和密码后即可登录，跳转到 theia 界面。

2.2、编译镜像

编译：

1
2
3

git clone https://github.com/theia-ide/theia-apps.git
cd theia-apps/theia-https-docker
docker build . --build-arg app=theia-full -t theiaide/theia-full-sec

启动：

1

docker run --init -itd -p 10443:10443 -e token=mysecrettoken -v "~/theia/:/home/project:cached" theiaide/theia-full-sec

设置目录权限：

1

chown -R 1000 ~/theia/

即可愉快使用啦！

4. 参考

• https://github.com/eclipse-theia/theia/blob/master/doc/Developing.md#quick-start
• https://www.nginx.com/resources/wiki/modules/auth_digest
• https://www.yangyang.cloud/blog/2015/07/17/session-with-express-and-nginx
• https://gist.github.com/heyfluke/b8372df866ec2584f9a51ca7d7fe9ebb
• https://www.cnblogs.com/sparkdev/p/9614164.html