Gitpod

Gitpod — Online IDE For GitHub

Gitpod 是一个在线IDE,可以从任何GitHub页面启动。只需在任何GitHub-URL前加上https://gitpod.io#${GitHub-URL},或使用我们的浏览器扩展为GitHub页面添加一个按钮。

在几秒钟之内,Gitpod 就可以为您提供一个完整的开发环境,包括一个VS Code驱动的IDE和一个可以由项目定制化配置的云Linux容器。

Theia

TheiaEclipse 推出的云端和桌面 IDE 平台,完全开源。Theia 是基于 VS Code 开发的,它的模块化特性非常适合二次开发,比如华为云 CloudIDE、阿里云 Function Compute IDE 便是基于 Theia 开发。

快速构建你的IDE

必要条件

你先安装需要 nodejs 10

1
2
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash
nvm install 10

然后安装 yarn

1
npm install -g yarn

同时要确保你的python指向的时python2.x版本

安装

创建并进入一个my-app目录

1
2
mkdir my-app
cd my-app

创建package.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"private": true,
"dependencies": {
"@theia/callhierarchy": "next",
"@theia/file-search": "next",
"@theia/git": "next",
"@theia/json": "next",
"@theia/markers": "next",
"@theia/messages": "next",
"@theia/mini-browser": "next",
"@theia/navigator": "next",
"@theia/outline-view": "next",
"@theia/plugin-ext-vscode": "next",
"@theia/preferences": "next",
"@theia/preview": "next",
"@theia/search-in-workspace": "next",
"@theia/terminal": "next"
},
"devDependencies": {
"@theia/cli": "next"
}
}

简而言之,Theia应用程序和扩展包都是Node.js包。每一个包都包含一个package.json文件,里面列出了包的一些元数据,如nameversion、运行时和构建时的依赖关系等。

我们来看看这个包的内容:

  • nameversion被省略了,因为我们不打算将它作为一个依赖项来使用。同时它被标记为private,因为不打算将它发布为一个独立的Node.js包。
  • 我们在dependencies中列出了所有运行时依赖的扩展包,如@theia/navigator
    • 有些扩展包需要额外的工具来进行安装,例如,@theia/python需要Python Language Server来安装。此时你需要参考相应的文档。
    • 可以在这里查看所有已发布的扩展包。
  • 我们将@theis/cli列为构建时的依赖项,它提供了构建和运行应用程序的脚本。

VS Code 扩展

作为应用程序的一部分,也可以使用(打包)VS Code扩展。 Theia存储库包含有关如何将此类扩展包含在应用程序的package.json中的指南。

一个示例package.json可能如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{
"private": true,
"dependencies": {
"@theia/callhierarchy": "next",
"@theia/file-search": "next",
"@theia/git": "next",
"@theia/json": "next",
"@theia/markers": "next",
"@theia/messages": "next",
"@theia/mini-browser": "next",
"@theia/navigator": "next",
"@theia/outline-view": "next",
"@theia/plugin-ext-vscode": "next",
"@theia/preferences": "next",
"@theia/preview": "next",
"@theia/search-in-workspace": "next",
"@theia/terminal": "next"
},
"devDependencies": {
"@theia/cli": "next"
},
"scripts": {
"prepare": "yarn run clean && yarn build && yarn run download:plugins",
"clean": "theia clean",
"build": "theia build --mode development",
"start": "theia start --plugins=local-dir:plugins",
"download:plugins": "theia download:plugins"
},
"theiaPluginsDir": "plugins",
"theiaPlugins": {
"vscode-builtin-css": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/css-1.39.1-prel.vsix",
"vscode-builtin-html": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/html-1.39.1-prel.vsix",
"vscode-builtin-javascript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/javascript-1.39.1-prel.vsix",
"vscode-builtin-json": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/json-1.39.1-prel.vsix",
"vscode-builtin-markdown": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/markdown-1.39.1-prel.vsix",
"vscode-builtin-npm": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/npm-1.39.1-prel.vsix",
"vscode-builtin-scss": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/scss-1.39.1-prel.vsix",
"vscode-builtin-typescript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/typescript-1.39.1-prel.vsix",
"vscode-builtin-typescript-language-features": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/typescript-language-features-1.39.1-prel.vsix"
}
}

构建

首先安装所有依赖

1
yarn

其次,使用Theia CLI构建应用程序。

1
yarn theia build

yarn在我们的应用程序上下文中查找@theia/cli提供的theia可执行文件,然后使用theia执行build命令。 由于该应用程序默认情况下是在生产模式下构建的(即经过混淆和缩小),因此可能需要一段时间。

运行

构建完成后,我们可以启动应用程序:

1
yarn start

您可以提供一个工作区路径作为第一个参数打开,并提供--hostname--port选项以将应用程序部署在特定的网络接口和端口上,例如 在所有接口和端口8080上打开/workspace

1
yarn start /my-workspace --hostname 0.0.0.0 --port 8080

在终端中,您应该看到Theia应用程序已启动并正在侦听:

通过在新的浏览器页面中输入打印的地址来打开应用程序。

故障排除

Plugins not appearing

如果正在运行的Theia实例中没有可用的插件,则可能是您需要告诉Theia在哪里可以找到下载的插件。 上面的示例在启动命令中设置了--plugins开关,这应该足够了。 但是,如果直接运行theia启动,则可以选择设置环境变量来实现相同的目的:

1
export THEIA_DEFAULT_PLUGINS=local-dir:plugins

Building native dependencies behind a proxy

如果在代理之下运行yarn命令,则在构建的本机依赖项(例如oniguruma)中可能会在构建的最后部分遇到问题,并带有以下错误堆栈:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[4/4] Building fresh packages...
[1/9] XXXXX
[2/9] XXXXX
[3/9] XXXXX
[4/9] XXXXX
error /theiaide/node_modules/XXXXX: Command failed.
Exit code: 1
Command: node-gyp rebuild
Arguments:
Directory: /theiaide/node_modules/XXXXX
Output:
gyp info it worked if it ends with ok
gyp info using node-gyp@3.8.0
gyp info using node@8.15.0 | linux | x64
gyp http GET https://nodejs.org/download/release/v8.15.0/node-v8.15.0-headers.tar.gz
gyp WARN install got an error, rolling back install
gyp ERR! configure error
gyp ERR! stack Error: read ECONNRESET
gyp ERR! stack at TLSWrap.onread (net.js:622:25)
gyp ERR! System Linux 3.10.0-862.11.6.el7.x86_64
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /theiaide/node_modules/XXXXX
gyp ERR! node -v v8.15.0

发生这种情况是因为node-gyp不依赖 System/NPM代理设置。在这种情况下,请使用错误堆栈中提供的链接下载节点头文件(在上面的示例中https://nodejs.org/download/release/v8.15.0/node-v8.15.0-headers.tar.gz)并使用以下命令运行构建:

1
npm_config_tarball=/path/to/node-v8.15.0-headers.tar.gz yarn install

使用 Docker 构建

从 theia-apps 快速构建

Theia提供了不同版本的镜像,可以在theia-apps 选择自己需要的语言版本,可以支持 C++/Go/Python/Java/PHP/Ruby等多种语言。最简单的方法,就是直接获取镜像启动容器。

拉取完整版镜像并在当前目录运行:

1
2
docker pull theiaide/theia-full
docker run -it --init -p 3000:3000 -v "$(pwd):/home/project:cached" theiaide/theia-full:latest

其中,$(pwd) 代表的是将当前目录挂载到 Docker 容器中,也可以指定文件目录。

然而,需要特别注意的是,Theia 本身没有认证机制,任何知道公网 IP 和端口号的人都可使用。因此,不推荐这种方法。

构建更安全的版本

Theia-https-docker 增加了 token 认证和 https,可以在标准镜像中加入 security layer,强烈建议使用它构造自己的镜像。构建也非常简单,按以下三个步骤操作即可,其中第三步的 --build-arg app= 填入需要使用的语言版本,这里使用的也是 full 版本。

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-security

耐心等到构建完成,输入docke images就可看到自己构建的 theiaide/theia-full-security 镜像。

之后就可运行,token 后接的是访问口令:

1
docker run --init -it -p 10443:10443 -e token=mysecrettoken -v "$(pwd):/home/project:cached" theiaide/theia-full-security

但一般我们都需要后台运行,可以这样让容器后台运行:

1
docker run --init -itd -p 10443:10443 -e token=mysecrettoken -v "$(pwd):/home/project:cached" theiaide/theia-full-security

如果要指定使用 /home/coding目录,后台运行,则是:

1
docker run --init -itd -p 10443:10443 -e token=mysecrettoken -v "$(pwd):/home/project:cached" theiaide/theia-full-security

打开 https://ip地址:10443,输入 token 便可打开 Web IDE。也可直接使用 https://ip地址:10443/?token=mysecrettoken 直接打开。

解决权限问题

然而,如果这时使用,会发现 Theia 无法写入文件。这是 Theia 默认使用了 1000userid,跟宿主机不一样,从而造成的权限问题。

解决方法有这么几个:

  1. 将挂载的文件权限改为 777,这种方法不太安全: chmod -R 777 /home/coding
  2. 指定用户运行,但如果使用的是 root,仍会有些不安全:docker run --user=root --init -it -p 10443:10443 -e token=mysecrettoken -v "$(pwd):/home/project:cached" theiaide/theia-full-security
  3. 将挂载的文件夹属主改为1000,推荐这种方法: chown -R 1000 /home/coding

部署标准版并反代

准备

  • 具有root用户特权的Ubuntu 18.04服务器和一个非root用户辅助帐户。 您可以按照我们的Ubuntu 18.04初始服务器安装指南进行设置。 在本教程中,非root用户是sammy
  • 在您的服务器上安装了Docker。 按照如何在Ubuntu 18.04上安装Docker的步骤1和步骤2进行操作。 有关Docker的简介,请参阅Docker生态系统:通用组件简介
  • 服务器上安装了Docker Compose。 遵循如何在Ubuntu 18.04上安装Docker Compose的步骤1。
  • 域名。 本教程将始终使用theia.your_domain。 您可以Namecheap上购买域名,在 Freenom 上免费获得一个域名,或使用您选择的域名注册商。
  • 一个带有theia.your_domainDNS记录,指向您服务器的公共IP地址。

使用 Let’s Encrypt 部署 Nginx 代理

使用Docker Compose部署Nginx代理及其Let’s Encrypt插件。 这将启用自动TLS证书供应和续订,以便在部署Eclipse Theia时,可以通过HTTPS在您的域中对其进行访问。

将所有文件存储在〜/eclipse-theia下。 通过运行以下命令来创建目录:

1
2
mkdir ~/eclipse-theia
cd ~/eclipse-theia

您将在nginx-proxy-compose.yaml文件中存储nginx-proxyDocker Compose配置。 使用文本编辑器创建它:

1
nano nginx-proxy-compose.yaml

~/eclipse-theia/nginx-proxy-compose.yaml中添加:

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

services:
nginx-proxy:
restart: always
image: jwilder/nginx-proxy
ports:
- "80:80"
- "443:443"
volumes:
- "/etc/nginx/htpasswd:/etc/nginx/htpasswd"
- "/etc/nginx/vhost.d"
- "/usr/share/nginx/html"
- "/var/run/docker.sock:/tmp/docker.sock:ro"
- "/etc/nginx/certs"

letsencrypt-nginx-proxy-companion:
restart: always
image: jrcs/letsencrypt-nginx-proxy-companion
volumes:
- "/var/run/docker.sock:/var/run/docker.sock:ro"
volumes_from:
- "nginx-proxy"

在这里,您定义了将要运行的Docker Compose两项服务,即nginx-proxy及其Let’s Encrypt。 对于代理,您将jwilder/nginx-proxy指定为映像,映射HTTPHTTPS端口,并定义在运行时可访问的卷。
Volumes是服务器上定义的服务将具有完全访问权限的目录,您将在以后使用这些目录来设置用户身份验证。 为此,您将利用列表中的第一个卷,该卷将本地/etc/nginx/htpasswd目录映射到容器中的同一目录。 在该文件夹中,nginx-proxy希望找到一个与目标域完全相同的文件,该文件包含用于htpasswd格式(用户名:hashed_pa​​ssword)的用户身份验证的登录凭据。

对于插件,您可以命名Docker映像,并通过定义一个卷来允许访问Docker的 socket。 然后,您指定该插件应继承对为nginx-proxy定义的卷的访问。 两种服务都将重新启动设置为始终,这会命令Docker在崩溃或系统重新启动的情况下重新启动容器。

通过运行以下命令来部署配置:

1
docker-compose -f nginx-proxy-compose.yaml up -d

nginx-proxy-compose.yaml文件名传递到docker-compose命令的-f参数,该参数指定要运行的文件。
然后,通过up命令启动容器。 -d标志启用分离模式,这意味着Docker Compose将在后台运行容器。

最终输出将如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Creating network "eclipse-theia_default" with the default driver
Pulling nginx-proxy (jwilder/nginx-proxy:)...
latest: Pulling from jwilder/nginx-proxy
8d691f585fa8: Pull complete
5b07f4e08ad0: Pull complete
...
Digest: sha256:dfc0666b9747a6fc851f5fb9b03e65e957b34c95d9635b4b5d1d6b01104bde28
Status: Downloaded newer image for jwilder/nginx-proxy:latest
Pulling letsencrypt-nginx-proxy-companion (jrcs/letsencrypt-nginx-proxy-companion:)...
latest: Pulling from jrcs/letsencrypt-nginx-proxy-companion
89d9c30c1d48: Pull complete
668840c175f8: Pull complete
...
Digest: sha256:a8d369d84079a923fdec8ce2f85827917a15022b0dae9be73e6a0db03be95b5a
Status: Downloaded newer image for jrcs/letsencrypt-nginx-proxy-companion:latest
Creating eclipse-theia_nginx-proxy_1 ... done
Creating eclipse-theia_letsencrypt-nginx-proxy-companion_1 ... done

您已经使用Docker Compose部署了nginx-proxy及其Let’s Encrypt。 现在,您将继续在您的域中设置Eclipse Theia并对其进行保护。

部署 Docker 版 Theia

创建一个文件,其中包含用户需要输入的所有允许的登录组合。 然后,您将使用Docker ComposeEclipse Theia部署到您的服务器,并使用nginx-proxy将其公开到您的安全域中。
nginx-proxy希望登录组合以htpasswd格式保存在以公开域命名的文件中,并存储在容器的/etc/nginx/htpasswd目录下。 映射到虚拟目录的本地目录不必与nginx-proxy配置中指定的目录相同。

要创建登录组合,您首先需要通过运行以下命令来安装htpasswd

1
sudo apt install apache2-utils

apache2-utils软件包包含htpasswd实用程序。
创建/etc/nginx/htpasswd目录

1
sudo mkdir -p /etc/nginx/htpasswd

创建一个文件来存储域名的登录名

1
sudo touch /etc/nginx/htpasswd/theia.your_domain

记得将theia.your_domain替换为你的Eclipse Theia域名。

添加用户名和密码组合:

1
sudo htpasswd /etc/nginx/htpasswd/theia.your_domain username

username替换为您想添加的用户名。

现在,您将创建用于部署Eclipse Theia的配置。 您会将其存储在名为eclipse-theia-compose.yaml的文件中。 使用文本编辑器创建它:

1
nano eclipse-theia-compose.yaml

~/eclipse-theia/eclipse-theia-compose.yaml文件中添加:

1
2
3
4
5
6
7
8
9
10
version: '2.2'

services:
eclipse-theia:
restart: always
image: theiaide/theia:next
init: true
environment:
- VIRTUAL_HOST=theia.your_domain
- LETSENCRYPT_HOST=theia.your_domain

在此配置中,您定义了一个名为eclipse-theia的服务,将restart设置为always并将theiaide/theia:next作为容器映像。 您还可以将init设置为true,以指示Docker在容器内运行Eclipse Theia时将init用作主要流程管理器。
然后,在环境部分中指定两个环境变量:VIRTUAL_HOSTLETSENCRYPT_HOST。 前者将传递给nginx-proxy并告知容器应该暴露给哪个域名,而后者则由其Let’s Encrypt使用,并指定要向哪个域名请求TLS证书。 除非您指定通配符作为VIRTUAL_HOST的值,否则它们必须相同。

通过运行以下命令部署Eclipse Theia

1
docker-compose -f eclipse-theia-compose.yaml up -d

最终输出如下所示:

1
2
3
4
5
6
7
8
9
...
Pulling eclipse-theia (theiaide/theia:next)...
next: Pulling from theiaide/theia
63bc94deeb28: Pull complete
100db3e2539d: Pull complete
...
Digest: sha256:c36dff04e250f1ac52d13f6d6e15ab3e9b8cad9ad68aba0208312e0788ecb109
Status: Downloaded newer image for theiaide/theia:next
Creating eclipse-theia_eclipse-theia_1 ... done

然后,在浏览器中,输入您用于Eclipse Theia的域名。 您的浏览器将提示您登录。提供正确的凭据后,您将进入Eclipse Theia并看到GUI编辑器。 在地址栏中,您会看到一个挂锁标识,表明该连接是安全的。 如果您没有立即看到此消息,请等待几分钟以提供TLS证书,然后重新加载页面。

现在,您可以安全地访问您的云IDE,接下来将开始使用编辑器。

参考

  1. Theia 官方文档
  2. 随时随地敲代码,基于Theia快速部署自己的云开发环境
  3. How To Set Up the Eclipse Theia Cloud IDE Platform on Ubuntu 18.04