Visual Studio Code - サーバーIDEをUbuntu 18.04 LTSにインストールする方法

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

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

前提条件

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

私たちが行うこと:

• ユーザーを追加し、Code-serverバイナリをダウンロード
• Code-serverをSystemdサービスとして設定
• SSL Letsencryptを生成
• Code-serverのためにNginxをリバースプロキシとして設定
• テスト

ステップ1 - ユーザーを追加し、Code-Serverバイナリをダウンロード

まず、新しいユーザーを追加し、GitHubからcode-serverバイナリファイルをダウンロードします。

以下のコマンドを使用して新しいユーザー’code’を追加します。

useradd -m -s /bin/bash code  
passwd code

次に、’code’ユーザーとしてログインし、code-serverバイナリファイルをダウンロードします。

su - code  
wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

code-serverを抽出し、ディレクトリ名を’bin’に変更します。

tar -xf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz  
mv code-server2.1692-vsc1.39.2-linux-x86_64/ bin/

次に、code-serverを実行可能なバイナリファイルにします。

chmod +x ~/bin/code-server

そして、ユーザーデータを保存するための新しいデータディレクトリを作成します。

mkdir -p ~/data

これで、新しいユーザー’code’を作成し、ユーザー’code’のホームディレクトリにcode-serverバイナリをダウンロードしました。

ステップ2 - Code-ServerをSystemdサービスとして設定

このステップでは、code-serverをシステムサービスとして実行するように設定します。

code-serverサービスは、ユーザー’code’の下で実行され、デフォルトポート’8080’でパスワード認証が有効になります。

‘/etc/systemd/system’ディレクトリに移動し、vimエディタを使用して新しいサービスファイル’code-server.service’を作成します。

cd /etc/systemd/system/  
vim code-server.service

パスワードの’Environment’オプションを自分のものに変更し、設定を貼り付けます。

[Unit]  
Description=code-server  
After=nginx.service  
  
[Service]  
User=code  
WorkingDirectory=/home/code  
Environment=PASSWORD=hakasevscodeserv  
ExecStart=/home/code/bin/code-server --host 127.0.0.1 --user-data-dir /home/code/data --auth password  
Restart=always  
  
[Install]  
WantedBy=multi-user.target

保存して閉じます。

次に、システムマネージャーをリロードします。

systemctl daemon-reload

その後、以下のコマンドを使用してcode-serverサービスを開始し、システム起動に追加します。

systemctl start code-server  
systemctl enable code-server

次に、code-serverサービスを確認します。

netstat -plntu  
systemctl status code-server

そして、code-serverサービスはデフォルトポート’8080’で稼働しています。

その結果、code-serverをシステムサービスとして実行するように設定しました。

ステップ3 - SSL Letsencryptを生成

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

以下の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;  
 # 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/  
ginx -t

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

systemctl restart nginx  
systemctl enable nginx

今、Nginxサービスはcode-serverのためのリバースプロキシとして稼働しています。以下のコマンドを使用して確認します。

netstat -plntu  
systemctl status nginx

そして、以下の結果が得られます。

Nginxサービスは、HTTPおよびHTTPSポートが有効なUbuntu 18.04サーバー上で稼働しています。

ステップ5 - テスト

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

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

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

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

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

参考

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