DigitalOceanKubernetesでコードサーバーCloudIDEプラットフォームをセットアップする方法

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

序章

開発者ツールがクラウドに移行するにつれ、クラウドIDE（統合開発環境）プラットフォームの作成と採用が拡大しています。 Cloud IDEを使用すると、開発者チーム間のリアルタイムコラボレーションが可能になり、非互換性を最小限に抑えて生産性を向上させる統合開発環境で作業できます。 WebブラウザからアクセスできるクラウドIDEは、あらゆるタイプの最新デバイスから利用できます。クラウドIDEのもう1つの利点は、クラスターの能力を活用できることです。これは、単一の開発コンピューターの処理能力を大幅に超える可能性があります。

code-server は、 Microsoft Visual Studio Code であり、リモートサーバー上で実行され、ブラウザーから直接アクセスできます。 Visual Studio Codeは、統合されたGitサポート、コードデバッガー、スマートオートコンプリート、およびカスタマイズ可能で拡張可能な機能を備えた最新のコードエディターです。つまり、さまざまなデバイスを使用し、さまざまなオペレーティングシステムを実行し、常に一貫した開発環境を手元に置くことができます。

このチュートリアルでは、DigitalOcean KubernetesクラスターにコードサーバークラウドIDEプラットフォームをセットアップし、Let'sEncrypt証明書で保護されたドメインで公開します。最終的に、Microsoft Visual Studio CodeがKubernetesクラスターで実行され、HTTPS経由で利用可能になり、パスワードで保護されます。

前提条件

接続がkubectlデフォルトとして構成されたDigitalOceanKubernetesクラスター。 kubectlを構成する方法の説明は、クラスターを作成するときのクラスターへの接続ステップの下に表示されます。 DigitalOceanでKubernetesクラスタを作成するには、 KubernetesQuickstartを参照してください。
ローカルマシンにインストールされているHelm3パッケージマネージャー。 Helm 3 PackageManagerチュートリアルを使用してKubernetesクラスターにソフトウェアをインストールする方法のステップ1を完了します。
Ingressリソースを使用してコードサーバーを公開するために、Helmを使用してクラスターにインストールされたNginxIngressControllerとCert-Manager。これを行うには、Helmを使用してDigitalOceanKubernetesでNginxIngressを設定する方法に従ってください。
Nginx Ingressによって使用されるロードバランサーを指す、ホストコードサーバーに完全に登録されたドメイン名。このチュートリアルでは、全体を通してcode-server.your_domainを使用します。 Namecheap でドメイン名を購入するか、 Freenom で無料でドメイン名を取得するか、選択したドメイン登録事業者を使用できます。このドメイン名は、DigitalOceanKubernetes前提条件チュートリアルでNginxIngressを設定する方法で使用されているものとは異なる必要があります。

ステップ1—コードサーバーのインストールと公開

このセクションでは、コードサーバーをDigitalOcean Kubernetesクラスターにインストールし、NginxIngressコントローラーを使用してドメインで公開します。また、アドミタンス用のパスワードを設定します。

Nginx Ingress Controllerの前提条件の一部として、サンプルのサービスとイングレスを作成しました。このチュートリアルではそれらは必要ないため、次のコマンドを実行して削除できます。

kubectl delete -f hello-kubernetes-first.yaml
kubectl delete -f hello-kubernetes-second.yaml
kubectl delete -f hello-kubernetes-ingress.yaml

kubectl deleteコマンドは、-fパラメーターが渡されると、削除するファイルを受け入れます。

ローカルマシンの展開構成をcode-server.yamlという名前のファイルに保存します。次のコマンドを使用して作成します。

nano code-server.yaml

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

code-server.yaml

apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: code-server
  namespace: code-server
spec:
  ingressClassName: nginx
  rules:
  - host: code-server.your_domain
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: code-server
            port:
              number: 80
---
apiVersion: v1
kind: Service
metadata:
 name: code-server
 namespace: code-server
spec:
 ports:
 - port: 80
   targetPort: 8080
 selector:
   app: code-server
---
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: code-server
  name: code-server
  namespace: code-server
spec:
  selector:
    matchLabels:
      app: code-server
  replicas: 1
  template:
    metadata:
      labels:
        app: code-server
    spec:
      containers:
      - image: codercom/code-server:latest
        imagePullPolicy: Always
        name: code-server
        env:
        - name: PASSWORD
          value: "your_password"

この構成は、名前空間、デプロイメント、サービス、および入力を定義します。名前空間はcode-serverと呼ばれ、コードサーバーのインストールをクラスターの他の部分から分離します。デプロイメントは、codercom/code-server Dockerイメージの1つのレプリカと、アクセス用のパスワードを指定するPASSWORDという名前の環境変数で構成されます。

code-serverサービスは、ポート80でポッド（デプロイメントの一部として作成された）を内部的に公開します。ファイルで定義されているIngressは、IngressControllerがnginxであり、code-server.your_domainドメインがサービスから提供されることを指定しています。

your_passwordを目的のパスワードに、code-server.your_domainを目的のドメインに置き換えて、NginxIngressControllerのロードバランサーを指定することを忘れないでください。

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

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

kubectl apply -f code-server.yaml

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

Outputnamespace/code-server created
ingress.networking.k8s.io/code-server created
service/code-server created
deployment.apps/code-server created

次のコマンドを実行すると、コードサーバーポッドが使用可能になるのを確認できます。

kubectl get pods -w -n code-server

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

OutputNAME                           READY   STATUS              RESTARTS   AGE
code-server-6c4745497c-l2n7w   0/1     ContainerCreating   0          12s

ステータスがRunningになるとすぐに、コードサーバーはクラスターへのインストールを終了します。

これで、ブラウザでドメインに移動できます。 code-serverのログインプロンプトが表示されます。

code-serverがパスワードを要求しています。前の手順で設定したものを入力し、 EnterIDEを押します。ここでcode-serverに入り、すぐにそのエディターGUIが表示されます。

コードサーバーをKubernetesクラスターにインストールし、ドメインで利用できるようにしました。また、パスワードを使用してログインする必要があることも確認しました。次に、Cert-Managerを使用して無料のLet'sEncrypt証明書で保護します。

ステップ2—コードサーバーの展開を保護する

このセクションでは、Cert-Managerが自動的に作成するIngressにLet's Encrypt証明書を適用することにより、コードサーバーのインストールを保護します。この手順を完了すると、コードサーバーのインストールにHTTPS経由でアクセスできるようになります。

code-server.yamlを開いて編集します。

nano code-server.yaml

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

code-server.yaml

apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: code-server
  namespace: code-server
  annotations:
    cert-manager.io/cluster-issuer: letsencrypt-prod
spec:
  ingressClassName: nginx
  tls:
  - hosts:
    - code-server.your_domain
    secretName: codeserver-prod
  rules:
    - host: code-server.your_domain
    http:
      paths:
      - backend:
          service:
            name: code-server
            port:
              number: 80
...

まず、このIngressがクラスター発行者letsencrypt-prodを使用して、前提条件の一部として作成した証明書をプロビジョニングするように指定します。次に、tlsセクションで保護するドメインと、それらを保持するSecretの名前を指定します。

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

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

kubectl apply -f code-server.yaml

Let'sEncryptが証明書をプロビジョニングするまで数分待つ必要があります。それまでの間、次のコマンドの出力を確認することで、進行状況を追跡できます。

kubectl describe certificate codeserver-prod -n code-server

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

OutputEvents:
  Type    Reason     Age   From          Message
  ----    ------     ----  ----          -------
  Normal  Issuing    44m   cert-manager  Issuing certificate as Secret does not exist
  Normal  Generated  44m   cert-manager  Stored new private key in temporary Secret resource "codeserver-prod-m7r8v"
  Normal  Requested  44m   cert-manager  Created new CertificateRequest resource "codeserver-prod-sc7xm"
  Normal  Issuing    44m   cert-manager  The certificate has been successfully issued

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

このステップでは、コードサーバーのデプロイメントを保護するようにIngressを構成しました。これで、コードサーバーのユーザーインターフェイスを確認できます。

ステップ3—コードサーバーインターフェイスの調査

このセクションでは、コードサーバーインターフェイスのいくつかの機能について説明します。 code-serverはクラウドで実行されるVisualStudioCodeであるため、スタンドアロンデスクトップエディションと同じインターフェイスを備えています。

IDEの左側には、アクティビティバーと呼ばれるサイドパネルで最も一般的に使用される機能を開く6つのボタンが縦に並んでいます。

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

これに続いて、デフォルトの順序で、Gitのようなソース管理システムのビューが表示されます。 Visual Studio Codeは、他のソース管理プロバイダーもサポートしています。このドキュメントで、エディターを使用したソース管理ワークフローの詳細な手順を確認できます。現在空のプロジェクト（デフォルトで開かれている）はGitリポジトリとして初期化されていないため、VisualStudioCodeではそのように初期化することができます。

アクティビティバーのデバッガオプションは、パネルでデバッグするためのすべての一般的なアクションを提供します。 Visual Studio Codeには、Node.jsランタイムデバッガーとJavascriptに変換される任意の言語のサポートが組み込まれています。他の言語の場合は、必要なデバッガーに拡張機能をインストールできます。デバッグ設定はlaunch.jsonファイルに保存できます。

アクティビティバーの最終ビューには、マーケットプレイスで利用可能な拡張機能にアクセスするためのメニューが表示されます。

GUIの中心部分はエディターであり、コード編集用にタブで区切ることができます。編集ビューをグリッドシステムまたはサイドバイサイドファイルに変更できます。

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

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

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

kubectl delete -f code-server.yaml

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

結論

これで、DigitalOceanKubernetesクラスターにインストールされた多用途のクラウドIDEであるコードサーバーができました。ソースコードとドキュメントを個別に処理することも、チームと協力することもできます。クラスターでクラウドIDEを実行すると、テスト、ダウンロード、およびより徹底的または厳密なコンピューティングのためのより多くのパワーが提供されます。詳細については、 Visual Studio Codeのドキュメントを参照して、コードサーバーの他のコンポーネントの追加機能と詳細な手順を確認してください。