🚀 VS Code で で入手しましょう!

リモート開発がさらに進化

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 でリモートインスタンスを開始できませんでした。そこで、ローカルとリモートをより密接に連携させることで、CLI をさらに強力にすることによって、そのギャップを解消したいと考えました。

本日、強化された code CLI を発表できることを嬉しく思います。これにより、VS Code を起動し、VS Code Desktop または vscode.dev からリモートマシンに接続できます。更新された CLI は、最新の VS Code リリースに組み込まれており、スタンドアロンインストールとしても利用できます。これにより、VS Code Desktop をインストールできないコンピューターでも、任意のコンピューターへの安全な接続を作成し、リモートで接続できます。

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

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

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

トンネリングは、あるネットワークから別のネットワークにデータを安全に送信します。安全なトンネルを使用して、SSH や HTTPS をセットアップする手間をかけずに (必要に応じてそれもできます 😊)、VS Code デスクトップまたは Web クライアントから任意の選択したマシンに対して開発できます。

VS Code からリモートマシンへのトンネリングには、2 つの優れたオプションがあります。

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

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

強化された code CLI

VS Code Server をリリースしたとき、それを code CLI に統合するという長期的なビジョンについて言及しました。これを実現し、VS Code Desktop をインストールできない VM またはロックダウンされたマシンで作業している場合に備えて、スタンドアロンインストールとしても利用できるようにしました。

以下は、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...] を実行することもできます。

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 クライアント (デスクトップまたは Web) で作業していて、リモートトンネルに接続したい場合は、Remote - Tunnels 拡張機能を直接インストールして使用できます。拡張機能をインストールしたら、コマンドパレット (F1) を開き、コマンド [Remote Tunnels: Connect to Tunnel] を実行します。アクティブなトンネルを持つ任意のリモートマシンに接続できるようになります。

List of remote machines in Quick Pick

リモートエクスプローラーでリモートマシンを表示することもできます。これは、コマンド [Remote Explorer: Focus on Remote View] を介して開くことができます。

List of remote machines in Remote Explorer

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

CLI を介して実行しているトンネルを停止したい場合は、Ctrl + C を使用してアクティブな接続を終了します。VS Code UI を介してトンネリングを有効にした場合は、コマンド [Remote Tunnels: Turn off Remote Tunnel Access...] を実行します。

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

リモート開発拡張機能

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

WSL および Dev Containers

Remote - WSL および Remote - Containers 拡張機能の名前に関するフィードバックをお寄せいただきありがとうございます。「Remote」は、従来型のローカル開発ではなく、「リモート」または「分離された」WSL ディストリビューションまたは開発コンテナーで開発していることを示すことを意図していました。ただし、これは多くの人が使用する「リモート」とは異なる使用法であり、混乱を招く可能性があります (たとえば、Dev Container はローカルマシン上にありますか?)。

これらの拡張機能の名前と製品内コマンドをより明確にするために更新し、WSL と Dev Containers に名前を変更しました。Marketplace およびドキュメント内の拡張機能識別子などのリンクは同じままなので、これら 2 つの拡張機能の現在の使用で破損が発生することはありません。

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

リモートトンネル

上記で説明したように、Remote - Tunnels 拡張機能を使用して、SSH を必要とせずに、安全なトンネル経由でリモートマシンに接続できます。拡張機能の名前を「Remote Server」から「Remote - Tunnels」に変更しました。これは、その動作をより明確に示すと考えているためです (結局のところ、拡張機能は安全なトンネル経由でリモートマシンで開発するために使用されます!)。

Remote - Tunnels extension in the Marketplace

終わりに – ありがとうございました!

リモートエクスペリエンス、そして最近では VS Code Server に関する長年のフィードバックをお寄せいただきありがとうございます。製品エクスペリエンスを形作り続けるご意見を共有していただき、感謝の念に堪えません。最新のリモート機能をどのように使用するか、そしてフィードバックをお待ちしております。

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

機能リクエストやバグについては、vscode-remote-release GitHub リポジトリに遠慮なく提出してください。または、Twitter で @code にご意見をツイートすることもできます。

ハッピーコーディング！

Brigit Murtaugh, @BrigitMurtaugh