SSH 経由のリモート開発

このチュートリアルでは、Visual Studio Code の Remote - SSH 拡張機能を使用して、Azure 上に仮想マシン (VM) を作成し、それに接続する手順を説明します。ソースコードがローカルにある場合と同様に、VS Code でリモートマシン上で編集およびデバッグする方法を示すために、Node.js Express Web アプリを作成します。

注: Linux VM は、ローカルホスト、オンプレミス、Azure、またはその他のクラウドなど、どこにホストされていてもかまいません。ただし、選択した Linux ディストリビューションが前提条件を満たしている必要があります。

前提条件

開始するには、次の手順を実行する必要があります。

OpenSSH 互換の SSH クライアント (PuTTY はサポートされていません) をインストールします。
Visual Studio Code をインストールします。
Azure サブスクリプションが必要です (Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください)。

拡張機能をインストールする

Remote - SSH 拡張機能は、SSH ホストに接続するために使用されます。

Remote - SSH 拡張機能をインストールする

Remote - SSH extension

Remote - SSH

Remote - SSH 拡張機能をインストールすると、左端に新しいステータスバー項目が表示されます。

Remote Status bar item

リモートステータスバー項目は、VS Code が実行されているコンテキスト (ローカルまたはリモート) をすばやく示し、項目をクリックすると、Remote - SSH コマンドが表示されます。

Remote - SSH commands

仮想マシンの作成

既存の Linux 仮想マシンがない場合は、Azure portal を使用して新しい VM を作成できます。Azure portal で、「仮想マシン」を検索し、[追加] を選択します。そこから、Azure サブスクリプションを選択し、リソースグループをまだお持ちでない場合は、新しいリソースグループを作成できます。

注: このチュートリアルでは Azure を使用していますが、Linux VM は、Linux ディストリビューションが前提条件を満たしている限り、どこにホストされていてもかまいません。

Create a virtual machine

これで、VM の名前、サイズ、基本イメージなどの詳細を指定できます。この例では Ubuntu Server 18.04 LTS を選択しますが、他の Linux ディストリビューションの最新バージョンを選択して、VS Code のサポートされている SSH サーバーを確認することもできます。

Virtual machine instance details

SSH のセットアップ

VM への認証方法には、SSH 公開/秘密キーペアまたはユーザー名とパスワードなど、いくつかの方法があります。キーベース認証を使用することをお勧めします (ユーザー名/パスワードを使用すると、拡張機能によって資格情報を複数回入力するように求められます)。Windows を使用していて、PuttyGen を使用してキーを既に作成している場合は、再利用できます。

SSH キーを作成する

SSH キーペアがない場合は、bash シェルまたはコマンドラインを開き、次のように入力します。

ssh-keygen -t ed25519

これにより、SSH キーが生成されます。次のプロンプトで Enter キーを押して、キーをデフォルトの場所 (ユーザーディレクトリの下の .ssh という名前のフォルダーとして) に保存します。

ssh-keygen output

次に、セキュアなパスフレーズを入力するように求められますが、空白のままにすることができます。これで、新しい公開 SSH キーを含む id_ed25519.pub ファイルが作成されます。

注: Ed25519 アルゴリズムをサポートしていないレガシーシステムを使用している場合は、代わりに rsa を使用できます: ssh-keygen -t rsa -b 4096。

SSH キーを VM に追加する

前の手順で、SSH キーペアを生成しました。[SSH 公開キーソース] のドロップダウンで [既存の公開キーを使用する] を選択して、生成したばかりの公開キーを使用できるようにします。公開キーを取得し、SSH 公開キーの id_ed25519.pub の内容全体をコピーして、VM のセットアップに貼り付けます。また、[選択されたポートを許可する] を選択し、[受信ポートを選択] ドロップダウンリストから [SSH (22)] を選択して、VM がインバウンド SSH トラフィックを受け入れるようにする必要があります。

Add SSH public key to VM

自動シャットダウン

Azure VM を使用するクールな機能は、自動シャットダウンを有効にする機能です (なぜなら、VM をオフにするのを忘れてしまうのは誰にでも起こりうることだからです…)。[管理] タブに移動すると、VM を毎日シャットダウンする時間を設定できます。

Virtual machine auto-shutdown

[確認と作成]、[作成] の順に選択すると、Azure が VM をデプロイします。

デプロイが完了したら (数分かかる場合があります)、仮想マシンの新しいリソースビューに移動します。

SSH を使用して接続する

SSH ホストを作成したので、接続してみましょう!

ステータスバーの左下隅にインジケーターが表示されていることに気付いたでしょう。このインジケーターは、VS Code が実行されているコンテキスト (ローカルまたはリモート) を示します。インジケーターをクリックして、リモート拡張機能コマンドのリストを表示します。

Remote extension commands

[ホストに接続...] コマンドを [Remote-SSH] セクションから選択し、VM の接続情報を次の形式で入力してホストに接続します: user@hostname。

user は、SSH 公開キーを VM に追加するときに設定したユーザー名です。hostname については、Azure portal に戻り、作成した VM の [概要] ペインで [パブリック IP アドレス] をコピーします。

Virtual machine public IP address

Remote - SSH で接続する前に、コマンドプロンプトで ssh user@hostname を使用して VM に接続できることを確認できます。

注: ssh: connect to host <host ip> port 22: Connection timed out というエラーが発生した場合は、VM の [ネットワーク] タブから NRMS-Rule-106 を削除する必要がある場合があります。

Virtual machine list of NRMS rules

接続情報テキストボックスにユーザーとホスト名を設定します。

Set user and host name

VS Code が新しいウィンドウ (インスタンス) を開きます。次に、SSH ホストで「VS Code Server」が初期化されているという通知が表示されます。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、Linux Ctrl+`))、Windows を使用している場合でも、bash シェル内で作業していることがわかります。

Checking uname in the terminal

bash シェルを使用して、VM 上のファイルシステムを参照できます。[ファイル] > [フォルダーを開く] を使用して、リモートホームディレクトリ上のフォルダーを参照および開くこともできます。

Remote open folder

Node.js アプリケーションを作成する

このステップでは、簡単な Node.js アプリケーションを作成します。アプリケーションジェネレーターを使用して、ターミナルからアプリケーションをすばやくスキャフォールドアウトします。

Node.js と npm をインストールする

統合ターミナルから (⌃` (Windows、Linux Ctrl+`))、Linux VM のパッケージを更新してから、Node.js (npm (Node.js パッケージマネージャー) を含む) をインストールします。

sudo apt-get update
curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

インストールを確認するには、次を実行します。

node --version
npm --version

Express ジェネレーターをインストールする

Express は、Node.js アプリケーションを構築および実行するための一般的なフレームワークです。Express Generator ツールを使用して、新しい Express アプリケーションをスキャフォールド (作成) できます。Express Generator は npm モジュールとして出荷され、npm コマンドラインツール npm を使用してインストールされます。

sudo npm install -g express-generator

-g スイッチは、Express Generator をマシンにグローバルにインストールするため、どこからでも実行できます。

新しいアプリケーションを作成する

これで、myExpressApp という名前の新しい Express アプリケーションを次を実行して作成できます。

express myExpressApp --view pug

--view pug パラメーターは、pug テンプレートエンジンを使用するようにジェネレーターに指示します。

アプリケーションのすべての依存関係をインストールするには、新しいフォルダーに移動して npm install を実行します。

cd myExpressApp
npm install

アプリケーションを実行する

最後に、アプリケーションが実行されていることを確認しましょう。ターミナルから、npm start コマンドを使用してアプリケーションを起動し、サーバーを起動します。

npm start

Express アプリは、デフォルトで http://localhost:3000 で実行されます。Web アプリは仮想マシンで実行されているため、ローカルブラウザーの localhost:3000 には何も表示されません。

ポートフォワーディング

ローカルマシン上の Web アプリを参照できるようにするには、ポートフォワーディングと呼ばれる別の機能を利用できます。

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

Enter the port to forward