🚀 VS Code で

Visual Studio Code でリモート SSH

2019年7月25日 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 で、"Virtual Machines" を検索し、追加 を選択します。そこから、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 を使用するクールな機能は、自動シャットダウンを有効にできることです (なぜなら、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 ウェブフレームワークを使用します。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 拡張機能がリモートマシンにまだインストールされていない場合に、Microsoft Python 拡張機能を推奨する通知が表示されます。

Python extension recommendation

インストール を選択し、VS Code をリロードすると、リモートマシンで VS Code の IntelliSense と色分けが表示され始めます。

python IntelliSense

アプリを実行するには、F5 キーを押し、Flask デバッグ構成を選択します。Python デバッグコンソールで、アプリがポート 5000 の localhost で実行されていることがわかります。ただし、localhost は現在、ローカルマシンではなく、リモートサーバーを指しています。ローカルマシン上のウェブアプリを閲覧できるようにするために、ポートフォワーディングと呼ばれる別の機能を利用します。

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

Enter the port to forward

接続に "browser" という名前を付けます。

Name the port

サーバーはポート 5000 のトラフィックをローカルマシンに転送します。http://localhost:5000 を参照すると、実行中のウェブアプリが表示されます。

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