ウェブサイト検索

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

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

このチュートリアルはこれらのOSバージョンのために存在します

  • Ubuntu 24.04 (ノーブル・ナンバット)
  • Ubuntu 20.04 (フォーカルフォッサ)
  • Ubuntu 18.04 (ビオニックビーバー)

このページで

  1. 前提条件
  2. インストーラースクリプトを使って code-server をインストールする
  3. code-serverのパスワードを設定する
  4. Nginxをリバースプロキシとして設定する
  5. UFW（アンコンプリケイテッドファイアウォール）の設定
  6. HTTPSでコードサーバーを保護する
  7. コードサーバーにアクセス中
  8. 結論

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

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

前提条件

始める前に、次のものを用意してください:

  • Ubuntu 24.05サーバー。
  • 管理者権限を持つ非ルートユーザー。
  • ドメイン名はサーバーのIPアドレスにポイントされています。

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

コードサーバーをインストールするには、コードサーバーのインストーラースクリプトをダウンロードして実行できます。この例では、ルートユーザーでなく非ルートユーザーとしてコードサーバーをインストールします。したがって、ユーザーにログインしていることを確認してください。

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

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

code-serverがあなたのシステムにインストールされると、次の出力が表示されます:

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

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

インストールが完了したら、次の「systemctl」コマンドを使用してコードサーバーを起動して有効化します。

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

最後に、以下のコマンドでコードサーバーサービスを確認して、サービスが実行中であることを確認してください。

sudo systemctl status code-server@$USER

この出力では、コードサーバーが実行中であり、デフォルトポート8080で動作しています。

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

ファイルを保存してエディタを終了してください。

以下のコマンドを実行して、コードサーバーを再起動し、変更を適用してください。

sudo systemctl restart code-server@$USER

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

コードサーバーのセキュリティが確保できたので、次にNginxをインストールし、リバースプロキシとして設定します。したがって、ドメイン名がサーバーのIPアドレスを指すようにしていることを確認してください。

次の'apt'コマンドを使用してNginxウェブサーバーをインストールします。インストールを確認するには'Y'と入力してください。

sudo apt install nginx -y

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

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の設定をしているなら、出力に「構文は正しい - テストは成功しました」と表示されるでしょう。

以下のコマンドを実行して、Nginxウェブサーバーを再起動し、変更を適用してください。その後、Nginxのステータスを確認して、ウェブサーバーが動作していることを確認してください。

sudo systemctl restart nginx
sudo systemctl status nginx

以下の出力では、Nginxウェブサーバーがcode-serverアプリケーションのリバースプロキシとして動作していることが確認できます。

UFW（アンコンプリケイテッドファイアウォール）の設定

コードサーバーへのアクセスを許可するには、UFW（Uncomplicated Firewall）を通じてHTTPとHTTPSの両方のポートを開く必要があります。

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

sudo ufw allow 'Nginx Full'

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

sudo ufw status

HTTPSでコードサーバーを保護する

このセクションでは、certbotとletsencryptを使用してSSL/TLS証明書を生成し、HTTPSでコードサーバーを保護します。

次の 'apt' コマンドを使用して 'certbot' と 'python3-certbot-nginx' パッケージをインストールしてください。

sudo apt install certbot python3-certbot-nginx

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

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

プロセスが完了すると、あなたのコードサーバーのインストールは自動的にHTTPSで保護されます。そして、あなたのSSL/TLS証明書は '/etc/letsencrypt/live/code.howtoforge.local' ディレクトリに用意されます。

コードサーバーにアクセス中

ウェブブラウザを開き、https://code.howtoforge.local にアクセスしてください。インストールが成功していれば、パスワード認証のプロンプトが表示されます。

パスワードを入力し、送信をクリックして確認してください。

正しいパスワードを持っていれば、次のコードサーバー画面が表示されます。デフォルトのテーマを選択してください。ライトまたはダークのいずれかです。

これで、ウェブブラウザ上にライブコードサーバーが表示されます。

結論

おめでとうございます！あなたはUbuntu 24.04サーバーにVS Codeサーバーのインストールを完了しました。パスワード認証とHTTPSでコードサーバーをインストールし、セキュリティを確保し、コードサーバーインストールのためにNginxをリバースプロキシとして設定しました。

関連記事: