SSH経由でのリモート開発

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

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

前提条件

始めるには、以下の手順を完了している必要があります

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

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

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

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

Remote - SSH extension

リモート - SSH

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

Remote Status bar item

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

Remote - SSH commands

仮想マシンの作成

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

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

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。

VMへのSSHキーの追加

前の手順で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は新しいウィンドウ (インスタンス) を開きます。その後、「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、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アプリはデフォルトでhttps://:3000で実行されます。ウェブアプリが仮想マシンで実行されているため、ローカルブラウザのlocalhost:3000には何も表示されません。

ポートフォワーディング

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

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

Enter the port to forward