【Visual Studio Code】sshでサーバにあるファイルを直接編集する方法「Remote – SSH」
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
画面の左メニューの一番下にあるアイコンのExtensionsをクリックします。
手順2
「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
画面左下のアイコンをクリックします。そして「Remote-SSH: Connect to Host…」をクリックします。
手順2
そうすると先ほど作成したconfigファイルへ記載したホスト(サーバ)が表示されるので、SSHで接続するホストを選択します。
「Remote – SSH」でサーバのディレクトを開く
Visual Studio Codeでサーバのディレクトリを開きます。
手順1
画面左メニューのアイコンをクリックして、「Open Folder」をクリックします。
手順2
サーバで開きたいディレクトリのパスを入力します。そしてOKボタンをクリックすると、左へディレクトリ階層ツリーが表示されます。
あとは、編集したいファイルを開いて作業します。
「Remote – SSH」で接続したサーバから切断
最後にSSHで接続したサーバから切断する方法を紹介します。
手順1
画面左下にあるアイコンをクリックします。そして「Close Remote Connection」をクリックします。
これでサーバから切断されます。
まとめ
今回はVisual Studio Codeの「Remote – SSH」でサーバにSSHで接続して、ファイルを編集する方法を紹介しました。
自分は直接SSHで接続してviでファイル編集するタイプなので利用しませんが、Visual Studio Codeに慣れている人は便利ですよね。
次はgitの操作についても調べてみようと思っています。
1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト