に参加して、VS Code の AI 支援開発について学びましょう。

リモート開発がさらに向上

2022年12月7日 Brigit Murtaugh ( @BrigitMurtaugh )

Visual Studio Codeは、その核となるコードエディターであり、リモート開発体験を通じて他の環境と統合することで、さらに強力で柔軟なものになります。

Spectrum of remote development options

あまり意識しないかもしれませんが、VS Codeには組み込みのコマンドラインインターフェース (CLI) があり、エディターの起動方法や管理方法を制御できます。コマンドラインオプションを通じて、ファイルを開いたり、拡張機能をインストールしたり、診断を出力したりできます。

Output of code CLI

CLIはVS Code Desktopを使用するワークフローで非常に役立ちますが、これまでリモートインスタンスを起動できないというギャップがありました。そこで、そのギャップを解消し、ローカルとリモートをより密接に連携させることで、CLIをさらに強力にしたいと考えました。

本日、VS Codeとリモートマシンへの接続の両方をVS Code Desktopまたはvscode.devから行えるように強化されたcode CLIを公開できることを大変嬉しく思います。更新されたCLIは最新のVS Codeリリースに組み込まれており、スタンドアロンインストールも可能です。これにより、VS Code Desktopをインストールできないマシンであっても、あらゆるコンピューターへの安全な接続を作成し、リモートで接続できるようになります。

新しいCLIに加え、リモート開発を改善するために以下のアップデートを行いました。

  • VS Code UIから直接トンネリングを有効にできます。
  • トンネリングはプライベートプレビューではなくなりました。誰でもサインアップなしでトンネルを作成し、使用できます。
  • リモート拡張機能の名前を2つ変更し、その動作と開発に役立つ場所をより明確にしました。
    • 「Remote - WSL」拡張機能は、単にWSLとなりました。
    • 「Remote - Containers」拡張機能は、開発環境の作成に使用されることを反映してDev Containersに名前が変更されました。

一つのツールからどこへでもトンネル

トンネリングは、あるネットワークから別のネットワークへデータを安全に送信します。安全なトンネルを使用すると、SSHやHTTPSを設定する手間なく（もちろん、そうしたい場合は設定することもできます😊）、VS Codeデスクトップまたはウェブクライアントから、選択した任意のマシンに対して開発を行うことができます。

VS Codeからリモートマシンへトンネリングするための2つの素晴らしいオプションがあります。

  • 新しく強化されたcode CLIを使用する。
  • VS Code UIから直接トンネリングを有効にする。

次のセクションでは、両方のオプションについて説明します。

強化されたcode CLI

VS Code Serverをリリースした際、私たちはそれをcode CLIに統合するという長期的なビジョンを述べました。これを今回達成し、VMやロックダウンされたマシンでVS Code Desktopをインストールできない場合のために、スタンドアロンインストールも可能にしました。

以下に、code CLIをインストールし、それを使って安全なトンネルを作成する手順を示します。VS Code Serverのプライベートプレビューを試したことがある場合、手順は非常に似ています。

注: VS Code Serverのプライベートプレビュー中にスタンドアロンのcode-server CLIを使用していた場合、今後は最新のcode CLI (最新のVS Code Desktopまたはスタンドアロンダウンロード経由) を使用してください。

  1. ローカルのVS Codeクライアントで開発したいリモートマシンにcode CLIをインストールします。これは、リモートデスクトップ、VM、またはWindows Subsystem for Linux (WSL) ディストリビューションでも構いません。

    CLIは既存のVS Codeインストールに自動的に含まれています。追加の設定は不要です。VS Codeがインストールされていない、またはリモートマシンにインストールできない場合は、ダウンロードページでスタンドアロンインストールを通じてCLIを入手できます。

    CLI download section

    注: スタンドアロンインストールを使用している場合、次のセクションのコマンドはcodeではなく./codeで始まります。

  2. ヘルプコマンドを使用して、CLIが正常にインストールされたことを再確認します。

    code -h

    トンネリング固有のコマンドは以下で調べられます。

    code tunnel -h

    CLIをインストールしたので、このマシンをトンネリング用に設定し、任意のVS Codeクライアントから接続できるようにしましょう。

  3. tunnel コマンドでセキュアトンネルを作成

    code tunnel

    このコマンドは、このマシンにVS Code Serverをダウンロードして起動し、それへのトンネルを作成します。

    注: マシンで初めてトンネルを開始する際に、サーバーライセンス条項への同意を求められます。コマンドラインで--accept-server-license-termsを渡すことで、プロンプトを回避することもできます。

  4. このCLIは、https://vscode.dev/tunnel/<machine_name>/<folder_name>のような、このリモートマシンに関連付けられたvscode.dev URLを出力します。このURLは、任意の好きなマシンから開くことができます。

  5. クライアントでvscode.dev URLを初めて開くと、https://github.com/login/oauth/authorize... URLでGitHubアカウントへのログインを求められます。これは、適切なリモートマシンセットにアクセスできることを確認するために、トンネリングサービスに対してあなたを認証します。

おめでとうございます。code CLIの最新のトンネリング機能をインストールし、使用することに成功しました！

VS Code UIからトンネリングを有効にする

リモートマシンにVS Codeがインストールされている場合は、VS Code UIから直接トンネルを作成することも選択できます。これは、VS Codeですでに作業している場合に、マシンへのリモートアクセスを有効にするための迅速で便利な方法です。

リモートマシンでVS Codeを開きます。VS Codeのアカウントメニューで、以下の画像に示すように、**「リモートトンネルアクセスをオンにする...」**オプションを選択します。コマンドパレット ( F1 ) を開き、**「Remote Tunnels: リモートトンネルアクセスをオンにする...」**コマンドを実行することもできます。

Turn on Remote Tunnel Access in the Account menu

GitHubへのログインを促されます。ログインすると、このリモートマシン上でトンネルが起動し、接続できるようになります。

Remote tunnel access is enabled toast

お好みのクライアントで、上記の通知からvscode.devリンクを開き、コーディングを開始できます！

リモートトンネル経由で接続

Remote - Tunnels拡張機能は、ローカルマシンとリモートマシンの間のセキュアトンネルを管理します。code CLIまたはVS Code UIを通じて開くvscode.devインスタンスには、Remote Tunnels拡張機能がプリインストールされています。

VS Codeクライアント（デスクトップまたはウェブ）ですでに作業しており、リモートトンネルに接続したい場合は、Remote - Tunnels拡張機能を直接インストールして使用できます。拡張機能をインストールしたら、コマンドパレット (F1) を開き、**「Remote Tunnels: トンネルに接続」**コマンドを実行します。アクティブなトンネルがある任意のリモートマシンに接続できます。

List of remote machines in Quick Pick

リモートマシンは、**「リモートエクスプローラー: リモートビューにフォーカス」**コマンドで開けるリモートエクスプローラーでも確認できます。

List of remote machines in Remote Explorer

トンネルまたはマシンの削除

CLI経由で実行しているトンネルを停止したい場合は、Ctrl + Cを使用してアクティブな接続を終了します。VS Code UIを通じてトンネリングを有効にしている場合は、**「Remote Tunnels: リモートトンネルアクセスをオフにする...」**コマンドを実行します。

そのマシンでcode tunnel unregisterを実行することで、トンネリングとのマシンの関連付けを解除できます。VS Codeでは、リモートエクスプローラービューを選択し、削除したいマシンを右クリックして**「登録解除」**を選択します。

リモート開発拡張機能

トンネリングとcode CLIの更新に加えて、開発コンテナ、リモートマシン、またはWSLをフル機能の開発環境として使用できるようにするリモート開発拡張機能にもいくつか更新を行いました。

WSLとDev Containers

Remote - WSLとRemote - Containers拡張機能の名称について、皆様からのフィードバックを頂戴しました。当初、Remoteという言葉は、従来のローカル開発ではなく、「リモート」または「別の」WSLディストリビューションや開発コンテナで開発していることを示す意図でした。しかし、これは多くの人が使用する「リモート」とは異なる使い方であり、混乱を招く可能性がありました（例えば、Dev Containerはローカルマシン上にあるのか？など）。

これらの拡張機能の名称と製品内のコマンドをより明確にするために更新し、それぞれWSLとDev Containersに改名しました。マーケットプレイスの拡張機能識別子やドキュメントなどのリンクは変更されていないため、これらの2つの拡張機能の現在の使用に問題が生じることはないはずです。

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

リモートトンネル

上記のとおり、SSHの要件なしに、Remote - Tunnels拡張機能を使用して安全なトンネル経由でリモートマシンに接続できます。この拡張機能は、その動作をより明確に示すと判断し、「Remote Server」から「Remote - Tunnels」に名称変更しました（結局のところ、この拡張機能は安全なトンネル経由でリモートマシン上で開発するために使用されるものです！）。

Remote - Tunnels extension in the Marketplace

終わりに - ありがとうございました！

長年にわたるリモート体験、そして最近ではVS Code Serverに関するフィードバックをお寄せいただき、誠にありがとうございます。皆様の貴重なご意見が、当社の製品体験を形作り続けています。最新のリモート機能をどのように活用されるか、そして皆様からのフィードバックを楽しみにしています！

このブログで説明されているツールについてより深く掘り下げたい場合は、Remote - Tunnels拡張機能に関するトピックを作成し、最新の変更を反映するためにVS Code Serverおよびcode CLIのドキュメントを更新しました。

機能リクエストやバグの報告は、vscode-remote-release GitHubリポジトリまでお気軽にお寄せください。また、@codeまでご意見をツイートしていただくことも可能です。

ハッピーコーディング！

Brigit Murtaugh、@BrigitMurtaugh

© . This site is unofficial and not affiliated with Microsoft.