Visual Studio Code | サーバーのファイルを直接編集する事を可能にする拡張機能「Remote SSH」
Visual Studio Code（VScode）でサーバー上のファイルを直接編集する事を可能にする拡張機能「Remote SSH」の設定や使い方を紹介しています。
当記事で紹介している環境は以下の通りです。
- OSはWindows10
- Visual Studio Code v 1.56.2
- Remote SSHのバージョン 0.65.6（2021/05/20）
- 接続するリモードサーバー xserver
最初はサーバーとの同期接続を可能にする拡張機能「SFTP」を利用していましたが、ローカルに落として編集、アップロードという流れは、用途的に不要でした。
関連：Visual Studio Code | SFTPでサーバーと同期する拡張機能「SFTP」 | ONE NOTES
「Remote SSH」では直接サーバー上のファイルを編集できますし、必要ならローカルにダウンロードも可能です。
拡張機能が複数必要だったりリモート接続までの設定が難しそうなイメージでしたが、実際は簡単にリモート接続の環境が実装できました。
秘密鍵の用意
秘密鍵の用意
秘密鍵を用意します。
xserverの場合は「アカウント」ー「SSH設定」ー「公開鍵認証用鍵ペアの生成」にてパスフレーズを入力して実行、自動的に秘密鍵（ユーザー名.key）がダウンロードされます。
秘密鍵の設置場所
秘密鍵の設置場所は指定はなく任意です。
userフォルダー内に設置する方法が多く紹介されています。
当方では他アプリケーションでも利用しており、「private-keys」というフォルダーを作成して以下の場所に設置しています。
※フォルダー名、ファイル名に半角スペースが含まれている場合は、拡張機能が認識できずエラーが発生するようです。
C:/Users/user-name/private-keys/key-name.key
VSCodeの設定や拡張機能のデータが格納される「.vscode」フォルダーの中に配置しても問題ありません。
C:/Users/user-name/.vscode/key-name.key
Remote SSHのインストール
拡張機能から「Remote SSH」をインストールします。
「Remote SSH」をインストールすると自動的に「Remote SSH: Editing Configuration Files」も一緒にダウンロードされます。
Remote – SSH – Visual Studio Marketplace
Remote SSHの設定
「Remote SSH」のインストールが完了したら、サーバーに接続する為の設定ファイルを作成・編集します。
設定ファイルの作成
コマンドリストからも選択可能ですが、左下の緑色の部分をクリックして「Remote SSH」関連のコマンドリストを表示する事が可能です。
「Open SSH COnfiguration File…（SSH構成ファイルを開く）」を選択して設定ファイルを開きます。
初回時は以下の.sshフォルダーに「config」という名前の設定ファイルが作成されます。
編集する際は、同コマンドを使うか、直接このファイルにアクセスします。
configファイルは拡張機能の設定にて任意の場所を指定する事も可能です。
C:\Users\user-name\.ssh\config
設定ファイルの場所は、「Remote SSH」の設定から任意の場所に変更可能です。
設定ファイルを編集する
設置された「config」を編集します。
「IdentityFile（秘密鍵へのパス）」の項目がなければ追加します。
最低限必要な項目は以下のようになります。
Host xserver
HostName sv123456.xserver.jp
User サーバーのユーザー名
IdentityFile C:/Users/user-name/private-keys/key-name.key
Port 10022| Host | 任意の設定名 |
| HostName | サーバーのホスト名 |
| User | サーバーのユーザー名 |
| IdentityFile | 設置した秘密鍵のパス |
| Port | サーバーのポート番号（xserverは10022） |
サーバーにリモート接続する
秘密鍵の取得、設定ファイルの編集が完了したらサーバーにリモート接続を試します。
リモート接続を開始する
サイドメニューからリモートエクスプローラーを開いて、作成した設定ファイルの「Host」と同じ名前のものがリストされていますので、その右側にあるボタン（Content to Host in New Window）をクリックします。
接続するサーバーのOSを選択する（初回のみ）
初回接続時は、接続するサーバーのOSを問われますので該当するものを選択します。
xserverの場合は、Linuxを選択します。（2021年現在）
パスフレーズを入力する（パスワード認証）
サーバーの秘密鍵で設定したパスフレーズを入力します。
開くディレクトリを選択
パスフレーズの入力後、リモート接続に成功すると開くサーバー内のディレクトリを選択します。
履歴と階層の一覧が表示されますので、選択します。
選択したディレクトリはリモートエクスプローラーのリストに追加されていきますので、2回目以降のアクセスは容易になります。
Remote SSHの設定
Remote SSHで設定を変更している、またはしたい項目です。
基本的にはタイムアウト以外はデフォルトのままで、大きな不満はなく使えています。
タイムアウトまでの時間
タイムアウトまでの時間はデフォルトで15分に設定されていますが、「Remote.SSH: Connect Timeout」にて変更可能です。
デフォルトで開くディレクトリ
方法を調べてはいませんが、デフォルトで開くディレクトリを設定できるはずなので、気が向いたら探してみようと思います。
アクセスしたディレクトリは履歴やリモートエクスプローラーのリストに追加されるので、不便でもないかもしれません。
PHPファイルなどの整形
「PHP Intelephense」を入れてphpコードの整形をしていますが、リモート環境だと整形が実行されません。
原因や対策を調べいます。
追記：そもそもの「PHP Intelephense」が無効になっていただけでした。
パスフレーズは設定や設定ファイルに記述して省略可能か
拡張機能の「sftp」やAtomの似たような機能を持つパッケージの「remote-ftp」では、設定ファイルにパスフレーズも指定して入力は省略できますが、「remote SSH」でも可能かどうか。
セキュリティ面を考えれば、都度手動入力の方が良いのかもしれませんが、可能なら設定したいかも。