Ubuntu 22.04でcode-server Cloud IDEプラットフォームを設定する方法

9か月 ago
光, 明
5 minutes

著者は、書き物寄付プログラムの一環として、フリー・オープンソース・ファンドに寄付をすることを選択しました。

はじめに

開発者ツールがクラウドに移行するにつれて、クラウドIDE（統合開発環境）プラットフォームの作成と採用が増えています。クラウドIDEは、開発者チーム間でリアルタイムの共同作業を可能にし、互換性を最小限に抑え、生産性を向上させる統一された開発環境での作業が可能です。ウェブブラウザから利用できるため、クラウドIDEはあらゆる種類の最新のデバイスから利用できます。

code-serverは、Microsoft Visual Studio Codeがリモートサーバー上で動作し、ブラウザから直接アクセスできるものです。Visual Studio Codeは、統合されたGitサポート、コードデバッガ、スマートな自動補完、カスタマイズ可能で拡張性のある機能を持つ現代的なコードエディターです。code-serverを使用することで、異なるオペレーティングシステムを実行するさまざまなデバイスで常に一貫した開発環境を利用することができます。

このチュートリアルでは、Ubuntu 22.04マシンにcode-serverクラウドIDEプラットフォームをセットアップし、無料のLet’s Encrypt TLS証明書で保護されたドメインで公開します。チュートリアルの終わりまでには、Microsoft Visual Studio CodeがUbuntu 22.04サーバーで実行され、ドメインで利用可能なパスワードで保護されている状態になります。

前提条件

  • A server running Ubuntu 22.04 with at least 2GB RAM, root access, and a sudo, non-root account. You can set this up by following this initial server setup guide.
  • Nginx installed on your server. For a guide on how to do this, complete Steps 1 to 4 of How To Install Nginx on Ubuntu 22.04.
  • A fully registered domain name to host code-server, pointed to your server. This tutorial will use code-server.your-domain throughout. You can purchase a domain name on Namecheap, get one for free on Freenom, or use the domain registrar of your choice. For Silicon Cloud, you can follow this introduction to Silicon Cloud DNS for details on how to add them.

ステップ1 – code-server のインストール

このステップでは、最新バージョンをダウンロードし、コードサーバーをサーバー上で設定します。さらに、コードサーバーをバックグラウンドで常に実行するためのsystemdサービスを作成します。また、サービスの再起動ポリシーも指定し、可能なクラッシュや再起動後もコードサーバーが利用可能になるようにします。

code-serverに関するすべてのデータは、~/code-serverというフォルダに保存します。以下のコマンドを使用して、それを作成してください。

  1. mkdir ~/code-server

 

それにナビゲーションしてください。

  1. cd ~/code-server

 

コードサーバーのGithubリリースから最新のLinuxビルドを取得する必要があります（ファイル名にはlinuxが含まれます）。執筆時点では、最新バージョンは4.8.2でした。以下のコマンドを実行してwgetでダウンロードしてください。

  1. wget https://github.com/coder/code-server/releases/download/v4.8.2/code-server-4.8.2-linux-amd64.tar.gz

 

それから実行して、アーカイブを展開してください。

  1. tar -xzvf code-server-4.8.2-linux-amd64.tar.gz

 

ダウンロードしたオリジナルファイルと同じ名前のフォルダが入手されます。その中にはcode-serverのソースコードが含まれています。次のコマンドを実行して、システム全体でアクセス可能なように/usr/lib/code-serverにコピーしてください。

  1. sudo cp -r code-server-4.8.2-linux-amd64 /usr/lib/code-server

 

それから、code-serverの実行可能ファイルを指し示すために、/usr/bin/code-serverにシンボリックリンクを作成してください。

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

 

次に、code-serverがユーザーデータを保存するフォルダを作成してください。

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

 

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

サービスの構成を「code-server.service」というファイルに保存します。そのファイルは、systemdがサービスを保存するディレクトリである「/lib/systemd/system」に作成します。テキストエディタ（このチュートリアルではnanoを使用）を使用して作成してください。

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

 

以下の行を追加してください。 (I need further context or specific lines to provide a more accurate translation.)

以下の内容を日本語で言い換えます（1つのオプションのみ）：
/lib/systemd/system/code-server.service/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はプロセスが単に実行されることを意味します）を定義し、実行されるコマンドを提供します。

また、グローバル code-server 実行ファイルが code-server に特有のいくつかの引数を指定して起動されるようにも明示してください。

  • –bind-addr 127.0.0.1:8080 binds it to localhost at port 8080, so it’s only directly accessible from inside of your server.
  • –user-data-dir /var/lib/code-server sets its user data directory.
  • –auth password specifies that it should authenticate visitors with a password, specified in the PASSWORD environment variable declared on the line above it.

「your_password」というパスワードをご希望のパスワードで置き換えることを忘れないようにしてください。次の行は、systemdにすべての不具合イベント（例えば、クラッシュした場合やプロセスが終了した場合）でcode-serverを再起動するように指示しています。

[Install] セクションは、サーバーにログイン可能になった時にsystemdがこのサービスを開始するよう指示します。

ファイルを保存して閉じてください。

以下のコマンドを実行して、code-serverサービスを開始します。

  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; preset: enabled) Active: active (running) since Thu 2022-11-03 12:39:26 UTC; 5s ago Main PID: 2670 (node) Tasks: 22 (limit: 1116) Memory: 90.9M CPU: 799ms CGroup: /system.slice/code-server.service ├─2670 /usr/lib/code-server/lib/node /usr/lib/code-server –bind-addr 127.0.0.1:8080 –user-data-dir /var/lib/code-server –auth password └─2692 /usr/lib/code-server/lib/node /usr/lib/code-server/out/node/entry

サーバーの再起動後に、code-serverが自動的に起動するようにするには、次のコマンドを使用してサービスを有効にしてください。

  1. sudo systemctl enable code-server

 

以下の通り、シンボリックリンクが生成されたという回答を受け取ります。

Output

Created symlink /etc/systemd/system/multi-user.target.wants/code-server.service → /lib/systemd/system/code-server.service.

この手順では、code-serverをダウンロードし、グローバルに利用可能にしました。その後、code-serverのsystemdサービスを作成し、有効化しましたので、コードサーバはサーバの起動時に常に起動します。次に、Nginxを設定して、訪問者とcode-serverの間にリバースプロキシとして機能するようにし、ドメインで公開します。

ステップ2 – ドメイン上でcode-serverを公開します。

このセクションでは、code-serverのリバースプロキシとしてNginxを設定します。

Nginxの前提ステップで経験したように、サイトの設定ファイルは/etc/nginx/sites-availableの下に保存され、後で/etc/nginx/sites-enabledにシンボリックリンクを作成する必要があります。これにより、設定が有効になります。

あなたは、code-serverを自分のドメインで公開するための設定を、/etc/nginx/sites-availableの下にcode-server.confという名前のファイルに保存します。まず、エディタを使用してこのファイルを作成してください。

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

 

以下の行を追加してください。

/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でリクエストを受け付けるように指定しています。そして、server_nameを指定して、Nginxにどのドメインのリクエストを受け入れて、この特定の設定を適用するかを示しています。

ルートロケーション（/）ブロックでは、リクエストがlocalhost:8080で実行されているcode-serverに往復するよう指定します。次の3行（proxy_set_headerで始まる行）は、WebSocketsの正しい動作に必要ないくつかのHTTPリクエストヘッダーをNginxに引き継ぐように指示します。これらのヘッダーは、code-serverで広範に使用されています。

ファイルを保存して閉じてください。

このサイトの設定を有効にするには、/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’s Encrypt TLS証明書でセキュアにします。

3段階目：あなたのドメインを保護する

このセクションでは、Certbotを使用して提供されるLet’s Encrypt TLS証明書を使用して、ドメインを保護します。設定が完了すると、code-serverのインストールはHTTPSを使用して実行されます。

前提条件の一環として、ufw（簡単なファイアウォール）を有効にし、暗号化されていないHTTPトラフィックを許可するように設定しました。セキュアなサイトにアクセスするためには、以下のコマンドを実行して暗号化されたトラフィックを受け入れるように設定する必要があります。

  1. sudo ufw allow https

 

結果は次のようになります。

Output

Rule added Rule added (v6)

同様に、Nginxのように、設定が有効になるためには再読み込みが必要です。

  1. sudo ufw reload

 

この出力は印刷されます。

Output

Firewall reloaded

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

Screencapture of the code-server login prompt

code-serverはパスワードを求めています。前のステップで設定したパスワードを入力して、Enter IDEを押してください。これにより、code-serverに入り、すぐにエディタのGUIにアクセスできます。

Screencapture of the code-server GUI

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

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

  1. sudo apt install certbot python3-certbot-nginx -y

 

「あなたのドメインの証明書をリクエストするには、以下のコマンドを実行してください。」

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

 

このコマンドでは、certbotを実行してドメインの証明書をリクエストします。-dパラメーターでドメイン名を渡します。–nginxフラグを使用すると、自動的にNginxサイトの設定がHTTPSに対応するように変更されます。code-server.your-domainを自分のドメイン名に置き換えることを忘れないでください。

もしこれがCertbotを初めて実行する場合、緊急の通知を受けるためのメールアドレスとEFFの利用規約の承諾が求められます。そして、CertbotがLet’s Encryptからドメインの証明書をリクエストします。

出力はこれに似るでしょう。 (Shutsuryoku wa kore ni nieru deshō.)

Output

Requesting a certificate for code-server.your-domain Successfully received certificate. Certificate is saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem Key is saved at: /etc/letsencrypt/live/code-server.your-domain/privkey.pem This certificate expires on 2023-02-01. These files will be updated when the certificate renews. Certbot has set up a scheduled task to automatically renew this certificate in the background. Deploying certificate Successfully deployed certificate for code-server.your-domain.com to /etc/nginx/sites-enabled/code-server.conf Congratulations! You have successfully enabled HTTPS on https://code-server.your-domain – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – 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の設定に適用したことを示しています。これにより、ウェブブラウザでcode-serverのドメインをリロードし、サイトアドレスの左側にある錠アイコンが表示されます。これは、接続が適切に保護されていることを意味しています。

あなたのドメイン上で安全なNginxリバースプロキシ経由でcode-serverにアクセスできるようになったので、code-serverのユーザーインターフェースを確認する準備が整いました。

4. ステップ4 — code-serverインターフェースを使用します。

このセクションでは、code-serverインターフェースのいくつかの機能を使用します。code-serverはクラウドで実行されるVisual Studio Codeのため、単体のデスクトップ版と同じインターフェースを持っています。

IDEの左側には、アクティビティバーと呼ばれるサイドパネルに最もよく使用される機能を備えた６つのボタンの垂直列があります。

Screencapture of the code-server GUI sidepanel with six icon buttons. The folder button has been selected, which expands a sidebar from which folder can be opened.

このバーはカスタマイズ可能なので、これらのボタンを移動したり、バーから削除したりすることができます。デフォルトでは、最初のボタン（ハンバーガーメニューアイコン）は一般メニューをドロップダウンで開きます。2番目のボタン（フォルダーアイコン）はエクスプローラーパネルを開き、プロジェクトの構造にツリー形式でナビゲーションできます。ここではフォルダやファイルを作成・削除・移動・名前変更することができます。虫眼鏡ボタンは検索と置換の機能にアクセスできます。

以上に続き、デフォルトの順序で、Gitなどのソースコントロールシステムを表示するアイコンがあります。Visual Studio Codeは他のソースコントロールプロバイダーもサポートしています。

Screencapture of the source control menu open to display the Git pane

デバッグオプション（バグのアイコンのついた三角形）は、パネル内でのデバッグに関する一般的な操作を提供します。Visual Studio Codeには、Node.jsランタイムデバッガーとJavaScriptに変換される言語に対する組み込みのサポートが付属しています。他の言語については、必要なデバッガーの拡張機能をインストールできます。アクティビティバーの最後に表示される4つのブロックボタンは、VSCode Marketplaceで利用可能な拡張機能にアクセスするためのメニューを提供します。

GUIの主要な領域は、コードの編集に使われるエディタです。タブで区切ってコードを編集することができます。編集ビューは、グリッドシステムに変更することも、並べて表示することもできます。

ブラウザで、既存のフォルダを読み込むため「code-server.your-domain/?folder=/var/lib/code-server/User」というURLを開いてください。

以下のように日本語で言い換えます（一つのオプションに限ります）：
メニューバーアイコンを選択すると、オプションのメニューが表示されます。その後、新規ファイルを作成するためファイルメニューを選択してください。ファイル名を付けて、デフォルトのフォルダーに保存してください。

ファイルを保存すると、[エクスプローラーサイドパネル] で閲覧できるようになります。[エクスプローラー サイドバー] 上で右クリックして [新しいフォルダ] をクリックすることで、フォルダの作成ができます。フォルダの名前をクリックすることで、そのフォルダを展開することもできます。また、ファイルやフォルダを上位階層の場所にドラッグアンドドロップすることで、新しい位置に移動することもできます。

Screencapture of the code-server GUI Editor with an example file open

上部メニュードロップダウンからTerminalをクリックし、New Terminalを選択することで、ターミナルにアクセスできます。また、メニューにリストされているキーボードショートカットも使用することができます。ターミナルは下部パネルに開かれ、作業ディレクトリはプロジェクトのワークスペースに設定されます。ワークスペースにはエクスプローラーサイドパネルに表示されるファイルやフォルダが含まれています。

このステップでは、コードサーバーのインターフェースと最もよく使用される機能のいくつかをレビューしました。

結論

あなたは今、Ubuntu 22.04サーバーにインストールされた、さまざまな用途に対応したクラウドIDEであるcode-serverを所有しています。それはあなたのドメインで公開され、Let’s Encryptの証明書で安全に保護されています。これにより、個別またはチームでプロジェクトに取り組むことができます。クラウドIDEを利用することで、ローカルマシンのリソースを解放でき、必要に応じてリソースをスケールすることができます。詳細な機能やcode-serverの他のコンポーネントの詳細な手順については、Visual Studio Codeのドキュメントを参照してください。

デジタルオーシャンのKubernetesクラスタ上でcode-serverを実行したい場合は、デジタルオーシャンKubernetes上でcode-serverクラウドIDEプラットフォームのセットアップ方法についての当社のチュートリアルをご覧ください。

コメントを残す 0

Your email address will not be published. Required fields are marked *