著者は、 Write for DOnations プログラムの一環として、 Free and Open SourceFundを選択して寄付を受け取りました。

序章

開発者ツールがクラウドに移行するにつれ、クラウドIDE(統合開発環境)プラットフォームの作成と採用が拡大しています。 クラウドIDEは、Webブラウザーを介してあらゆるタイプの最新デバイスからアクセスでき、リアルタイムコラボレーションシナリオに多くの利点を提供します。 クラウドIDEでの作業は、プラットフォームの非互換性を最小限に抑えながら、あなたとあなたのチームに統合された開発およびテスト環境を提供します。 ネイティブにクラウドテクノロジーに基づいているため、クラスターを利用してタスクを実行できます。これは、単一の開発コンピューターの能力と信頼性を大幅に超える可能性があります。

Eclipse Theia は、リモートサーバー上で実行され、Webブラウザーからアクセスできる拡張可能なクラウドIDEです。 視覚的には、 Microsoft Visual Studio Code と同様に表示および動作するように設計されています。つまり、多くのプログラミング言語をサポートし、柔軟なレイアウトを備え、端末が統合されています。 Eclipse Theiaを他のクラウドIDEソフトウェアと区別するのは、その拡張性です。 カスタム拡張機能を使用して変更できます。これにより、ニーズに合ったクラウドIDEを作成できます。

このチュートリアルでは、DigitalOceanKubernetesクラスターにEclipseTheiaクラウドIDEプラットフォームのデフォルトバージョンをセットアップし、ドメインで公開し、Let’s Encrypt証明書で保護し、訪問者に認証を要求します。 最終的には、KubernetesクラスターでEclipse Theiaを実行し、HTTPS経由で利用できるようになり、訪問者はログインする必要があります。

前提条件

  • 接続がkubectlデフォルトとして構成されたDigitalOceanKubernetesクラスター。 kubectlを構成する方法の説明は、クラスターを作成するときのクラスターへの接続ステップの下に表示されます。 DigitalOceanでKubernetesクラスタを作成するには、 KubernetesQuickstartをお読みください。
  • ローカルマシンにインストールされているHelm3パッケージマネージャー。 Helm 3 PackageManagerチュートリアルを使用してKubernetesクラスターにソフトウェアをインストールする方法のステップ1を完了します。
  • IngressリソースでExternalDNSを使用するために、Helmを使用してクラスターにインストールされたNginxIngressController。 これを行うには、Helmを使用してDigitalOceanKubernetesでNginxIngressを設定する方法に従ってください。
  • 完全に登録されたドメイン名。 このチュートリアルでは、全体を通してtheia.your_domainを使用します。 Namecheap でドメイン名を購入するか、 Freenom で無料でドメイン名を取得するか、選択したドメイン登録事業者を使用できます。

ステップ1—EclipseTheiaのインストールと公開

まず、EclipseTheiaをDigitalOceanKubernetesクラスターにインストールします。 次に、Nginx Ingressを使用して、目的のドメインで公開します。

前提条件の一部として2つのサンプルデプロイメントとリソースを作成したため、次のコマンドを実行してそれらを自由に削除できます。

  1. kubectl delete -f hello-kubernetes-ingress.yaml
  2. kubectl delete -f hello-kubernetes-first.yaml
  3. kubectl delete -f hello-kubernetes-second.yaml

このチュートリアルでは、展開構成をローカルマシンのeclipse-theia.yamlという名前のファイルに保存します。 次のコマンドを使用して作成します。

  1. nano eclipse-theia.yaml

次の行をファイルに追加します。

eclipse-theia.yaml
apiVersion: v1
kind: Namespace
metadata:
  name: theia
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: theia-next
  namespace: theia
spec:
  ingressClassName: nginx
  rules:
  - host: theia.your_domain
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: theia-next
            port:
              number: 80
---
apiVersion: v1
kind: Service
metadata:
 name: theia-next
 namespace: theia
spec:
 ports:
 - port: 80
   targetPort: 3000
 selector:
   app: theia-next
---
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: theia-next
  name: theia-next
  namespace: theia
spec:
  selector:
    matchLabels:
      app: theia-next
  replicas: 1
  template:
    metadata:
      labels:
        app: theia-next
    spec:
      containers:
      - image: francoisvans/theia-docker-test
        imagePullPolicy: Always
        name: theia-next
        ports:
        - containerPort: 3000

この構成は、名前空間、デプロイメント、サービス、および入力を定義します。 名前空間はtheiaと呼ばれ、クラスターの残りの部分から分離された、EclipseTheiaに関連するすべてのKubernetesオブジェクトが含まれます。 デプロイは、コンテナに公開されているポート3000を持つTheiaDockerイメージの1つのインスタンスで構成されます。 サービスはデプロイメントを検索し、コンテナーポートを通常のHTTPポート80に再マップして、クラスター内でEclipseTheiaにアクセスできるようにします。

Ingressには、目的のドメインの外部のポート80でサービスを提供するためのルールが含まれています。 そのアノテーションで、リクエスト処理にNginxIngressControllerを使用するように指定します。 theia.your_domainを、クラスターのロードバランサーを指定した目的のドメインに置き換えてから、ファイルを保存して閉じることを忘れないでください。

ファイルを保存して終了します。

次に、次のコマンドを実行して、Kubernetesで構成を作成します。

  1. kubectl apply -f eclipse-theia.yaml

出力は次のようになります。

Output
namespace/theia created ingress.networking.k8s.io/theia-next created service/theia-next created deployment.apps/theia-next created

次のコマンドを実行して、EclipseTheiaポッドの作成を確認できます。

  1. kubectl get pods -w -n theia

出力は次のようになります。

Output
NAME READY STATUS RESTARTS AGE theia-next-6f6b98dd4f-qknhb 1/1 Running 0 2m30s

しばらくすると、ステータスがRUNNINGに変わります。これは、EclipseTheiaがクラスターに正常にインストールされたことを意味します。

ブラウザでドメインに移動します。 デフォルトのEclipseTheiaエディターGUIが表示されます。

The default Eclipse Theia editor GUI

EclipseTheiaをDigitalOceanKubernetesクラスターにデプロイし、Ingressを使用して目的のドメインに公開しました。 次に、ログイン認証を有効にすることで、EclipseTheiaデプロイメントへのアクセスを保護します。

ステップ2—ドメインのログイン認証を有効にする

このステップでは、EclipseTheiaデプロイメントのユーザー名とパスワードの認証を有効にします。 これを実現するには、最初にhtpasswdユーティリティを使用して有効なログインの組み合わせのリストをキュレートします。 次に、そのリストを含むKubernetesシークレットを作成し、それに応じて訪問者を認証するようにIngressを設定します。 最終的に、訪問者が有効なユーザー名とパスワードの組み合わせを入力した場合にのみ、ドメインにアクセスできます。 これにより、ゲストやその他の不要な訪問者がEclipseTheiaにアクセスできなくなります。

htpasswdユーティリティはApacheWebサーバーから提供され、ログインの組み合わせのリストを格納するファイルを作成するために使用されます。 htpasswdファイルの形式は、1行に1つのusername:hashed_passwordの組み合わせです。これは、NginxIngressControllerがリストに準拠することを期待する形式です。

まず、パッケージマネージャーのキャッシュを更新します。

  1. sudo apt update

次に、次のコマンドを実行して、システムにhtpasswdをインストールします。

  1. sudo apt install apache2-utils -y

リストはauthというファイルに保存します。 次のコマンドを実行して作成します。

  1. touch auth

Nginx IngressControllerはシークレットにdata.authというキーが含まれていることを想定しているため、このファイルにはauthという名前を付ける必要があります。 欠落している場合、コントローラーはHTTP 503Service Unavailableステータスを返します。

次のコマンドを実行して、ユーザー名とパスワードの組み合わせをauthに追加します。

  1. htpasswd auth username

usernameを希望のユーザー名に置き換えることを忘れないでください。 付随するパスワードの入力を求められ、その組み合わせがauthファイルに追加されます。 追加したい数のユーザーに対してこのコマンドを繰り返すことができます。

注:作業中のシステムにhtpasswdがインストールされていない場合は、代わりにDocker化バージョンを使用できます。

マシンにDockerをインストールする必要があります。 その方法については、公式ドキュメントにアクセスしてください。

次のコマンドを実行して、ドッキングされたバージョンを実行します。

  1. docker run --rm -it httpd htpasswd -n <username>

<username>を使用するユーザー名に置き換えることを忘れないでください。 パスワードの入力を求められます。 ハッシュ化されたログインの組み合わせはコンソールに書き出され、authファイルの最後に手動で追加する必要があります。 追加したい数のログインに対してこのプロセスを繰り返します。

完了したら、次のコマンドを実行して、ファイルの内容を使用してKubernetesに新しいシークレットを作成します。

  1. kubectl create secret generic theia-basic-auth --from-file=auth -n theia

あなたは秘密を見ることができます:

  1. kubectl get secret theia-basic-auth -o yaml -n theia

出力は次のようになります。

Output
apiVersion
: v1 data: auth: ... kind: Secret metadata: creationTimestamp: "2021-12-31T17:16:29Z" name: theia-basic-auth namespace: theia resourceVersion: "32437" uid: 47461e23-e281-411b-acfd-cea82fcde41b type: Opaque

次に、シークレットを使用するようにIngressを編集する必要があります。 編集のためにデプロイメント構成を開きます。

  1. nano eclipse-theia.yaml

強調表示された行をファイルに追加します。

eclipse-theia.yaml
apiVersion: v1
kind: Namespace
metadata:
  name: theia
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: theia-next
  namespace: theia
  annotations:
    nginx.ingress.kubernetes.io/auth-type: basic
    nginx.ingress.kubernetes.io/auth-secret: theia-basic-auth
    nginx.ingress.kubernetes.io/auth-realm: 'Authentication Required - Eclipse Theia'
spec:
  ingressClassName: nginx
  rules:
  - host: theia.your_domain
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: theia-next
            port:
              number: 80
...

まず、auth-typeアノテーションで、認証タイプがbasicであることを指定します。 これは、Nginxがユーザーにユーザー名とパスワードの入力を要求することを意味します。 次に、auth-secretで、有効な組み合わせのリストを含むシークレットが、作成したばかりのtheia-basic-authであることを指定します。 残りのauth-realm注釈は、認証が必要な理由の説明としてユーザーに表示されるメッセージを指定します。 このフィールドに含まれるメッセージを好みに合わせて変更できます。

ファイルを保存して閉じます。

変更をクラスターに伝達するには、次のコマンドを実行します。

  1. kubectl apply -f eclipse-theia.yaml

次の出力が表示されます。

Output
namespace/theia unchanged ingress.networking.k8s.io/theia-next configured service/theia-next unchanged deployment.apps/theia-next unchanged

ブラウザでドメインに移動します。ここで、ログインするように求められます。

ハッシュされたユーザー名とパスワードの組み合わせを含むシークレットを使用するように設定することで、Ingressで基本的なログイン認証を有効にしました。 次のステップでは、TLS証明書を追加してアクセスをさらに保護し、EclipseTheiaデプロイメント間のトラフィックが暗号化されたままになるようにします。

ステップ3—Let’sEncryptのHTTPS証明書を適用する

次に、Cert-Managerが自動的にプロビジョニングするIngressにLet’s Encrypt証明書を適用して、EclipseTheiaのインストールを保護します。 このステップを完了すると、EclipseTheiaのインストールにHTTPS経由でアクセスできるようになります。

eclipse-theia.yamlを開いて編集します。

  1. nano eclipse-theia.yaml

強調表示された行をファイルに追加し、プレースホルダードメインを独自のドメインに置き換えてください。

eclipse-theia.yaml
apiVersion: v1
kind: Namespace
metadata:
  name: theia
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: theia-next
  namespace: theia
  annotations:
    nginx.ingress.kubernetes.io/auth-type: basic
    nginx.ingress.kubernetes.io/auth-secret: theia-basic-auth
    nginx.ingress.kubernetes.io/auth-realm: 'Authentication Required - Eclipse Theia'
    cert-manager.io/cluster-issuer: letsencrypt-prod
spec:
  tls:
  - hosts:
    - theia.your_domain
    secretName: theia-prod
  ingressClassName: nginx
  rules:
  - host: theia.your_domain
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: theia-next
            port:
              number: 80
...

最初に、前提条件の一部として作成したletsencrypt-prod ClusterIssuerを、このIngressの証明書のプロビジョニングに使用される発行者として指定します。 次に、tlsセクションで、保護する必要のある正確なドメインと、それらの証明書を保持するシークレットの名前を指定します。

ファイルを保存して終了します。

次のコマンドを実行して、変更をクラスターに適用します。

  1. kubectl apply -f eclipse-theia.yaml

出力は次のようになります。

Output
namespace/theia unchanged ingress.networking.k8s.io/theia-next configured service/theia-next unchanged deployment.apps/theia-next unchanged

証明書がプロビジョニングされ、完全に適用されるまでに数分かかります。 次のコマンドの出力を観察することで、進行状況を追跡できます。

  1. kubectl describe certificate theia-prod -n theia

終了すると、出力の終わりは次のようになります。

Output
... Events: Type Reason Age From Message ---- ------ ---- ---- ------- Normal GeneratedKey 42m cert-manager Generated a new private key Normal Requested 42m cert-manager Created new CertificateRequest resource "theia-prod-3785736528" Normal Issued 42m cert-manager Certificate issued successfully

ブラウザでドメインを更新します。 アドレスバーの左端に緑色の南京錠が表示され、接続が安全であることを示します。

Let’s Encrypt証明書を使用するようにIngressを構成したので、EclipseTheiaのデプロイメントがより安全になります。 これで、デフォルトのEclipseTheiaユーザーインターフェイスを確認できます。

ステップ4—EclipseTheiaインターフェースを使用する

このセクションでは、EclipseTheiaインターフェースのいくつかの機能について説明します。

IDEの左側には、サイドパネルで最も一般的に使用される機能を開く4つのボタンが縦に並んでいます。

Eclipse Theia GUI - Sidepanel

このバーはカスタマイズ可能であるため、これらのビューを別の順序に移動したり、バーから削除したりできます。 デフォルトでは、最初のビューは、プロジェクトの構造のツリーのようなナビゲーションを提供するエクスプローラーパネルを開きます。 ここでフォルダとファイルを管理できます。必要に応じて、それらを作成、削除、移動、および名前変更します。

ファイルメニューから新しいファイルを作成すると、空のファイルが新しいタブで開きます。 保存すると、エクスプローラのサイドパネルでファイルの名前を表示できます。 フォルダを作成するには、エクスプローラのサイドバーを右クリックし、新しいフォルダをクリックします。 フォルダの名前をクリックしたり、ファイルやフォルダを階層の上位にドラッグアンドドロップして新しい場所に移動したりすることで、フォルダを展開できます。

Eclipse Theia GUI - New Folder

次のオプションは、検索および置換機能へのアクセスを提供します。 続いて、 Git など、使用している可能性のあるソース管理システムのビューを示します。

次のビューはデバッガーオプションです。これは、パネルでデバッグするためのすべての一般的なアクションを提供します。 デバッグ設定はlaunch.jsonファイルに保存できます。

Debugger View with launch.json open

最後のオプションでは、拡張機能を表示してインストールできます。

Eclipse Theia GUI - Extensions

GUIの中心部分はエディターであり、コード編集用にタブで区切ることができます。 編集ビューをグリッドシステムまたはサイドバイサイドファイルに変更できます。 最新のすべてのIDEと同様に、EclipseTheiaはコードの構文の強調表示をサポートしています。

Editor Grid View

CTRL+SHIFT+` と入力するか、上部のメニューで Terminal をクリックし、 New Terminal を選択すると、ターミナルにアクセスできます。 ターミナルが下のパネルで開き、その作業ディレクトリがプロジェクトのワークスペースに設定されます。このワークスペースには、エクスプローラのサイドパネルに表示されるファイルとフォルダが含まれています。

Terminal open

クラスター上のEclipseTheiaデプロイメントを破棄する場合は、次のコマンドを実行します。

  1. kubectl delete -f eclipse-theia.yaml

Eclipse Theiaインターフェースの概要を調べ、最も一般的に使用される機能のいくつかを確認しました。

結論

これで、汎用性の高いクラウドIDEであるEclipseTheiaがDigitalOceanKubernetesクラスターにインストールされました。 無料のLet’sEncryptTLS証明書で保護し、訪問者からのログインを要求するようにインスタンスを設定しました。 ソースコードとドキュメントを個別に処理することも、チームと共同で作業することもできます。 追加の機能が必要な場合は、独自のバージョンのEclipseTheiaを作成してみることもできます。 これを行う方法の詳細については、 Theiadocsにアクセスしてください。