Ubuntu 24.04サーバーにVisual Studio Code Cloud IDEをインストールする方法

Visual Studio Code Cloud IDEは、Microsoftの人気のあるVisual Studio Code（VS Code）エディタのオンライン版で、クラウド内で柔軟でアクセス可能な開発環境を提供するように設計されています。これにより、開発者はローカルマシンに何もインストールすることなく、Webブラウザから直接コーディングできます。このクラウドベースのIDEは、GitHubや他のクラウドサービスとシームレスに統合されており、リアルタイムのコラボレーション、任意のデバイスからのプロジェクトへの簡単なアクセス、分散環境での作業が可能です。構文のハイライト、デバッグ、拡張機能などの機能を備えたVisual Studio Code Cloud IDEは、開発者にとって強力でポータブルなコーディング環境を提供し、ほぼどこからでもアクセスできる便利なソリューションです。

このガイドでは、Nginxをリバースプロキシとして使用して、Ubuntu 24.04サーバーにVisual Code-Serverをインストールする方法を示します。

前提条件

始める前に、以下のものを用意してください：

Ubuntu 24.05サーバー。
管理者権限を持つ非ルートユーザー。
サーバーIPアドレスを指すドメイン名。

インストーラスクリプトを使用してcode-serverをインストールする

code-serverをインストールするには、code-serverインストーラスクリプトをダウンロードして実行します。この例では、非ルートユーザーとしてcode-serverをインストールしますので、ユーザーにログインしていることを確認してください。

まず、以下のコマンドを実行して、code-serverがシステムにインストールできることを確認します。

curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

code-serverがシステムにインストールされると、以下の出力が表示されます：

test install

次に、以下のコマンドでcode-serverをインストールします。求められたら、sudo/管理者パスワードを入力してください。

curl -fsSL https://code-server.dev/install.sh | sh

install code-server

インストールが完了したら、以下の’systemctl’コマンドを使用してcode-serverを起動し、有効にします。

sudo systemctl enable --now code-server@$USER

最後に、以下のコマンドでcode-serverサービスを確認し、サービスが実行中であることを確認します。

sudo systemctl status code-server@$USER

この出力では、code-serverが実行中であり、デフォルトのポート8080で動作していることがわかります。

start and verify code-server

code-serverパスワードの設定

code-serverをインストールした後、code-server環境を保護するためにパスワード認証を設定します。

デフォルトのcode-server設定ファイル~/.config/code-server/config.yamlを’nano‘エディタで開きます。

nano ~/.config/code-server/config.yaml

デフォルトのパスワードを安全なパスワードに変更します。

bind-addr: 127.0.0.1:8080  
auth: password  
password: 0e0cb3af923c659366334664  
cert: false

ファイルを保存してエディタを終了します。

次に、以下のコマンドを実行してcode-serverを再起動し、変更を適用します。

sudo systemctl restart code-server@$USER

Nginxをリバースプロキシとして設定する

code-serverを保護したので、Nginxをインストールし、リバースプロキシとして構成します。ドメイン名がサーバーIPアドレスを指していることを確認してください。

以下の’apt‘コマンドを使用してNginxウェブサーバーをインストールします。インストールを確認するために’Y‘を入力します。

sudo apt install nginx -y

install nginx

インストールが完了したら、’nano‘エディタで新しいサーバーブロック構成’ /etc/nginx/sites-available/code-server.conf‘を作成します。

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

以下の構成をファイルに挿入し、ドメイン名’code.howtoforge.local‘を変更してください。

server {  
listen 80;  
listen [::]:80;  
server_name code.howtoforge.local;  
  
location / {  
proxy_pass http://localhost:8080/;  
proxy_set_header Host $http_host;  
proxy_set_header Upgrade $http_upgrade;  
proxy_set_header Connection upgrade;  
proxy_set_header Accept-Encoding gzip;  
}  
}

完了したら、ファイルを保存してエディタを終了します。

次に、以下のコマンドを実行して’code-server.conf‘サーバーブロックを有効にし、Nginx構成を確認します。

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

正しい場合、適切なNginx構成があると、出力に’syntax is ok - test is successful‘が表示されます。

check nginx

次に、以下のコマンドを実行してNginxウェブサーバーを再起動し、変更を適用します。その後、Nginxのステータスを確認して、ウェブサーバーが実行中であることを確認します。

sudo systemctl restart nginx  
sudo systemctl status nginx

次の出力では、Nginxウェブサーバーがcode-serverアプリケーションのリバースプロキシとして実行されていることがわかります。

check nginx

UFW（Uncomplicated Firewall）の設定

code-serverへのアクセスを許可するには、UFW（Uncomplicated Firewall）を介してHTTPおよびHTTPSポートの両方を開く必要があります。

以下のコマンドを実行して、’Nginx Full‘プロファイルを有効にし、NginxインストールへのHTTPおよびHTTPSトラフィックを許可します。追加されると、出力に’Rule added’が表示されます。

sudo ufw allow 'Nginx Full'

次に、以下のコマンドを実行してUFWのステータスを確認します。’Nginx Full’プロファイルが有効になっていて、どこからでもアクセスできることを確認してください。

sudo ufw status

HTTPSでcode-serverを保護する

このセクションでは、certbotとletsencryptを使用してSSL/TLS証明書を生成することで、code-serverをHTTPSで保護します。

以下の’apt‘コマンドを使用して’certbot’と’python3-certbot-nginx’パッケージをインストールします。

sudo apt install certbot python3-certbot-nginx

インストールが完了したら、以下の’certbot’コマンドを実行してSSL/TLS証明書を生成し、code-serverインストールを保護します。ドメイン名とメールアドレスを自分の情報に変更してください。

sudo certbot --nginx --agree-tos --redirect --hsts --staple-ocsp --email [email protected] -d code.howtoforge.local

プロセスが完了すると、code-serverインストールは自動的にHTTPSで保護されます。そして、SSL/TLS証明書は’/etc/letsencrypt/live/code.howtoforge.local’ディレクトリに保存されます。

code-serverにアクセスする

Webブラウザを開き、https://code.howtoforge.localにアクセスします。インストールが成功していれば、パスワード認証を求められます。

パスワードを入力し、SUBMITをクリックして確認します。

正しいパスワードを入力すると、以下のcode-server画面が表示されます。デフォルトのテーマを選択します。ライトまたはダーク。

change theme

これで、Webブラウザ上に以下のライブcode-serverが表示されます。

code server

結論

おめでとうございます！Ubuntu 24.04サーバーにVSコードサーバーのインストールが完了しました。パスワード認証とHTTPSで保護されたcode-serverをインストールし、Nginxをcode-serverインストールのリバースプロキシとして構成しました。