Ubuntu20.04でコードサーバーCloudIDEプラットフォームをセットアップする方法
序章
開発者ツールがクラウドに移行するにつれ、クラウドIDE(統合開発環境)プラットフォームの作成と採用が拡大しています。 Cloud IDEを使用すると、開発者チーム間のリアルタイムコラボレーションが可能になり、非互換性を最小限に抑えて生産性を向上させる統合開発環境で作業できます。 WebブラウザからアクセスできるクラウドIDEは、あらゆるタイプの最新デバイスから利用できます。
code-server は、 Microsoft Visual Studio Code であり、リモートサーバー上で実行され、ブラウザーから直接アクセスできます。 Visual Studio Codeは、統合されたGitサポート、コードデバッガー、スマートオートコンプリート、およびカスタマイズ可能で拡張可能な機能を備えた最新のコードエディターです。 つまり、さまざまなオペレーティングシステムを実行しているさまざまなデバイスを使用でき、常に一貫した開発環境を手元に置くことができます。
このチュートリアルでは、Ubuntu 20.04マシンにコードサーバークラウドIDEプラットフォームをセットアップし、無料の Let’s EncryptTLS証明書で保護されたドメインで公開します。 最終的には、Ubuntu20.04サーバーでMicrosoftVisual Studio Codeを実行し、ドメインで利用でき、パスワードで保護することができます。
前提条件
-
少なくとも2GBのRAM、rootアクセス、およびsudoの非rootアカウントを備えたUbuntu20.04を実行しているサーバー。 これは、この初期サーバーセットアップガイドに従ってセットアップできます。
-
Nginxがサーバーにインストールされています。 これを行う方法のガイドについては、 Ubuntu20.04にNginxをインストールする方法のステップ1から4を完了してください。
-
サーバーを指す、コードサーバーをホストするための完全に登録されたドメイン名。 このチュートリアルでは、
code-server.your-domain
全体を通して。 Namecheap でドメイン名を購入するか、 Freenom で無料でドメイン名を取得するか、選択したドメイン登録事業者を使用できます。 DigitalOceanの場合、それらを追加する方法の詳細については、このDigitalOceanDNSの概要に従うことができます。
ステップ1—コードサーバーのインストール
このセクションでは、サーバーにコードサーバーを設定します。 これには、最新バージョンをダウンロードし、コードサーバーを常にバックグラウンドで実行し続けるsystemdサービスを作成する必要があります。 また、サービスの再起動ポリシーを指定して、クラッシュまたは再起動の可能性があった後もコードサーバーを使用できるようにします。
コードサーバーに関連するすべてのデータを、という名前のフォルダーに保存します ~/code-server
. 次のコマンドを実行して作成します。
- mkdir ~/code-server
そこに移動します:
- cd ~/code-server
コードサーバーのGithubリリースページに移動し、最新のLinuxビルドを選択する必要があります(ファイルの名前には「linux」が含まれます)。 執筆時点では、最新バージョンは3.3.1でした。 を使用してダウンロード wget
次のコマンドを実行します。
- wget https://github.com/cdr/code-server/releases/download/v3.3.1/code-server-3.3.1-linux-amd64.tar.gz
次に、次のコマンドを実行してアーカイブを解凍します。
- tar -xzvf code-server-3.3.1-linux-amd64.tar.gz
ダウンロードした元のファイルとまったく同じ名前のフォルダーが作成されます。このフォルダーには、コードサーバーのソースコードが含まれています。 にコピーします /usr/lib/code-server
したがって、次のコマンドを実行することにより、システム全体でアクセスできるようになります。
- sudo cp -r code-server-3.3.1-linux-amd64 /usr/lib/code-server
次に、でシンボリックリンクを作成します /usr/bin/code-server
、コードサーバー実行可能ファイルを指す:
- sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server
次に、ユーザーデータを保存するコードサーバー用のフォルダーを作成します。
- sudo mkdir /var/lib/code-server
コードサーバーをダウンロードしてシステム全体で利用できるようにしたので、systemdサービスを作成して、コードサーバーを常にバックグラウンドで実行し続けます。
サービス構成をという名前のファイルに保存します code-server.service
、 の中に /lib/systemd/system
systemdがサービスを保存するディレクトリ。 テキストエディタを使用して作成します。
- sudo nano /lib/systemd/system/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
プロセスを単純に実行する必要があることを意味します)、実行されるコマンドを提供します。
また、グローバルコードサーバー実行可能ファイルは、コードサーバーに固有のいくつかの引数で開始する必要があることを指定します。 --bind-addr 127.0.0.1:8080
にバインドします localhost
港で 8080
、したがって、サーバーの内部からのみ直接アクセスできます。 --user-data-dir /var/lib/code-server
ユーザーデータディレクトリを設定し、 --auth password
で指定されたパスワードで訪問者を認証する必要があることを指定します PASSWORD
その上の行で宣言された環境変数。
交換することを忘れないでください your_password
希望のパスワードを使用して、ファイルを保存して閉じます。
次の行は、すべての誤動作イベント(たとえば、クラッシュしたときやプロセスが強制終了されたとき)でコードサーバーを再起動するようにsystemdに指示します。 The [Install]
セクションは、サーバーにログインできるようになったときにこのサービスを開始するようにsystemdに指示します。
次のコマンドを実行して、コードサーバーサービスを開始します。
- sudo systemctl start code-server
ステータスを確認して、正しく起動していることを確認します。
- sudo systemctl status code-server
次のような出力が表示されます。
Output● code-server.service - code-server
Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
Active: active (running) since Wed 2020-05-20 13:03:40 UTC; 12s ago
Main PID: 14985 (node)
Tasks: 18 (limit: 2345)
Memory: 26.1M
CGroup: /system.slice/code-server.service
├─14985 /usr/lib/code-server/bin/../lib/node /usr/lib/code-server/bin/.. --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth>
└─15010 /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
May 20 13:03:40 code-server-update-2004 systemd[1]: Started code-server.
May 20 13:03:40 code-server-update-2004 code-server[15010]: info Wrote default config file to ~/.config/code-server/config.yaml
May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using config file ~/.config/code-server/config.yaml
May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using user-data-dir /var/lib/code-server
May 20 13:03:40 code-server-update-2004 code-server[15010]: info code-server 3.3.1 6f1309795e1cb930edba68cdc7c3dcaa01da0ab3
May 20 13:03:40 code-server-update-2004 code-server[15010]: info HTTP server listening on http://127.0.0.1:8080
May 20 13:03:40 code-server-update-2004 code-server[15010]: info - Using password from $PASSWORD
May 20 13:03:40 code-server-update-2004 code-server[15010]: info - To disable use `--auth none`
May 20 13:03:40 code-server-update-2004 code-server[15010]: info - Not serving HTTPS
サーバーの再起動後にコードサーバーを自動的に起動するには、次のコマンドを実行してサービスを有効にします。
- sudo systemctl enable code-server
このステップでは、コードサーバーをダウンロードして、グローバルに利用できるようにしました。 次に、そのためのsystemdサービスを作成して有効にしたので、コードサーバーはサーバーの起動ごとに起動します。 次に、訪問者とコードサーバー間のリバースプロキシとして機能するようにNginxを構成することにより、ドメインで公開します。
ステップ2—ドメインでコードサーバーを公開する
このセクションでは、Nginxをコードサーバーのリバースプロキシとして構成します。
Nginxの前提条件の手順で学習したように、そのサイト構成ファイルは次の場所に保存されます。 /etc/nginx/sites-available
後でシンボリックリンクする必要があります /etc/nginx/sites-enabled
アクティブになります。
ドメインでコードサーバーを公開するための構成を、という名前のファイルに保存します code-server.conf
、 下 /etc/nginx/sites-available
. エディターを使用して作成することから始めます。
- sudo nano /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
. 次の3行( proxy_set_header
)コードサーバーが広く使用しているWebSocketが正しく機能するために必要なHTTPリクエストヘッダーをNginxに引き継ぐように命令します。
このサイト構成をアクティブにするには、サイトのシンボリックリンクを作成する必要があります。 /etc/nginx/sites-enabled
実行することによるフォルダ:
- sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf
構成の有効性をテストするには、次のコマンドを実行します。
- sudo nginx -t
次の出力が表示されます。
Outputnginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
構成を有効にするには、Nginxを再起動する必要があります。
- sudo systemctl restart nginx
これで、ドメインでコードサーバーのインストールにアクセスできるようになりました。 次のステップでは、無料のLet’sEncryptTLS証明書を適用してセキュリティを確保します。
ステップ3—ドメインを保護する
このセクションでは、Certbotを使用してプロビジョニングするLet’sEncryptTLS証明書を使用してドメインを保護します。
最新バージョンのCertbotとそのNginxプラグインをインストールするには、次のコマンドを実行します。
- sudo apt install certbot python3-certbot-nginx
前提条件の一部として、 ufw
(複雑でないファイアウォール)そして暗号化されていないHTTPトラフィックを許可するように構成しました。 セキュリティで保護されたサイトにアクセスできるようにするには、次のコマンドを実行して、暗号化されたトラフィックを受け入れるようにサイトを構成する必要があります。
- sudo ufw allow https
出力は次のようになります。
OutputRule added
Rule added (v6)
Nginxと同様に、構成を有効にするには、Nginxをリロードする必要があります。
- sudo ufw reload
出力には次のように表示されます。
OutputFirewall reloaded
次に、ブラウザで、コードサーバーに使用したドメインに移動します。 コードサーバーのログインプロンプトが表示されます。
code-serverがパスワードを要求しています。 前の手順で設定したものを入力し、 EnterIDEを押します。 ここでcode-serverに入り、すぐにそのエディターGUIが表示されます。
コードサーバーがドメインで正しく公開されていることを確認したので、Certbotを使用してLet’sEncryptTLS証明書をインストールしてセキュリティで保護します。
ドメインの証明書をリクエストするには、次のコマンドを実行します。
- sudo certbot --nginx -d code-server.your-domain
このコマンドでは、次のコマンドを実行します certbot
ドメインの証明書をリクエストするには、ドメイン名を -d
パラメータ。 The --nginx
フラグは、HTTPSをサポートするようにNginxサイト構成を自動的に変更するように指示します。 交換することを忘れないでください code-server.your-domain
あなたのドメイン名で。
Certbotを初めて実行する場合は、緊急通知用の電子メールアドレスを提供し、EFFの利用規約に同意するように求められます。 次に、CertbotはLet’sEncryptからドメインの証明書を要求します。 次に、すべてのHTTPトラフィックをHTTPSにリダイレクトするかどうかを尋ねられます。
OutputPlease choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):
セキュリティを最大化するために、2番目のオプションを選択することをお勧めします。 選択内容を入力したら、を押します ENTER
.
出力は次のようになります。
OutputIMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
/etc/letsencrypt/live/code-server.your-domain/fullchain.pem
Your key file has been saved at:
/etc/letsencrypt/live/code-server.your-domain/privkey.pem
Your cert will expire on ... To obtain a new or tweaked
version of this certificate in the future, simply run certbot again
with the "certonly" option. To non-interactively renew *all* of
your certificates, run "certbot renew"
- Your account credentials have been saved in your Certbot
configuration directory at /etc/letsencrypt. You should make a
secure backup of this folder now. This configuration directory will
also contain certificates and private keys obtained by Certbot so
making regular backups of this folder is ideal.
- 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構成に適用したことを意味します。 これで、ブラウザでコードサーバードメインをリロードし、サイトアドレスの左側にある南京錠を確認できます。これは、接続が適切に保護されていることを意味します。
これで、セキュリティで保護されたNginxリバースプロキシを介してドメインでコードサーバーにアクセスできるようになりました。これで、コードサーバーのユーザーインターフェイスを確認する準備が整いました。
ステップ4—コードサーバーインターフェイスを使用する
このセクションでは、コードサーバーインターフェイスのいくつかの機能を使用します。 code-serverはクラウドで実行されるVisualStudioCodeであるため、スタンドアロンデスクトップエディションと同じインターフェイスを備えています。
IDEの左側には、アクティビティバーと呼ばれるサイドパネルで最も一般的に使用される機能を開く6つのボタンが縦に並んでいます。
このバーはカスタマイズ可能であるため、これらのビューを別の順序に移動したり、バーから削除したりできます。 デフォルトでは、最初のボタンはドロップダウンで一般メニューを開き、2番目のビューはプロジェクトの構造のツリーのようなナビゲーションを提供するエクスプローラーパネルを開きます。 ここでフォルダとファイルを管理できます—必要に応じて、それらの作成、削除、移動、および名前の変更を行います。 次のビューは、検索および置換機能へのアクセスを提供します。
これに続いて、デフォルトの順序で、Gitのようなソース管理システムのビューが表示されます。 Visual Studioコードは、他のソース管理プロバイダーもサポートしています。このドキュメントで、エディターを使用したソース管理ワークフローの詳細な手順を確認できます。
アクティビティバーのデバッガオプションは、パネルでデバッグするためのすべての一般的なアクションを提供します。 Visual Studio Codeには、Node.jsランタイムデバッガーとJavascriptに変換される任意の言語のサポートが組み込まれています。 他の言語の場合は、必要なデバッガーに拡張機能をインストールできます。 デバッグ構成をに保存できます launch.json
ファイル。
アクティビティバーの最終ビューには、マーケットプレイスで利用可能な拡張機能にアクセスするためのメニューが表示されます。
GUIの中心部分はエディターであり、コード編集用にタブで区切ることができます。 編集ビューをグリッドシステムまたはサイドバイサイドファイルに変更できます。
ファイルメニューから新しいファイルを作成すると、空のファイルが新しいタブで開き、保存すると、ファイルの名前がエクスプローラーのサイドパネルに表示されます。 フォルダの作成は、エクスプローラのサイドバーを右クリックし、新しいフォルダをクリックして行うことができます。 フォルダの名前をクリックしたり、ファイルやフォルダを階層の上位にドラッグアンドドロップして新しい場所に移動したりすることで、フォルダを展開できます。
次のように入力すると、端末にアクセスできます。 CTRL+SHIFT+`
、または上部のメニュードロップダウンでターミナルをクリックし、新しいターミナルを選択します。 ターミナルが下のパネルで開き、その作業ディレクトリがプロジェクトのワークスペースに設定されます。このワークスペースには、エクスプローラのサイドパネルに表示されるファイルとフォルダが含まれています。
コードサーバーインターフェイスの概要を調べ、最も一般的に使用される機能のいくつかを確認しました。
結論
これで、Ubuntu 20.04サーバーにインストールされ、ドメインで公開され、Let’sEncrypt証明書を使用して保護された多用途のクラウドIDEであるコードサーバーができました。 これで、プロジェクトを個別に、またはチームコラボレーションの設定で作業できます。 クラウドIDEを実行すると、ローカルマシン上のリソースが解放され、必要に応じてリソースを拡張できます。 詳細については、 Visual Studio Codeのドキュメントを参照して、コードサーバーの他のコンポーネントの追加機能と詳細な手順を確認してください。
DigitalOcean Kubernetesクラスターでコードサーバーを実行する場合は、DigitalOceanKubernetesでコードサーバーCloudIDEプラットフォームをセットアップする方法のチュートリアルを確認してください。