SSH経由でのリモート開発

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

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

前提条件

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

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ポータルから新しいVMを作成できます。Azureポータルで「Virtual Machines」を検索し、追加を選択します。そこから、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公開キーのソースドロップダウンで既存の公開キーを使用するを選択します。公開キーを取得し、id_ed25519.pubのすべての内容をSSH公開キーにコピーして、VM設定に貼り付けます。また、選択したポートを許可するを選択し、受信ポートの選択ドロップダウンリストからSSH (22)を選択して、VMが受信SSHトラフィックを受け入れるようにします。

Add SSH public key to VM

自動シャットダウン

Azure VMを使用する優れた機能の1つは、自動シャットダウンを有効にする機能です (正直なところ、私たちは皆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ポータルに戻り、作成した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で実行されます。Webアプリは仮想マシン上で実行されているため、ローカルブラウザのlocalhost:3000では何も表示されません。

ポート転送

ローカルマシンからWebアプリを閲覧できるようにするには、ポート転送と呼ばれる別の機能を活用できます。

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

Enter the port to forward