【Visual Studio Code】sshでサーバにあるファイルを直接編集する方法「Remote – SSH」

2020年11月9日システムVisual Studio Code

【Visual Studio Code】sshでサーバにあるファイルを直接編集する方法「Remote - SSH」
【Visual Studio Code】sshでサーバにあるファイルを直接編集する方法「Remote – SSH」

どうも、UT(@ut_1029)です。

Visual Studio Codeのプラグイン「Remote – SSH」でサーバにあるファイルを直接編集する方法について紹介します。サーバへの接続はsshで行います。

  • Visual Studio Code:1.50.1
  • Remote – SSH:0.55.0

秘密鍵の作成方法については割愛します。

Visual Studio Codeでサーバにsshで接続してファイルを編集する方法

Visual Studio CodeでサーバにSSHで接続して、サーバのファイルを直接編集する方法を解説します。

「Remote – SSH」をVisual Studio Codeへインストール

まずVisual Studio Codeへプラグインの「Remote – SSH」をインストールします。

手順1

Visual Studio Codeのプラグイン「Remote - SSH」をインストール
Visual Studio Codeのプラグイン「Remote – SSH」をインストール

画面の左メニューの一番下にあるアイコンのExtensionsをクリックします。

手順2

Visual Studio Codeのプラグイン「Remote - SSH」をインストール
Visual Studio Codeのプラグイン「Remote – SSH」をインストール

「Search Extensions in Marketplace」のテキストへ’ssh’と入力します。すると「Remote – SSH」が表示されるので、クリックします。

「Remote – SSH」をクリックすると、画面右へ「Remote – SSH」の説明が表示されます。

手順3

「Remote – SSH」の説明の中にある「Install」ボタンをクリックします。

これで「Remote – SSH」のインストールは完了です。

サーバへSSH接続する準備

次にサーバへSSHで接続するための準備を行います。

sshするための秘密鍵を作成

WindowsだとPUTTYgenなどで作成できます。Macだとターミナルを開いてssh-keygenコマンドを実行することで作成できます。

  • Windows
    • PUTTYgenというツールで作成
  • Mac
    • ターミナルでssh-keygenコマンドを実行して作成

そうして作った秘密鍵をホームディレクトリ直下の.sshへ配置します。

  • Windows
    • C:\Users\ユーザ名\.ssh
  • Mac
    • /Users/ユーザ名/.ssh

ホームディレクトリ
PCにログインしているユーザ専用のディレクトリ。

ssh接続する際の~/.ssh/configファイルを作成

SSHで接続する情報を記載するconfigファイルをホームディレクトリ直下の.sshへ作成します。

Host ホスト名
	HostName IPアドレス
	IdentityFile ~/.ssh/ファイル名.ppk
	User ユーザ名

configファイルへ記載する情報

  • Host
    • 接続するサーバの名前(任意)
  • HostName
    • 接続するサーバのIPアドレス
  • IdentityFile
    • SSHで接続するための秘密鍵
  • User
    • SSHで接続するユーザ名

「Remote – SSH」でサーバにSSHで接続

ここからVisual Studio Codeへ戻ってSSHでサーバへ接続します。

手順1

Visual Studio Codeの「Remote - SSH」でサーバにSSHで接続
Visual Studio Codeの「Remote – SSH」でサーバにSSHで接続

画面左下のアイコンをクリックします。そして「Remote-SSH: Connect to Host…」をクリックします。

手順2

そうすると先ほど作成したconfigファイルへ記載したホスト(サーバ)が表示されるので、SSHで接続するホストを選択します。

Visual Studio Codeの「Remote - SSH」でサーバにSSHで接続
Visual Studio Codeの「Remote – SSH」でサーバにSSHで接続

「Remote – SSH」でサーバのディレクトを開く

Visual Studio Codeでサーバのディレクトリを開きます。

手順1

Visual Studio Codeの「Remote - SSH」でサーバのディレクトを開く
Visual Studio Codeの「Remote – SSH」でサーバのディレクトを開く

画面左メニューのアイコンをクリックして、「Open Folder」をクリックします。

手順2

サーバで開きたいディレクトリのパスを入力します。そしてOKボタンをクリックすると、左へディレクトリ階層ツリーが表示されます。

あとは、編集したいファイルを開いて作業します。

「Remote – SSH」で接続したサーバから切断

最後にSSHで接続したサーバから切断する方法を紹介します。

手順1

Visual Studio Codeの「Remote - SSH」で接続したサーバから切断
Visual Studio Codeの「Remote – SSH」で接続したサーバから切断

画面左下にあるアイコンをクリックします。そして「Close Remote Connection」をクリックします。

これでサーバから切断されます。

まとめ

今回はVisual Studio Codeの「Remote – SSH」でサーバにSSHで接続して、ファイルを編集する方法を紹介しました。

自分は直接SSHで接続してviでファイル編集するタイプなので利用しませんが、Visual Studio Codeに慣れている人は便利ですよね。

次はgitの操作についても調べてみようと思っています。

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

2020年11月9日システムVisual Studio Code

Posted by UT