VS Codeのエージェントモードを拡張するには、を試してください！

Visual Studio Code を使用した Remote SSH

2019年7月25日 Sana Ajani, @sana_ajani

Remote - SSH: 簡単、スムーズ、そして (まるで) ローカルのように

見逃した方のために説明すると、Visual Studio Code は最近、Remote Development 拡張機能をリリースしました。Remote 拡張機能を使用すると、VS Code の全機能セットを開発環境として使用しながら、コンテナ、リモートマシンまたは仮想マシン (VM)、または Windows Subsystem for Linux (WSL) に対して開発を行うことができます。

Remote SSH architecture

無限: ローカルマシンに縛られない

ますます多くの開発者が、通常のノートパソコンよりも多くのストレージや計算能力を提供する、特殊な開発者用 VM やサーバーに対して作業する必要がある、大規模で複雑なプロジェクトに取り組んでいます。

しかし、この種の開発には、それなりの課題が伴います

  • リモートアクセスソフトウェア (VNC など) を使用している場合、UI がローカルにないため、編集時に遅延が発生する可能性があります。
  • Remote Desktop Protocol (RDP) を使用している場合、複数の接続を管理するのが難しい場合があります。
  • リモートファイルシステムをマウントしたり、一括操作を実行したりすると、速度が低下する可能性があります。
  • リモート環境とローカル環境を同期させ続けるのは煩わしく、ある場所では動作するのに別の場所では動作しないという問題に頻繁に遭遇します。
  • SSH と Vim を使用してリモートでファイルを編集すると、慣れ親しんだコードエディターの快適さから離れてしまいます。

ツールを手放すことなく、ローカルマシンの物理的な制限から抜け出せたら素晴らしいと思いませんか。Remote - SSH 拡張機能の魔法が登場します。

Linux を使用したリモート開発

Linux VM が SSH をサポートしている限り、ローカルホスト、オンプレミス、Azure、またはその他のクラウドなど、どこにでもホストできます。また、Windows、macOS、Linux のどのクライアントからでも接続できます。

注: macOS および Windows の SSH ホストはまだサポートされていません。

このブログ記事では、Windows クライアントを使用し、Azure 上の Linux VM をターゲットにします。

利用開始

始めるには、以下の準備が必要です

  1. OpenSSH 互換の SSH クライアントをインストールします (PuTTY はサポートされていません)。
  2. Visual Studio Code をインストールします。
  3. Azure サブスクリプションが必要です (Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください)。

VM の作成

既存の Linux 仮想マシンがない場合は、Azure portal を通じて新しい VM を作成できます。Azure portal で「仮想マシン」を検索し、追加を選択します。そこから、Azure サブスクリプションを選択し、まだリソースグループがない場合は新しいリソースグループを作成できます。

Create a virtual machine

これで、VM の名前、サイズ、ベースイメージなどの詳細を指定できます。この例では Ubuntu Server 18.04 LTS を選択しますが、他の Linux ディストリビューションの最近のバージョンを選択することもでき、サポートされている SSH サーバーを確認してください。

Virtual machine instance details

SSH のセットアップ

VM への認証方法には、SSH 公開/秘密鍵ペアやユーザー名とパスワードなど、いくつかあります。接続するたびにパスワードを入力する必要がないように、鍵ベースの認証を使用することを強くお勧めします。Windows を使用していて、PuttyGen で既に鍵を作成している場合は、それらを再利用できます。

SSH キーペアがない場合は、bash シェルまたはコマンドラインを開いて、次のように入力します

ssh-keygen -t ed25519

これにより SSH キーが生成されます。以下のプロンプトで Enter を押して、キーをデフォルトの場所に保存します。

ssh-keygen output

次に、安全なパスフレーズの入力を求められますが、空白のままにすることができます。

VM への SSH キーの追加

前の手順で、SSH キーペアを生成しました。公開鍵を id_ed25519.pub の内容をコピーして、VM の設定に貼り付けます。また、VM が受信 SSH トラフィックを受け入れるように設定する必要があります。

Add SSH public key to VM

Azure VM を使用するクールな機能の 1 つは、自動シャットダウンを有効にする機能です (なぜなら、正直なところ、私たちは皆、VM の電源を切るのを忘れてしまうからです…)。管理タブに移動すると、VM を毎日シャットダウンする時間を設定できます。

Virtual machine auto-shutdown

確認と作成を選択すると、Azure が VM をデプロイします！

Remote - SSH を使用して接続

SSH ホストの作成方法を説明したので、それに接続しましょう！

VS Code のRemote - SSH 拡張機能を使用すると、VS Code 内から SSH を使用してリモートマシンまたは VM に接続できます。Remote - SSH 拡張機能がまだインストールされていない場合は、拡張機能ビュー (Ctrl + Shift + X) で「remote ssh」を検索してインストールできます。

Remote SSH extension

ステータスバーの左下隅にインジケーターがあることに気づいたでしょう。このインジケーターは、VS Code がどのコンテキスト (ローカルまたはリモート) で実行されているかを示します。インジケーターをクリックすると、Remote 拡張機能コマンドのリストが表示されます。

Remote extension commands

Remote-SSH: ホストに接続コマンドを選択し、次の形式で VM の接続情報を入力してホストに接続します: user@hostname。

user は、SSH 公開鍵を VM に追加する際に設定したユーザー名です。hostname については、Azure portal に戻り、作成した VM の概要ペインでパブリック IP アドレスをコピーします。

Virtual machine public IP address

接続情報テキストボックスにユーザー名とホスト名を設定します。

Set user and host name

VS Code は新しいウィンドウ (インスタンス) を開きます。その後、「VS Code Server」が SSH ホストで初期化されているという通知が表示されます。VS Code Server がリモートホストにインストールされると、拡張機能を実行し、VS Code のローカルインスタンスと通信できるようになります。

Initializing VS Code Server

ステータスバーのインジケーターを見れば、VM に接続されていることがわかります。今、それは私たちの VM のホスト名を表示しています！

SSH indicator in Status bar

Remote - SSH 拡張機能は、アクティビティバーに新しいアイコンも追加します。これをクリックすると、SSH エクスプローラーが開きます。ここで SSH 接続を構成できます。たとえば、最も頻繁に接続するホストを保存し、ユーザー名とホスト名を入力する代わりにここからアクセスできます。

Remote button on Activity bar

SSH ホストに接続すると、リモートマシン上のファイルを操作したり、フォルダーを開いたりできます。統合ターミナルを開くと、Windows 上にいながらにして bash シェル内で作業していることがわかります。ちょっと待って、すでに VM に接続されているのですか？それはあまりにも簡単すぎました。それがポイントです。これらの拡張機能は、リモート開発を簡単、スムーズ、そして…そう、リモートではないように感じさせます。😃

Checking uname in the terminal

bash シェルを使用して VM 上のファイルシステムを閲覧できます。mkdir demo で新しいフォルダー「demo」を作成し、ファイル > フォルダーを開く でリモートホームディレクトリ上のフォルダーを閲覧して開くことができます。

Remote open folder

リモート SSH ホストに特化して拡張機能をインストールすることもできます。テーマやスニペットなど、UI に影響を与える拡張機能はローカルにインストールされ、残りの拡張機能はリモート SSH ホストにインストールする必要があります。拡張機能ビューを開くと、ローカルマシンの拡張機能とリモートホストの拡張機能の 2 つのセクションがあることに気づくでしょう。異なるクライアントからリモートマシンに SSH 接続しても、リモートの拡張機能と設定は同じままです。拡張機能をインストールしようとすると、VS Code は自動的に適切なコンテキストにインストールします。

Intellicode extension installed remotely

Hello World

基本的な「Hello World」Python アプリを VM にデプロイしましょう。Flask という人気の Python Web フレームワークを使用します。bash シェルで、次のコマンドを実行します。

sudo apt install python3-flask

以前に作成した「Demo」フォルダーに、基本的な Hello World Flask アプリケーションを含む app.py という名前の新しいファイル (Ctrl + N) を作成します。

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello Remote World! :)"

if __name__ == "__main__":
    app.run()

VS Code がファイル言語を Python と識別すると、リモートマシンにまだインストールされていない場合に、Microsoft Python 拡張機能を推奨する通知が表示されます。

Python extension recommendation

インストールを選択し、VS Code をリロードすると、リモートマシン上で VS Code の IntelliSense とカラーリングが表示されるようになります。

python IntelliSense

アプリを実行するには、F5 を押し、Flask デバッグ設定を選択します。Python デバッグコンソールで、アプリが localhost のポート 5000 で実行されていることがわかります。ただし、現在 localhost はローカルマシンではなくリモートサーバーを指しています。ローカルマシンで Web アプリを閲覧できるようにするため、ポート転送と呼ばれる別の機能を活用します。

公開されていない可能性のあるリモートマシン上のポートにアクセスできるようにするには、ローカルマシン上のポートとサーバーとの間に接続またはトンネルを確立する必要があります。アプリが実行中のまま、SSH エクスプローラーを開き、転送されたポートビューを見つけます。ポートを転送リンクをクリックし、ポート 5000 を転送したいことを示します

Enter the port to forward

接続に「browser」と名前を付けます

Name the port

サーバーは、ポート 5000 のトラフィックをローカルマシンに転送するようになりました。https://:5000 を参照すると、実行中の Web アプリが表示されます。

Hello Remote World in a browser

さて、本当の問題は…リモートマシン上の VS Code からデバッグできるのか？はい！アプリがまだ実行中のまま、「Hello Remote World」という文字列を返す行にブレークポイントを設定し、デバッグコントロールの再起動ボタンを選択します。ブラウザでページを更新すると、ブレークポイントにヒットします！編集、デバッグ、すべての設定、拡張機能を含め、同じ VS Code エクスペリエンスが得られます。😊

Debugging over SSH

ローカル開発のためにローカルマシンに戻るには、ファイル > リモート接続を閉じる でリモート接続を閉じます。

Remote - SSH 拡張機能を使用すると、リモートマシン上の VS Code のすべての生産性機能と拡張機能を使用して VM に対して作業できます。コードがどこにホストされていても、VS Code で慣れ親しんだ、完全な開発エクスペリエンスが得られます。

VS Code Remote の詳細については、リモート開発の発表に関するブログ記事を参照してください。また、他のリモート拡張機能であるDev ContainersとWSLを試したり、完全なリモート開発ドキュメントを読んだりすることもできます。

リモートコーディングをお楽しみください！

Sana Ajani, VS Code プログラムマネージャー @sana_ajani