VS Code を使用したリモート開発

2019年5月2日 The VS Code Team より, @code

TL;DR

本日、Visual Studio Code の3つの新しい拡張機能のプレビューを発表できることを嬉しく思います。これらの拡張機能により、コンテナ内、物理マシンまたは仮想マシン上でのリモート開発、および Windows Subsystem for Linux (WSL) を使用した開発がシームレスに行えるようになります。Remote Development 拡張機能パックをインストールすることで、すぐに開始できます。

注意: 現時点では Insiders ビルドを使用する必要がありますが、リモート開発サポートはいずれ Stable リリースで利用可能になります。

なぜこのようになったのか、読み進めてください。

開発トレンド

VS Code の人気が高まるにつれて、私たちはさまざまな開発環境を持つ、これまで以上に多くのユーザーと話す機会に恵まれました。彼らの環境の多くは私たち自身のものとは大きく異なり、開発者が抱える実際の課題に対処するために VS Code をどのように進化させられるかを見つけ出そうとしました。

これらの会話の中で、興味深いパターンが浮上しました。多くの開発者が、特定の開発スタックやランタイムスタックで構成されたコンテナやリモート VM を対象に VS Code を使用して開発しようとしているのを見ました。それは、これらの開発環境をローカルに設定することが、あまりにも困難で、あまりにも中断が多く、場合によっては不可能だからです。

私たちは皆、この問題を経験しています。マシンを初期化する時期だと感じない限り :), Rust、Go、Node、Python3 のような新しいスタックを試すことにためらいを感じます。それは、現在の適切に調整された環境を「台無しにする」ことを恐れるからです。

Python 開発者は VS Code への移行を望んでいますが、特定の Python スタック用に構成された開発環境としてコンテナと仮想マシンを使用する必要があるため、できません。

コードベースが非常に大きいため、Facebook (そして Microsoft!) のような企業では、エンジニアが vim のようなエディターを使用して、安全で強力な「開発者 VM」に対してリモートで作業しています。彼らは、最高のラップトップでさえ処理できる規模を超える、代替のクラウドベースの検索およびナビゲーションサービスを利用しています。

データモデルを構築およびトレーニングするデータサイエンティストは、堅牢なデスクトップでも保存または処理できない大規模なデータセットを分析するために、しばしば大規模なストレージおよびコンピューティングサービスを必要とします。

Windows Subsystem for Linux (WSL) の人気が高まっている理由の一部は、ターゲットオペレーティングシステムを含む、コンテナ化された開発環境を簡単に設定できる点にあります。実際、VS Code リポジトリで3番目にコメントが多い課題は、Windows 上の Linux ディストリビューションの Bash ターミナルから code を実行するサポートです。

現在のソリューションにおける課題

これらの会話を通して、私たちはまた、開発者がこの種の開発で直面する同じ課題を聞き続けました。

• リモートデスクトップは機能しますが、一部の Linux ディストリビューションでは設定が困難または不可能であり、開発エクスペリエンスが「遅い」場合があります。

• SSH と Vim (またはファイル同期を伴うローカルツール) は機能しますが、遅く、エラーが発生しやすく、一般的に最新の開発ツールの生産性に欠けています。

• ブラウザベースのツールはさまざまなシナリオで役立ちますが、開発者はデスクトップツールが提供する豊富さと使い慣れた操作性、または既存のローカルにインストールされたツールチェーンをあきらめたくありません。

さらに悪いことに (私たちの意見では!)、開発者はこれらの環境で作業するために、IntelliSense (コード補完)、リンティング、デバッグといった VS Code のコアエクスペリエンスを犠牲にしなければなりませんでした。

異なるアプローチ

これらの課題を聞いて、私たちは WSL のサポートを検討し始めましたが、それは十分に単純に見えました。VS Code をインストールし、（当時は注意が必要でしたが！）通常どおり Windows ファイルシステムを編集するのです。Node.js のリモートデバッグを有効にする作業を行い、bash シェルから code を起動できるように小さなスクリプトをインストールするだけでよいと考えました。

しかし、それは正しくありませんでした。Node.js のデバッグで行ったように、すべてのランタイムに対して特別な作業を行うのは意味がありません。Windows に Python 2.7 と Flask がインストールされている場合 (または何もインストールされていない場合！) で、Linux ディストリビューションに Python 3.7 と Django がインストールされているとすると、VS Code はすべての Windows バージョンを見ているため、適切なコード補完やリンティングが得られません。Windows と Linux の両方で開発環境を複製する必要があることは、WSL を持つ目的そのものを打ち消してしまいます。

私たちは、VS Code を同時に2か所で実行する方法が必要であると確信しました。つまり、開発ツールをローカルで実行し、物理マシンまたは仮想マシン (たとえば、コンテナまたは VM) のコンテキストでリモートで実行されている一連の開発サービスに接続する方法です。これにより、リモート環境にあるもののコンテキストで、豊かなローカル開発エクスペリエンスが得られます。

VS Code Remote Extensions の紹介

この数か月間、私たちはコードレイヤー間の適切な境界を再確立し、ローカル開発環境に関する前提を排除するために懸命に取り組んできました。WSL、Docker コンテナ、または SSH 経由で物理マシンや仮想マシンで実行されているリモートワークスペースで作業するための3つの新しい拡張機能を構築しました。

WSL 拡張機能を使用すると、Windows Subsystem for Linux (WSL) を VS Code から直接、完全な開発環境として使用できます。この新しい最適化されたサポートにより、以下が可能になります。

• Windows を使用して、プラットフォーム固有のツールチェーンとユーティリティを使用しながら、Linux ベースの環境で開発する。
• WSL 内、またはマウントされた Windows ファイルシステム (例: /mnt/c) 内にあるファイルを編集する。
• Windows 上で Linux ベースのアプリケーションを実行およびデバッグする。

コマンドと拡張機能は Linux ディストリビューション内で直接実行されるため、パスの問題、バイナリ互換性、その他のクロスOSの課題について心配する必要はありません。Windows から行うのと同じように、WSL 内で VS Code を使用できます。

WSL での開発がいかに簡単か、この短い2分間のビデオでご確認ください。

詳細については、WSL での開発のドキュメントを参照してください。

Remote - SSH 拡張機能を使用すると、SSH サーバーが実行されている任意のリモートマシン、VM、またはコンテナ上でホストされているフォルダーやワークスペースを開くことができます。SSH 経由での開発により、以下が可能になります。

• ローカルマシンよりも大規模で高速、またはより特殊なハードウェアで開発する。
• 異なるリモート開発環境間を迅速に切り替え、ローカルマシンに影響を与えることを心配せずに安全に更新を行う。
• 顧客サイトやクラウドなど、別の場所で実行されているアプリケーションをデバッグする。

例えば、ディープラーニングプロジェクトに取り組んでいるとしましょう。通常、大規模なデータセットでモデルをトレーニングするために必要なすべてのツールとフレームワークが構成された、GPU を多用する仮想マシン (Azure Data Science Virtual Machine など) が必要です。

SSH 経由で Vim や Jupyter Notebook を使用してリモートコードを編集することもできますが、その場合、ローカル開発ツールの豊富さを失います。代わりに、Remote - SSH 拡張機能を使用すると、単に VM に接続し、Python のような必要な拡張機能をインストールするだけで、IntelliSense (コード補完)、コードナビゲーション、デバッグといった VS Code のすべての優れた機能を、まるでローカルで作業しているかのように活用できます。

SSH 経由で仮想マシン上で開発がいかに簡単か、この短い2分間のビデオでご確認ください。

詳細については、SSH を使用した開発のドキュメントを参照してください。

Dev Containers 拡張機能を使用すると、Docker コンテナを開発コンテナとして使用できます。コンテナは優れた開発環境となるのは、以下の理由からです。

• デプロイするのと同じオペレーティングシステム上で、一貫性があり再現性の高いツールチェーンを使用して開発できます。
• コンテナは分離されているため、ローカルマシンに影響を与えることなく、異なる開発環境間を迅速に切り替えることができます。
• 他の人があなたのプロジェクトに貢献することも容易です。彼らは一貫した開発環境で簡単に開発、ビルド、テストを行えるからです。

devcontainer.json ファイルを使用して、使用する Dockerfile、開くポート、コンテナにインストールする拡張機能など、開発コンテナをどのように構成するかを VS Code に指示できます。VS Code がワークスペースで devcontainer.json を見つけると、自動的にイメージをビルド (必要な場合) し、コンテナを起動してそれに接続します。ファイルはコンテナにマウントされるため、完全な IntelliSense (コード補完)、コードナビゲーション、デバッグなどを用いてファイルを開き、編集を開始できます。

Development Containers が動作する様子を、この短い2分間のビデオでご確認ください。

開発コンテナに関する詳細については、コンテナ内での開発のドキュメント、およびすぐに使用できるサンプルを含むvscode-remote-try-* リポジトリを参照してください。

拡張機能の管理

リモートで開発する場合、VS Code は拡張機能が公開する機能に基づいて、ローカルまたはリモートのどちらにインストールするかを推測しようとします。拡張機能は次の2つのカテゴリに分類されます。

• UI 拡張機能はローカルにインストールされます。これらの拡張機能は UI をカスタマイズするだけで、ワークスペース内のファイルにはアクセスしません。つまり、完全にローカルマシン上で実行できます。ローカルにインストールされているため、作業しているワークスペースに関係なく、常に利用可能です。UI 拡張機能の例としては、テーマ、スニペット、言語文法、キーマップなどがあります。

• ワークスペース拡張機能はリモートにインストールされます。これらはワークスペース内のファイルやフォルダにアクセスして編集を行い、IntelliSense (コード補完)、GoTo Definition、デバッグなどの機能を提供します。これらの拡張機能は UI をカスタマイズする場合もあります。これらはリモートで実行されるため、リモートホストのファイルシステムとツールに完全にアクセスできます。

ほとんどの拡張機能は更新されており、リモート環境で適切に動作しますが、動作しないものに遭遇した場合は、その拡張機能について問題を報告してください。

拡張機能の作者の方へ

VS Code 拡張機能を作成している場合、リモート対応の新しい拡張機能 API を実装しました。たとえば、ブラウザウィンドウをロードするために open パッケージを使用する代わりに、拡張機能の作者は vscode.env.openExternal API を使用すべきです。これはブラウザをローカルで開きます。同様に、新しい clipboard クラスがあり、これは期待通りにローカルのクリップボードにコンテンツを配置します。

リモート環境で拡張機能を実行、テスト、デバッグする方法を含め、より多くの詳細は更新されたAPI ドキュメントで確認できます。

はじめに

ここまでお読みいただきありがとうございます！

Visual Studio Code のリモート開発を開始するための3つの簡単なステップを以下に示します。

1. Insiders ビルドをインストールします。Stable 版で利用可能になるまでは、リモート開発にはこれが必要です。Insiders ビルドは、最新の機能とバグ修正を毎日提供しています。安定性を心配しているのであれば、その必要はありません！私たちは Insiders ビルドを使用して VS Code を開発しており、万が一何かが壊れた場合でも Stable 版と並行してインストールできます (そして私たちに知らせてください)。

2. WSL、SSH、およびコンテナのサポートをインストールするRemote Development 拡張機能パックを入手します。これが最も簡単な始め方です。すべてが必要ない場合は、個々の拡張機能をアンインストールできます。

3. ドキュメントを読んでください。Dev Container サンプルを試してください。Python で開発している場合 (多くの人がそうでしょう！)、Dan Taylor のリモート Python 開発に関するブログ投稿も確認してください。

最後に、問題が発生した場合は、問題を報告してください。よくある質問の回答については、FAQ を参照してください。

ご意見をお聞かせください！

ハッピーコーディング、

@code チーム