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

Visual Studio Code でのリモート SSH

2019年7月25日 by Sana Ajani, @sana_ajani

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

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

Remote SSH architecture

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

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

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

  • リモート アクセス ソフトウェア (VNC など) を使用している場合、UI がローカルにないため、編集時にラグが発生する可能性があります。
  • リモート デスクトップ プロトコル (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: Connect to Host... コマンドを選択し、user@hostname の形式で VM の接続情報を入力してホストに接続します。

user は、VM に SSH 公開キーを追加したときに設定したユーザー名です。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