TOC

DigitalOcean KubernetesでコードサーバークラウドIDEプラットフォームをセットアップする方法

著者は、Write for DOnationsプログラムの一部として寄付を受け取るためにFree and Open Source Fundを選択しました。

前書き

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

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

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

前提条件

  • 接続がkubectlのデフォルトとして構成されたDigitalOceanKubernetesクラスター。 kubectlを構成する方法の説明は、クラスターを作成するときのConnect to your Clusterステップの下に表示されます。 DigitalOceanでKubernetesクラスターを作成するには、Kubernetes Quickstartを参照してください。

  • ローカルマシンにインストールされたHelmパッケージマネージャー、およびクラスターにインストールされたTiller。 これを行うには、How To Install Software on Kubernetes Clusters with the Helm Package Managerチュートリアルのステップ1と2を完了します。

  • Ingressリソースを使用してコードサーバーを公開するために、Helmを使用してクラスターにインストールされたNginx IngressコントローラーとCert-Manager。 これを行うには、How to Set Up an Nginx Ingress on DigitalOcean Kubernetes Using Helmに従います。

  • Nginx Ingressが使用するロードバランサーを指す、ホストコードサーバーに完全に登録されたドメイン名。 このチュートリアルでは、全体を通してcode-server.your_domainを使用します。 Namecheapでドメイン名を購入するか、Freenomで無料でドメイン名を取得するか、選択したドメインレジストラを使用できます。 このドメイン名は、DigitalOcean Kubernetes前提条件チュートリアルでNginx Ingressをセットアップする方法で使用されたものと異なる必要があります。

[[step-1 -—- installing-and-exposed-code-server]] ==ステップ1—コードサーバーのインストールと公開

このセクションでは、Nginx Ingressコントローラーを使用して、Digital-Ocean Kubernetesクラスターにコードサーバーをインストールし、ドメインで公開します。 入学許可のパスワードも設定します。

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

nano code-server.yaml

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

code-server.yaml

apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: code-server
  namespace: code-server
  annotations:
    kubernetes.io/ingress.class: nginx
spec:
  rules:
  - host: code-server.your_domain
    http:
      paths:
      - backend:
          serviceName: code-server
          servicePort: 80
---
apiVersion: v1
kind: Service
metadata:
 name: code-server
 namespace: code-server
spec:
 ports:
 - port: 80
   targetPort: 8443
 selector:
   app: code-server
---
apiVersion: extensions/v1beta1
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
        imagePullPolicy: Always
        name: code-server
        args: ["--allow-http"]
        ports:
        - containerPort: 8443
        env:
        - name: PASSWORD
          value: "your_password"

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

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

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

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

kubectl create -f code-server.yaml

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

Outputnamespace/code-server created
ingress.extensions/code-server created
service/code-server created
deployment.extensions/code-server created

次を実行することにより、コードサーバーポッドが利用可能になるのを見ることができます。 

kubectl get pods -w -n code-server

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

OutputNAME                          READY   STATUS              RESTARTS   AGE
code-server-f85d9bfc9-j7hq6   0/1     ContainerCreating   0          1m

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

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

code-server login prompt

code-server.yamlに設定したパスワードを入力し、Enter IDEを押します。 コードサーバーを入力すると、すぐにエディターGUIが表示されます。

code-server GUI

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

[[step-2 -—- securing-the-code-server-deployment]] ==ステップ2—コードサーバーデプロイメントの保護

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

編集のためにcode-server.yamlを開きます。 

nano code-server.yaml

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

code-server.yaml

apiVersion: v1
kind: Namespace
metadata:
  name: code-server
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: code-server
  namespace: code-server
  annotations:
    kubernetes.io/ingress.class: nginx
    certmanager.k8s.io/cluster-issuer: letsencrypt-prod
spec:
  tls:
  - hosts:
    - code-server.your_domain
    secretName: codeserver-prod
  rules:
  - host: code-server.your_domain
    http:
      paths:
      - backend:
          serviceName: code-server
          servicePort: 80
...

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

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

kubectl apply -f code-server.yaml

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

kubectl describe certificate codeserver-prod -n code-server

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

OutputEvents:
  Type    Reason              Age    From          Message
  ----    ------              ----   ----          -------
  Normal  Generated           2m49s  cert-manager  Generated new private key
  Normal  GenerateSelfSigned  2m49s  cert-manager  Generated temporary self signed certificate
  Normal  OrderCreated        2m49s  cert-manager  Created Order resource "codeserver-prod-4279678953"
  Normal  OrderComplete       2m14s  cert-manager  Order "codeserver-prod-4279678953" completed successfully
  Normal  CertIssued          2m14s  cert-manager  Certificate issued successfully

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

この手順では、コードサーバーの展開を保護するためにIngressを構成しました。 これで、コードサーバーのユーザーインターフェイスを確認できます。

[[step-3 -—- exploring-the-code-server-interface]] ==ステップ3—コードサーバーインターフェイスの探索

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

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

code-server GUI - Sidepanel

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

これに続いて、デフォルトの順序で、Gitのようなソース管理システムのビューが表示されます。 Visual Studioコードは、他のソース管理プロバイダーもサポートしています。このdocumentationで、エディターを使用したソース管理ワークフローの詳細な手順を確認できます。

Git dropdown menu with version control actions

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

Debugger View with launch.json open

アクティビティバーの最後のビューには、Marketplaceで使用可能な拡張機能にアクセスするためのメニューがあります。

code-server GUI - Tabs

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

Editor Grid View

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

code-server GUI - New Folder

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

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

結論

これで、DigitalOcean Kubernetesクラスターにインストールされたコードサーバー、汎用クラウドIDEができました。 ソースコードとドキュメントを個別に使用したり、チームと共同作業したりできます。 クラスター上でクラウドIDEを実行すると、テスト、ダウンロード、およびより徹底的または厳密なコンピューティングの能力が向上します。 詳細については、追加機能のVisual Studio Code documentationと、コードサーバーの他のコンポーネントの詳細な手順を参照してください。

Related