Visual Studio Code | サーバーのファイルを直接編集する事を可能にする拡張機能「Remote SSH」

Visual Studio Code,Visual Studio Code 拡張機能

Visual Studio Code(VScode)でサーバー上のファイルを直接編集する事を可能にする拡張機能「Remote SSH」の設定や使い方を紹介しています。

当記事で紹介している環境は以下の通りです。

  • OSはWindows10
  • Visual Studio Code v1.56.2
  • Remote SSHのバージョン0.65.6(2021/05/20)
  • 接続するリモードサーバー xserver

最初はサーバーとの同期接続を可能にする拡張機能「SFTP」を利用していましたが、ローカルに落として編集、アップロードという流れは、用途的に不要でした。

「Remote SSH」では直接サーバー上のファイルを編集できますし、必要ならローカルにダウンロードも可能です。

拡張機能が複数必要だったりリモート接続までの設定が難しそうなイメージでしたが、実際は簡単にリモート接続の環境が実装できました。

秘密鍵の用意

秘密鍵の用意

秘密鍵を用意します。

xserverの場合は「アカウント」ー「SSH設定」ー「公開鍵認証用鍵ペアの生成」にてパスフレーズを入力して実行、自動的に秘密鍵(ユーザー名.key)がダウンロードされます。

秘密鍵の設置場所

秘密鍵の設置場所は指定はなく任意です。
userフォルダー内に設置する方法が多く紹介されています。

当方では他アプリケーションでも利用しており、「private-keys」というフォルダーを作成して以下の場所に設置しています。

C:/Users/user-name/private-keys/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」関連のコマンドリストを表示する事が可能です。

Remote SSHを設定する1

「Open SSH COnfiguration File…」を選択して設定ファイルを開きます。

初回時は以下の.sshフォルダーに「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)をクリックします。

Remote SSHでサーバーに接続する

接続するサーバーのOSを選択する(初回のみ)

初回接続時は、接続するサーバーのOSを問われますので該当するものを選択します。

xserverの場合は、Linuxを選択します。(2021年現在)

Select the platform of the remote host

パスフレーズを入力する(パスワード認証)

サーバーの秘密鍵で設定したパスフレーズを入力します。

開くディレクトリを選択

パスフレーズの入力後、リモート接続に成功すると開くサーバー内のディレクトリを選択します。

履歴と階層の一覧が表示されますので、選択します。

選択したディレクトリはリモートエクスプローラーのリストに追加されていきますので、2回目以降のアクセスは容易になります。

Remote SSHの設定

Remote SSHで設定を変更している、またはしたい項目です。

基本的にはタイムアウト以外はデフォルトのままで、大きな不満はなく使えています。

タイムアウトまでの時間

タイムアウトまでの時間はデフォルトで15分に設定されていますが、「Remote.SSH: Connect Timeout」にて変更可能です。

デフォルトで開くディレクトリ

方法を調べてはいませんが、デフォルトで開くディレクトリを設定できるはずなので、気が向いたら探してみようと思います。
アクセスしたディレクトリは履歴やリモートエクスプローラーのリストに追加されるので、不便でもないかもしれません。

PHPファイルなどの整形

「PHP Intelephense」を入れてphpコードの整形をしていますが、リモート環境だと整形が実行されません。
原因や対策を調べいます。

追記:そもそもの「PHP Intelephense」が無効になっていただけでした。

パスフレーズは設定や設定ファイルに記述して省略可能か

拡張機能の「sftp」やAtomの似たような機能を持つパッケージの「remote-ftp」では、設定ファイルにパスフレーズも指定して入力は省略できますが、「remote SSH」でも可能かどう。

セキュリティ面を考えれば、都度手動入力の方が良いのかもしれませんが、可能なら設定したいかも。