開発者ドキュメント

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

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

序章

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

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

このチュートリアルでは、Debian 10マシンにコードサーバークラウドIDEプラットフォームをセットアップし、無料の Let’s EncryptTLS証明書で保護されたドメインで公開します。 最終的には、Microsoft Visual StudioCodeがDebian10サーバーで実行され、ドメインで利用可能になり、パスワードで保護されます。

前提条件

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

このセクションでは、サーバーにコードサーバーを設定します。 これには、最新バージョンをダウンロードし、コードサーバーを常にバックグラウンドで実行し続けるsystemdサービスを作成する必要があります。 また、サービスの再起動ポリシーを指定して、クラッシュまたは再起動の可能性があった後もコードサーバーを使用できるようにします。

コードサーバーに関連するすべてのデータを~/code-serverという名前のフォルダーに保存します。 次のコマンドを実行して作成します。

  1. mkdir ~/code-server

そこに移動します:

  1. cd ~/code-server

コードサーバーのGithubリリースページに移動し、最新のLinuxビルドを選択する必要があります(ファイルの名前には「linux」が含まれます)。 執筆時点では、最新バージョンは3.2.0でした。 次のコマンドを実行して、wgetを使用してダウンロードします。

  1. wget https://github.com/cdr/code-server/releases/download/3.2.0/code-server-3.2.0-linux-x86_64.tar.gz

次に、次のコマンドを実行してアーカイブを解凍します。

  1. tar -xzvf code-server-3.2.0-linux-x86_64.tar.gz

ダウンロードした元のファイルとまったく同じ名前のフォルダーが作成されます。このフォルダーには、コードサーバーのソースコードが含まれています。 /usr/lib/code-serverにコピーして、次のコマンドを実行することでシステム全体にアクセスできるようにします。

  1. sudo cp -r code-server-3.2.0-linux-x86_64 /usr/lib/code-server

次に、/usr/bin/code-serverに、コードサーバーの実行可能ファイルを指すシンボリックリンクを作成します。

  1. sudo ln -s /usr/lib/code-server/code-server /usr/bin/code-server

次に、ユーザーデータを保存するコードサーバー用のフォルダーを作成します。

  1. sudo mkdir /var/lib/code-server

コードサーバーをダウンロードしてシステム全体で利用できるようにしたので、systemdサービスを作成して、コードサーバーを常にバックグラウンドで実行し続けます。

サービス構成は、systemdがサービスを保存する/lib/systemd/systemディレクトリのcode-server.serviceという名前のファイルに保存します。 テキストエディタを使用して作成します。

  1. sudo nano /lib/systemd/system/code-server.service

次の行を追加します。

/lib/systemd/system/code-server.service
[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
Environment=PASSWORD=your_password
ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
Restart=always

[Install]
WantedBy=multi-user.target

ここでは、最初にサービスの説明を指定します。 次に、nginxサービスをこのサービスの前に開始する必要があることを示します。 [Unit]セクションの後で、サービスのタイプを定義し(simpleはプロセスを単純に実行する必要があることを意味します)、実行されるコマンドを提供します。

また、グローバルコードサーバー実行可能ファイルは、コードサーバーに固有のいくつかの引数で開始する必要があることを指定します。 --bind-addr 127.0.0.1:8080は、ポート8080localhostにバインドするため、サーバーの内部からのみ直接アクセスできます。 --user-data-dir /var/lib/code-serverはユーザーデータディレクトリを設定し、--auth passwordは、その上の行で宣言されたPASSWORD環境変数で指定されたパスワードで訪問者を認証する必要があることを指定します。

your_passwordを目的のパスワードに置き換えてから、ファイルを保存して閉じてください。

次の行は、すべての誤動作イベント(たとえば、クラッシュしたときやプロセスが強制終了されたとき)でコードサーバーを再起動するようにsystemdに指示します。 [Install]セクションは、サーバーへのログインが可能になったときにこのサービスを開始するようにsystemdに指示します。

次のコマンドを実行して、コードサーバーサービスを開始します。

  1. sudo systemctl start code-server

ステータスを確認して、正しく起動していることを確認します。

  1. sudo systemctl status code-server

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

Output
● code-server.service - code-server Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled) Active: active (running) since Wed 2020-05-13 19:31:00 UTC; 13s ago Main PID: 1851 (node) Tasks: 14 (limit: 2378) Memory: 25.7M CGroup: /system.slice/code-server.service ├─1851 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas └─1862 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas May 13 19:31:00 code-server-update systemd[1]: Started code-server. May 13 19:31:01 code-server-update code-server[1851]: info code-server 3.2.0 fd36a99a4c78669970ebc4eb05768293b657716f May 13 19:31:01 code-server-update code-server[1851]: info HTTP server listening on http://127.0.0.1:8080 May 13 19:31:01 code-server-update code-server[1851]: info - Using custom password for authentication May 13 19:31:01 code-server-update code-server[1851]: info - Not serving HTTPS May 13 19:31:01 code-server-update code-server[1851]: info Automatic updates are enabled

サーバーの再起動後にコードサーバーを自動的に起動するには、次のコマンドを実行してサービスを有効にします。

  1. sudo systemctl enable code-server

このステップでは、コードサーバーをダウンロードして、グローバルに利用できるようにしました。 次に、そのためのsystemdサービスを作成して有効にしたので、コードサーバーはサーバーの起動ごとに起動します。 次に、訪問者とコードサーバー間のリバースプロキシとして機能するようにNginxを構成することにより、ドメインで公開します。

ステップ2—ドメインでコードサーバーを公開する

このセクションでは、Nginxをコードサーバーのリバースプロキシとして構成します。

Nginxの前提条件の手順で学習したように、そのサイト構成ファイルは/etc/nginx/sites-availableに保存され、後でアクティブにするには/etc/nginx/sites-enabledにシンボリックリンクする必要があります。

ドメインでコードサーバーを公開するための構成を、/etc/nginx/sites-availableの下のcode-server.confという名前のファイルに保存します。 エディターを使用して作成することから始めます。

  1. sudo nano /etc/nginx/sites-available/code-server.conf

次の行を追加します。

/etc/nginx/sites-available/code-server.conf
server {
	listen 80;
	listen [::]:80;

	server_name code-server.your-domain;

	location / {
		proxy_pass http://localhost:8080/;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection upgrade;
		proxy_set_header Accept-Encoding gzip;
	}
}

code-server.your-domainを目的のドメインに置き換えてから、ファイルを保存して閉じます。

このファイルでは、NginxがHTTPポート80をリッスンする必要があることを定義します。 次に、リクエストを受け入れてこの特定の構成を適用するドメインをNginxに指示するserver_nameを指定します。 次のブロックでは、ルートの場所(/)に対して、localhost:8080で実行されているコードサーバーとの間でリクエストをやり取りするように指定します。 次の3行(proxy_set_headerで始まる)は、コードサーバーが広く使用しているWebSocketの正しい機能に必要ないくつかのHTTPリクエストヘッダーをNginxに引き継ぐように指示します。

このサイト構成をアクティブにするには、次のコマンドを実行して、/etc/nginx/sites-enabledフォルダーにそのシンボリックリンクを作成する必要があります。

  1. sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

構成の有効性をテストするには、次のコマンドを実行します。

  1. sudo nginx -t

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

Output
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

構成を有効にするには、Nginxを再起動する必要があります。

  1. sudo systemctl restart nginx

これで、ドメインでコードサーバーのインストールにアクセスできるようになりました。 次のステップでは、無料のLet’sEncryptTLS証明書を適用してセキュリティを確保します。

ステップ3—ドメインを保護する

このセクションでは、Certbotを使用してプロビジョニングするLet’sEncryptTLS証明書を使用してドメインを保護します。

最新バージョンのCertbotとそのNginxプラグインをインストールするには、次のコマンドを実行します。

  1. sudo apt install certbot python-certbot-nginx

前提条件の一部として、ufw(Uncomplicated Firewall)を有効にし、暗号化されていないHTTPトラフィックを許可するように構成しました。 セキュリティで保護されたサイトにアクセスできるようにするには、次のコマンドを実行して、暗号化されたトラフィックを受け入れるようにサイトを構成する必要があります。

  1. sudo ufw allow https

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

Output
Rule added Rule added (v6)

Nginxと同様に、構成を有効にするには、Nginxをリロードする必要があります。

  1. sudo ufw reload

出力には次のように表示されます。

Output
Firewall reloaded

次に、ブラウザで、コードサーバーに使用したドメインに移動します。 コードサーバーのログインプロンプトが表示されます。

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

コードサーバーがドメインで正しく公開されていることを確認したので、Certbotを使用してLet’sEncryptTLS証明書をインストールしてセキュリティで保護します。

ドメインの証明書を要求するには、次のコマンドを実行します。

  1. sudo certbot --nginx -d code-server.your-domain

このコマンドでは、certbotを実行してドメインの証明書を要求します。つまり、-dパラメーターを使用してドメイン名を渡します。 --nginxフラグは、HTTPSをサポートするようにNginxサイト構成を自動的に変更するように指示します。 code-server.your-domainをドメイン名に置き換えることを忘れないでください。

Certbotを初めて実行する場合は、緊急通知用の電子メールアドレスを提供し、EFFの利用規約に同意するように求められます。 次に、CertbotはLet’sEncryptからドメインの証明書を要求します。 次に、すべてのHTTPトラフィックをHTTPSにリダイレクトするかどうかを尋ねられます。

Output
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1: No redirect - Make no further changes to the webserver configuration. 2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for new sites, or if you're confident your site works on HTTPS. You can undo this change by editing your web server's configuration. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

セキュリティを最大化するために、2番目のオプションを選択することをお勧めします。 選択内容を入力したら、ENTERを押します。

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

Output
IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/code-server.your-domain/privkey.pem Your cert will expire on ... To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" - Your account credentials have been saved in your Certbot configuration directory at /etc/letsencrypt. You should make a secure backup of this folder now. This configuration directory will also contain certificates and private keys obtained by Certbot so making regular backups of this folder is ideal. - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le

これは、CertbotがTLS証明書を正常に生成し、それらをドメインのNginx構成に適用したことを意味します。 これで、ブラウザでコードサーバードメインをリロードし、サイトアドレスの左側にある南京錠を確認できます。これは、接続が適切に保護されていることを意味します。

これで、セキュリティで保護されたNginxリバースプロキシを介してドメインでコードサーバーにアクセスできるようになりました。これで、コードサーバーのユーザーインターフェイスを確認する準備が整いました。

ステップ4—コードサーバーインターフェイスを使用する

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

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

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

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

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

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

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

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

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

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

結論

これで、多用途のクラウドIDEであるコードサーバーがDebian 10サーバーにインストールされ、ドメインで公開され、Let’sEncrypt証明書を使用して保護されました。 これで、プロジェクトを個別に、またはチームコラボレーションの設定で作業できます。 クラウドIDEを実行すると、ローカルマシン上のリソースが解放され、必要に応じてリソースを拡張できます。 詳細については、 Visual Studio Codeのドキュメントを参照して、コードサーバーの他のコンポーネントの追加機能と詳細な手順を確認してください。

DigitalOcean Kubernetesクラスターでコードサーバーを実行する場合は、DigitalOceanKubernetesでコードサーバーCloudIDEプラットフォームをセットアップする方法のチュートリアルを確認してください。

モバイルバージョンを終了