著者はhttps://www.brightfunds.org/funds/foss-nonprofits [無料およびオープンソース基金]を選択して、https://do.co/w4do-cta [Donationsのために書く]の一部として寄付を受け取りましたプログラム。

前書き

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

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

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

前提条件

  • 接続が `+ kubectl `デフォルトとして設定されたDigitalOcean Kubernetesクラスター。 ` kubectl +`を設定する方法の手順は、クラスターを作成するときに[* Connect to the cluster *]ステップの下に表示されます。 DigitalOceanでKubernetesクラスターを作成するには、https://www.digitalocean.com/docs/kubernetes/quickstart/ [Kubernetes Quickstart]を参照してください。

  • ローカルマシンにインストールされたHelmパッケージマネージャー、およびクラスターにインストールされたTiller。 これを行うには、https://www.digitalocean.com/community/tutorials/how-to-install-software-on-kubernetes-clusters-with-the-helm-package-manager [How Helm Package Managerを使用してKubernetesクラスターにソフトウェアをインストールするには]チュートリアル。

  • Ingressリソースを使用してコードサーバーを公開するために、Helmを使用してクラスターにインストールされたNginx IngressコントローラーとCert-Manager。 これを行うには、https://www.digitalocean.com/community/tutorials/how-to-set-up-an-nginx-ingress-on-digitalocean-kubernetes-using-helm [Nginx Ingressを設定する方法ヘルムを使用したDigitalOcean Kubernetesで]。

  • Nginx Ingressが使用するロードバランサーを指す、ホストコードサーバーに完全に登録されたドメイン名。 このチュートリアルでは、全体で「++」を使用します。 Namecheapでドメイン名を購入するか、https://www.freenom.com/en/index.html?lang = en [Freenom]で無料で入手できます。または選択したドメインレジストラーを使用します。 このドメイン名は、DigitalOcean Kubernetes前提条件チュートリアルでNginx Ingressをセットアップする方法で使用されたものと異なる必要があります。

手順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:
   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: ""

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

`+ code-server `サービスは、ポート ` 80 `でポッド(デプロイメントの一部として作成された)を内部的に公開します。 ファイルで定義されているイングレスは、イングレスコントローラーが「 nginx 」であり、「+」ドメインがサービスから提供されることを指定します。

Nginx Ingress Controllerのロードバランサーを指す「」を希望のパスワードに、「」を希望のドメインに置き換えてください。

次に、次のコマンドを実行して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のログインプロンプトが表示されます。

image:https://assets.digitalocean.com/articles/codeserver/step1a.png [コードサーバーログインプロンプト]

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

image:https://assets.digitalocean.com/articles/codeserver/step2a.png [コードサーバーGUI]

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

手順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

spec:




 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を構成しました。 これで、コードサーバーのユーザーインターフェイスを確認できます。

手順3-コードサーバーインターフェイスの調査

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

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

image:https://assets.digitalocean.com/articles/codeserver/step 3a.png [コードサーバーGUI-サイドパネル]

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

これに続いて、デフォルトの順序で、https://git-scm.com/download [Git]のようなソース管理システムのビューが表示されます。 Visual Studioコードは他のソース管理プロバイダーもサポートしており、このhttps://code.visualstudio.com/docs/editor/versioncontrol[documentation]でエディターを使用してソース管理ワークフローの詳細な手順を見つけることができます。

image:https://assets.digitalocean.com/articles/codeserver/git.png [バージョン管理アクションを備えたGitドロップダウンメニュー]

アクティビティバーのデバッガオプションは、パネルでデバッグするためのすべての一般的なアクションを提供します。 Visual Studio Codeには、https://nodejs.org/ [Node.js]ランタイムデバッガーとhttps://www.javascript.com/[Javascript]に変換される言語のサポートが組み込まれています。 他の言語の場合、必要なデバッガー用にhttps://code.visualstudio.com/docs/editor/debugging#_debugger-extensions[extensions]をインストールできます。 `+ launch.json`ファイルにデバッグ設定を保存できます。

image:https://assets.digitalocean.com/articles/codeserver/debugger.png [launch.jsonを開いた状態のデバッガービュー]

アクティビティバーの最後のビューには、https://marketplace.visualstudio.com/VSCode [Marketplace]で利用可能な拡張機能にアクセスするためのメニューがあります。

image:https://assets.digitalocean.com/articles/codeserver/step3b.png [コードサーバーGUI-タブ]

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

image:https://assets.digitalocean.com/articles/codeserver/gridview.png [エディターグリッドビュー]

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

image:https://assets.digitalocean.com/articles/codeserver/step3c.png [コードサーバーGUI-新しいフォルダー]

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

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

結論

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