eclipse theia_如何在Ubuntu 18.04上设置Eclipse Theia Cloud IDE平台

eclipse theia

介绍 (Introduction)

With developer tools moving to the cloud, adoption of cloud IDE (Integrated Development Environment) platforms is growing. Cloud IDEs are accessible from every type of modern device through web browsers, and they offer numerous advantages for real-time collaboration scenarios. Working in a cloud IDE provides a unified development and testing environment for you and your team, while minimizing platform incompatibilities. Accessible through web browsers, cloud IDEs are available from every type of modern device.

随着开发人员工具转移到云中，对云IDE(集成开发环境)平台的采用正在增长。 每种类型的现代设备都可以通过Web浏览器访问Cloud IDE，它们为实时协作场景提供了众多优势。 在云IDE中工作可为您和您的团队提供统一的开发和测试环境，同时最大程度地减少平台不兼容性。 可以通过Web浏览器访问，各种类型的现代设备都可以使用云IDE。

Eclipse Theia is an extensible cloud IDE running on a remote server and accessible from a web browser. Visually, it’s designed to look and behave similarly to Microsoft Visual Studio Code, which means that it supports many programming languages, has a flexible layout, and has an integrated terminal. What separates Eclipse Theia from other cloud IDE software is its extensibility; it can be modified using custom extensions, which allow you to craft a cloud IDE suited to your needs.

Eclipse Theia是运行在远程服务器上的可扩展云IDE，可从Web浏览器访问。 在外观上，它的外观和行为与Microsoft Visual Studio Code相似，这意味着它支持多种编程语言，灵活的布局以及集成的终端。 Eclipse Theia与其他Cloud IDE软件的不同之处在于其可扩展性。 可以使用自定义扩展对其进行修改，这使您可以制作适合自己需求的云IDE。

In this tutorial, you’ll deploy Eclipse Theia to your Ubuntu 18.04 server using Docker Compose, a container orchestration tool. You’ll expose it at your domain using nginx-proxy, an automated system for Docker that simplifies the process of configuring Nginx to serve as a reverse proxy for a container. You’ll also secure it using a free Let’s Encrypt TLS certificate, which you’ll provision using its specialized add-on. In the end, you’ll have Eclipse Theia running on your Ubuntu 18.04 server available via HTTPS and requiring the user to log in.

在本教程中，您将使用容器编排工具Docker Compose将Eclipse Theia部署到Ubuntu 18.04服务器。 您将使用nginx-proxy (一个针对Docker的自动化系统)在您的域中公开它，该系统可以简化将Nginx配置为用作容器的反向代理的过程。 您还将使用免费的Let's Encrypt TLS证书来保护它，并使用其专门的附件对其进行设置 。 最后，您将通过HTTPS在Ubuntu 18.04服务器上运行Eclipse Theia，并要求用户登录。

先决条件 (Prerequisites)

• An Ubuntu 18.04 server with root privileges, and a secondary, non-root account. You can set this up by following our Initial Server Setup Guide for Ubuntu 18.04. For this tutorial the non-root user is sammy.

  具有root用户特权的Ubuntu 18.04服务器和一个非root用户辅助帐户。 您可以按照我们的Ubuntu 18.04初始服务器安装指南进行设置 。 在本教程中，非root用户是sammy 。

• Docker installed on your server. Follow Step 1 and Step 2 of How To Install Docker on Ubuntu 18.04. For an introduction to Docker, see The Docker Ecosystem: An Introduction to Common Components.

  在您的服务器上安装了Docker。 按照如何在Ubuntu 18.04上安装Docker的 步骤1和步骤2进行操作。 有关Docker的介绍，请参阅Docker生态系统：通用组件介绍 。

• Docker Compose installed on your server. Follow Step 1 of How To Install Docker Compose on Ubuntu 18.04.

  在您的服务器上安装了Docker Compose。 遵循如何在Ubuntu 18.04上安装Docker Compose的 步骤1 。

• A fully registered domain name. This tutorial will use theia.your_domain throughout. You can purchase a domain name on Namecheap, get one for free on Freenom, or use the domain registrar of your choice.

  完全注册的域名。 本教程将始终使用theia.your_domain 。 你可以购买一个域名Namecheap ，免费获得一个在Freenom ，或使用你选择的域名注册商。

• An A DNS record with theia.your_domain pointing to your server’s public IP address. You can follow this introduction to DigitalOcean DNS for details on how to add them.

  一个带有theia.your_domain的DNS记录，指向您服务器的公共IP地址。 您可以按照DigitalOcean DNS简介进行操作，以获取有关如何添加它们的详细信息。

第1步-使用“让我们加密”部署nginx-proxy (Step 1 — Deploying nginx-proxy with Let’s Encrypt)

In this section, you’ll deploy nginx-proxy and its Let’s Encrypt add-on using Docker Compose. This will enable automatic TLS certificate provisioning and renewal, so that when you deploy Eclipse Theia it will be accessible at your domain via HTTPS.

在本节中，您将使用Docker Compose部署nginx-proxy及其“让我们加密” 附加组件 。 这将启用自动TLS证书供应和续订，以便在部署Eclipse Theia时，可以通过HTTPS在您的域中对其进行访问。

For the purposes of this tutorial, you’ll store all files under ~/eclipse-theia. Create the directory by running the following command:

就本教程而言，您将所有文件存储在~/eclipse-theia 。 通过运行以下命令来创建目录：

• mkdir ~/eclipse-theia
  mkdir〜/ eclipse-theia

Navigate to it:

导航到它：

• cd ~/eclipse-theia
  光盘〜/ eclipse-theia

You’ll store the Docker Compose configuration for nginx-proxy in a file named nginx-proxy-compose.yaml. Create it using your text editor:

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

• nano nginx-proxy-compose.yaml
  纳米nginx-proxy-compose.yaml

Add the following lines:

添加以下行：

~/eclipse-theia/nginx-proxy-compose.yaml

〜/ eclipse-theia / nginx-proxy-compose.yaml

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"

Here you’re defining two services that Docker Compose will run, nginx-proxy and its Let’s Encrypt companion. For the proxy, you specify jwilder/nginx-proxy as the image, map HTTP and HTTPS ports, and define volumes that will be accessible to it during runtime.

在这里，您定义了将要运行的Docker Compose两项服务，即nginx-proxy及其“让我们加密”伴侣。 对于代理，您将jwilder/nginx-proxy指定为映像，映射HTTP和HTTPS端口，并定义在运行时可访问的卷。

Volumes are directories on your server that the defined service will have full access to, which you’ll later use to set up user authentication. To achieve that, you’ll make use of the first volume from the list, which maps the local /etc/nginx/htpasswd directory to the same one in the container. In that folder, nginx-proxy expects to find a file named exactly as the target domain, containing log-in credentials for user authentication in the htpasswd format (username:hashed_password).

卷是服务器上已定义服务将具有完全访问权限的目录，您将在以后使用这些目录来设置用户身份验证。 为此，您将利用列表中的第一个卷，该卷将本地/etc/nginx/htpasswd目录映射到容器中的同一目录。 在该文件夹中， nginx-proxy希望找到一个与目标域完全相同的文件，该文件包含用于htpasswd格式( username:hashed_password )的用户身份验证的登录凭据。

For the add-on, you name the Docker image and allow access to Docker’s socket by defining a volume. Then, you specify that the add-on should inherit access to the volumes defined for nginx-proxy. Both services have restart set to always, which orders Docker to restart the containers in case of crash or system reboot.

对于附加组件，您可以命名Docker映像，并通过定义一个卷来允许访问Docker的套接字。 然后，您指定该插件应继承对为nginx-proxy定义的卷的访问。 两种服务的restart设置为always ，命令Docker在崩溃或系统重启的情况下重启容器。

Save and close the file.

保存并关闭文件。

Deploy the configuration by running:

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

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

Here you pass in the nginx-proxy-compose.yaml filename to the -f parameter of the docker-compose command, which specifies the file to run. Then, you pass the up verb that instructs it to run the containers. The -d flag enables detached mode, which means that Docker Compose will run the containers in the background.

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

The final output will look like this:

最终输出将如下所示：

   
   

    
    Output
   
   
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

You’ve deployed nginx-proxy and its Let’s Encrypt companion using Docker Compose. Now you’ll move on to set up Eclipse Theia at your domain and secure it.

您已经使用Docker Compose部署了nginx-proxy及其“让我们加密”伴侣。 现在，您将继续在您的域中设置Eclipse Theia并对其进行保护。

第2步-部署Dockerized Eclipse Theia (Step 2 — Deploying Dockerized Eclipse Theia)

In this section, you’ll create a file containing any allowed log-in combinations that a user will need to input. Then, you’ll deploy Eclipse Theia to your server using Docker Compose and expose it at your secured domain using nginx-proxy.

在本部分中，您将创建一个文件，其中包含用户需要输入的所有允许的登录组合。 然后，您将使用Docker Compose将Eclipse Theia部署到服务器，并使用nginx-proxy将其公开到您的安全域。

As explained in the previous step, nginx-proxy expects log-in combinations to be in a file named after the exposed domain, in the htpasswd format and stored under the /etc/nginx/htpasswd directory in the container. The local directory which maps to the virtual one does not need to be the same, as was specified in the nginx-proxy config.

如上一步中所述， nginx-proxy希望登录组合以htpasswd格式保存在以公开域命名的文件中，并存储在容器的/etc/nginx/htpasswd目录下。 映射到虚拟目录的本地目录不必与nginx-proxy配置中指定的目录相同。

To create log-in combinations, you’ll first need to install htpasswd by running the following command:

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

• sudo apt install apache2-utils
  sudo apt安装apache2-utils

The apache2-utils package contains the htpasswd utility.

apache2-utils软件包包含htpasswd实用程序。

Create the /etc/nginx/htpasswd directory:

创建/etc/nginx/htpasswd目录：

• sudo mkdir -p /etc/nginx/htpasswd
  须藤mkdir -p / etc / nginx / htpasswd

Create a file that will store the logins for your domain:

创建一个文件，该文件将存储您的域的登录名：

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

  须藤触摸/ etc / nginx / htpasswd / theia.your_domain

Remember to replace theia.your_domain with your Eclipse Theia domain.

请记住用您的Eclipse Theia域替换theia.your_domain 。

To add a username and password combination, run the following command:

要添加用户名和密码组合，请运行以下命令：

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

  sudo htpasswd / etc / nginx / htpasswd / theia.your_domain 用户名

Replace username with the username you want to add. You’ll be asked for a password twice. After providing it, htpasswd will add the username and hashed password pair to the end of the file. You can repeat this command for as many logins as you wish to add.

用您要添加的用户名替换username名。 系统将要求您输入两次密码。 提供后， htpasswd会将用户名和哈希密码对添加到文件末尾。 您可以重复此命令以添加所需数量的登录名。

Now, you’ll create configuration for deploying Eclipse Theia. You’ll store it in a file named eclipse-theia-compose.yaml. Create it using your text editor:

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

• nano eclipse-theia-compose.yaml
  纳米蚀-theia-compose.yaml

Add the following lines:

添加以下行：

~/eclipse-theia/eclipse-theia-compose.yaml

〜/ eclipse-theia / eclipse-theia-compose.yaml

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

In this config, you define a single service called eclipse-theia with restart set to always and theiaide/theia:next as the container image. You also set init to true to instruct Docker to use init as the main process manager when running Eclipse Theia inside the container.

在此配置中，您定义了一个名为eclipse-theia服务，将restart设置为always并将theiaide/theia:next作为容器映像。 您还可以将init设置为true以指示Docker在容器内运行Eclipse Theia时将init用作主要流程管理器。

Then, you specify two environment variables in the environment section: VIRTUAL_HOST and LETSENCRYPT_HOST. The former is passed on to nginx-proxy and tells it at what domain the container should be exposed, while the latter is used by its Let’s Encrypt add-on and specifies for which domain to request TLS certificates. Unless you specify a wildcard as the value for VIRTUAL_HOST, they must be the same.

然后，在environment部分中指定两个环境变量： VIRTUAL_HOST和LETSENCRYPT_HOST 。 前者传递给nginx-proxy并告诉它容器应该暴露在哪个域，而后者则由其“让我们加密”附加组件使用并指定要向哪个域请求TLS证书。 除非您指定通配符作为VIRTUAL_HOST的值，否则它们必须相同。

Remember to replace theia.your_domain with your desired domain, then save and close the file.

请记住，将theia.your_domain替换为所需的域，然后保存并关闭文件。

Now deploy Eclipse Theia by running:

现在，通过运行以下命令部署Eclipse Theia：

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

The final output will look like:

最终输出将如下所示：

   
   

    
    Output
   
   
...
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

Then, in your browser, navigate to the domain you’re using for Eclipse Theia. Your browser will show you a prompt asking you to log in. After providing the correct credentials, you’ll enter Eclipse Theia and immediately see its editor GUI. In your address bar you’ll see a padlock indicating that the connection is secure. If you don’t see this immediately, wait a few minutes for the TLS certificates to provision, then reload the page.

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

Now that you can securely access your cloud IDE, you’ll start using the editor in the next step.

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

步骤3 —使用Eclipse Theia界面 (Step 3 — Using the Eclipse Theia Interface)

In this section, you’ll explore some of the features of the Eclipse Theia interface.

在本节中，您将探索Eclipse Theia界面的一些功能。

On the left-hand side of the IDE, there is a vertical row of four buttons opening the most commonly used features in a side panel.

在IDE的左侧，有一排垂直的四个按钮，用于打开侧面板中最常用的功能。

This bar is customizable so you can move these views to a different order or remove them from the bar. By default, the first view opens the Explorer panel that provides tree-like navigation of the project’s structure. You can manage your folders and files here—creating, deleting, moving, and renaming them as necessary.

该栏是可自定义的，因此您可以将这些视图移动到其他顺序或从栏中删除它们。 默认情况下，第一个视图打开“资源管理器”面板，该面板提供了项目结构的树状导航。 您可以在此处管理文件夹和文件-根据需要创建，删除，移动和重命名它们。

After creating a new file through the File menu, you’ll see an empty file open in a new tab. Once saved, you can view the file’s name in the Explorer side panel. To create folders right click on the Explorer sidebar and click on New Folder. You can expand a folder by clicking on its name as well as dragging and dropping files and folders to upper parts of the hierarchy to move them to a new location.

通过“ 文件”菜单创建新文件后，您会在新标签页中看到一个空文件。 保存后，您可以在资源管理器侧面板中查看文件的名称。 要创建文件夹，请右键单击资源管理器侧栏，然后单击“ 新建文件夹” 。 您可以通过以下方式展开文件夹：单击文件夹的名称，然后将文件和文件夹拖放到层次结构的上部，以将其移动到新位置。

The next two options provide access to search and replace functionality. Following it, the next one provides a view of source control systems that you may be using, such as Git.

接下来的两个选项提供对搜索和替换功能的访问。 在它之后，下一个视图提供了您可能正在使用的源代码控制系统的视图，例如Git 。

The final view is the debugger option, which provides all the common actions for debugging in the panel. You can save debugging configurations in the launch.json file.

最终视图是debugger选项，该选项提供面板中所有常用的调试操作。 您可以将调试配置保存在launch.json文件中。

The central part of the GUI is your editor, which you can separate by tabs for your code editing. You can change your editing view to a grid system or to side-by-side files. Like all modern IDEs, Eclipse Theia supports syntax highlighting for your code.

GUI的中央部分是您的编辑器，您可以通过选项卡将其分开以进行代码编辑。 您可以将编辑视图更改为网格系统或并排文件。 与所有现代IDE一样，Eclipse Theia支持代码的语法高亮显示。

You can gain access to a terminal by typing CTRL+SHIFT+`, or by clicking on Terminal in the upper menu, and selecting New Terminal. The terminal will open in a lower panel and its working directory will be set to the project’s workspace, which contains the files and folders shown in the Explorer side panel.

您可以通过键入访问终端CTRL+SHIFT+`或通过单击码头上的菜单，并选择新航站楼 。 终端将在下面的面板中打开，其工作目录将设置为项目的工作区，其中包含“资源管理器”侧面板中显示的文件和文件夹。

You’ve explored a high-level overview of the Eclipse Theia interface and reviewed some of the most commonly used features.

您已经浏览了Eclipse Theia界面的高级概述，并回顾了一些最常用的功能。

结论 (Conclusion)

You now have Eclipse Theia, a versatile cloud IDE, installed on your Ubuntu 18.04 server using Docker Compose and nginx-proxy. You’ve secured it with a free Let’s Encrypt TLS certificate and set up the instance to require log-in credentials from the user. You can work on your source code and documents with it individually or collaborate with your team. You can also try building your own version of Eclipse Theia if you need additional functionality. For further information on how to do that, visit the Theia docs.

现在，您已经使用Docker Compose和nginx-proxy将Eclipse Theia(通用的云IDE)安装在Ubuntu 18.04服务器上。 您已使用免费的Let's Encrypt TLS证书保护了它的安全，并将实例设置为需要用户的登录凭据。 您可以单独使用源代码和文档，也可以与团队合作。 如果需要其他功能，也可以尝试构建自己的Eclipse Theia版本。 有关如何执行此操作的更多信息，请访问Theia docs 。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-set-up-the-eclipse-theia-cloud-ide-platform-on-ubuntu-18-04

eclipse theia