非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

【Xserver VPS】VS Code からRemote SSHで接続！開発が楽になった

   

これまでのXserver VPSでの開発は、Windowsのコマンドプロンプト上でSSHで接続し、nanoというコマンド上で動くエディタを使ってファイルを編集していました。当然ながらGUI特有のシンタックスハイライトやコード補完、複数ファイルの編集などが難しく非常に手間がかかりました。

そこで、VS Codeの拡張機能を使って接続しWindows上から開発できるよう環境構築を行ったので手順を書き留めておきます。

VS Code拡張機能のインストール

まず、VS Codeを起動し、以下の拡張機能をインストールします。

  • Remote – SSH (Microsoft製)

 

秘密鍵ファイル（.pem）の準備

Xserver VPSの契約時にダウンロードした秘密鍵（例: satoshiu71.pem）を、Windowsのユーザーディレクトリにある .ssh フォルダに移動させます。

  • 移動先例: C:\Users\{Windowsユーザー名}\.ssh\satoshiu71.pem
    • .ssh フォルダが存在しない場合は作成する。
    • 重要: この秘密鍵は非常に重要なので、厳重に管理！

VS CodeのSSH設定ファイルの編集

VS CodeからVPSに接続するための設定を記述します。

  1. VS Codeで Ctrl + Shift + P (macOSなら Cmd + Shift + P) を押し、コマンドパレットを開きます。
  2. 「Remote-SSH: 設定ファイルを開く… (Open SSH Configuration File…)」と入力し、選択します。
  3. 表示されるリストから、通常は一番上の C:\Users\{Windowsユーザー名}\.ssh\config を選びます。
  4. 以下の内容を追記（または既存の内容を編集）して保存します。
Host satoshi71-vps
    HostName 16X.XX.XX.XXX  # VPSのIPアドレス
    User root               # VPSのユーザー名 (rootまたはXserverで指定したユーザー)
    IdentityFile "C:\Users\{Windowsユーザー名}\.ssh\satoshiu71.pem" # 秘密鍵のフルパス

 

Host satoshi71-vps の部分は、VS Code上で表示される接続名なので、自由に分かりやすい名前に変更しましょう。

 

VS CodeからVPSへ接続する

設定が完了したら、いよいよ接続します。

  1. VS Codeの左下にある 「リモートインジケーター（><のような青いアイコン）」 をクリックします。
  2. 上部に出るコマンドパレットから 「ホストに接続する…」 を選択します。
  3. 先ほど設定ファイルに記述した satoshi71-vps を選択します。
  4. 初回接続時は、フィンガープリントの確認や、秘密鍵にパスフレーズを設定している場合はパスフレーズの入力を求められます。

 

VPS上のフォルダーを開く

接続が成功すると、新しいVS Codeウィンドウが開きます。

  1. 左側の「エクスプローラー」ビュー（ファイルアイコン）をクリックします。
  2. 「フォルダーを開く」 をクリックし、VPS上の作業ディレクトリ（例: /root/my-website）を入力して開きます。
  3. 信頼するか尋ねられたら「はい」を選択します。

これで、/root/my-website 以下のファイルがVS Codeのエクスプローラーに表示され、編集可能になります。

 

スポンサーリンク

 - Xserver VPS