Ubuntu 20.04 LTSにVisual Studio Code - Server IDEをインストールする方法

Code-serverは、サーバー上でリモート実行でき、ウェブブラウザを通じてアクセス可能なVisual Studio (VS) Codeです。これにより、いつでもどこでもアクセスできる一貫した開発環境を作成できます。

このチュートリアルでは、最新のUbuntu 20.04 ServerにNginxをリバースプロキシとして、SSL Letsencryptを使用してCode-serverをインストールする方法を示します。

前提条件

このガイドでは、4GBのRAM、25GBの空きディスクスペース、2CPUを持つUbuntu 20.04サーバーにVisual Code Serverをインストールします。

私たちが行うこと:

• Visual Code Serverパッケージのダウンロードとインストール
• Visual Code Serverの認証設定
• SSL Letsencryptの生成
• Nginxをリバースプロキシとしてインストールおよび構成
• テスト

ステップ1 - Visual Code Serverパッケージのダウンロードとインストール

まず、Ubuntu FocalFossa用のVisual Code Serverの最新バージョンをダウンロードし、システムにインストールします。

デフォルトでは、コードサーバーパッケージは複数のオペレーティングシステム用に利用可能です。以下のリンクを使用してGitHubのコードサーバーリリースページを確認できます。

https://github.com/cdr/code-server/releases

次に、以下のwgetコマンドを使用してUbuntu用のVisual Code Serverパッケージをダウンロードします。

wget -q https://github.com/cdr/code-server/releases/download/3.4.1/code-server_3.4.1_amd64.deb

その後、以下のdpkgコマンドを使用してVisual Code Serverパッケージをインストールします。

sudo dpkg -i code-server_3.4.1_amd64.deb

インストールが完了したら、コードサーバーサービスを開始し、システム起動時に追加します。

systemctl --user start code-server  
systemctl --user enable code-server

Visual Code Serverが起動しているか確認するには、以下のコマンドを使用します。

ss -plnt  
systemctl --user status code-server

以下が得られる結果です。

ご覧の通り、Visual Code ServerはデフォルトでローカルIPアドレス「127.0.0.1」でTCPポート「8080」で実行されています。

ステップ2 - Visual Code Serverの認証設定

デフォルトでは、Visual Code Serverは認証が有効になっています。

Visual Code Serverのパスワード認証は、デフォルトで「~/.config/code-server/config.yaml」ファイルに生成されます。

以下のコマンドを使用してVisual Code Serverの設定を確認します。

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

以下のような設定が得られます。

bind-addr: 127.0.0.1:8080  
auth: password  
password: 58403006a03529a2d26c08af  
cert: false

詳細な設定:

• 「bind-addr」は、Code Serverが実行されるIPアドレスとポートを定義するために使用されるオプションです。
• 「auth」オプションはVisual Code Serverの認証方法で、デフォルトでは「password」認証方法が使用されます。
• 「password」オプションはVisual Code Serverへのアクセス用のパスワードを定義するために使用され、強力なパスワードを使用することを確認してください。

Visual Code Serverのバインドアドレス、ポート、およびパスワードを変更するには、デフォルトの設定「~/.config/code-server/config.yaml」を必要に応じて変更します。

ステップ3 - SSL Letsencryptの生成

このステップでは、certbotツールを使用してSSL letsencryptを生成し、code-serverを保護します。

以下のaptコマンドを使用してcertbotツールをインストールします。

sudo apt install certbot -y

インストールが完了したら、以下のcertbotコマンドを使用してSSL letsencryptを生成します。

certbot certonly --standalone --agree-tos -m [email protected] -d vscode.hakase-labs.io

完了すると、証明書は「/etc/letsencrypt/live/vscode.hakase-labs.io/」ディレクトリに配置されます。

ls -lah /etc/letsencrypt/live/vscode.hakase-labs.io/

これで、certbotツールを使用してcode-serverインストールを保護するためのSSL Letsencryptが生成されました。

ステップ4 - Nginxをリバースプロキシとして設定

このステップでは、Nginxウェブサーバーをインストールし、SSLを有効にしたcode-serverのリバースプロキシとして設定します。

以下のaptコマンドを使用してNginxパッケージをインストールします。

sudo apt install nginx -y

インストールが完了したら、「/etc/nginx/sites-available」ディレクトリに移動し、新しい仮想ホスト設定「code-server」を作成します。

cd /etc/nginx/sites-available/  
vim code-server

次に、ドメイン名とSSLのパスを自分のものに変更し、設定を貼り付けます。

server {  
 listen 80;  
 server_name vscode.hakase-labs.io;  
 # enforce https  
 return 301 https://$server_name:443$request_uri;  
}  
  
server {  
 listen 443 ssl http2;  
 server_name vscode.hakase-labs.io;  
  
 ssl_certificate /etc/letsencrypt/live/vscode.hakase-labs.io/fullchain.pem;  
 ssl_certificate_key /etc/letsencrypt/live/vscode.hakase-labs.io/privkey.pem;  
  
 location / {  
 proxy_pass http://127.0.0.1:8080/;  
 proxy_set_header Host $host;  
 proxy_set_header Upgrade $http_upgrade;  
 proxy_set_header Connection upgrade;  
 proxy_set_header Accept-Encoding gzip;  
 }  
}

保存して閉じます。

次に、「code-server」仮想ホストを有効にし、nginx設定をテストしてエラーがないことを確認します。

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

その後、nginxサービスを再起動し、システム起動時に追加します。

systemctl restart nginx  
systemctl enable nginx

これで、Nginxサービスがcode-serverのリバースプロキシとして起動しています。以下のコマンドを使用して確認します。

netstat -plntu  
systemctl status nginx

以下のような結果が得られます。

Nginxサービスは、HTTPおよびHTTPSポートが有効なUbuntu 20.04サーバーで起動しています。

ステップ5 - テスト

ウェブブラウザを開き、code-serverインストールのURLを入力します。

https://vscode.hakase-labs.io/

設定したパスワードでcode-serverサービスファイルにログインします。

パスワードが正しいと、以下のようにウェブブラウザにVS Codeエディタが表示されます。

その結果、Nginxをリバースプロキシとして使用し、SSL Letsencryptでcode-serverインストールを保護したUbuntu 20.04サーバーにcode-serverをインストールしました。

参考

• https://github.com/cdr/code-server