VSCodeでSFTP接続 SSH秘密鍵の設定方法

最&高なエディタ、VSCode。Visual Studio Code な。サーバへのアップもそのまま出来たら最強ということで設定をやってみる。FTPでもいいがここはやはりSFTP接続としたいところ。諸々のサイトを参考にやってみたら、、、まあアチコチつまづきながらもうまくいったので備忘録として残しておきたい。

サーバーは「さくらインターネット」での設定だ。

Contents

事前準備

やるにあたって事前に必要な情報は以下の3つ

FTPサーバ名
FTPアカウント名
FTPアカウントのパスワード

まあ当然ですわな。ちなみにここでは、サーバ名を red-barchetta.sakura.ne.jp 、アカウント名を red-barchetta と仮定する。

あと、VSCode に拡張機能 SFTP をインストールしておくこと。

ターミナルからSSHでサーバーへログイン

# FTPアカウントのユーザ名@FTPサーバ名
ssh red-barchetta@red-barchetta.sakura.ne.jp

# 初めてSSH接続するサーバーの場合、下記メッセージが表示される場合あり 2022/4/9追記
# その場合、 yes と入力
The authenticity of host 'red-barchetta.sakura.ne.jp (133.167.8.49)' cant be established.
ECDSA key fingerprint is SHA256:（長尺の暗号）.
Are you sure you want to continue connecting (yes/no)?

# FTPサーバのパスワードを入力
red-barchetta@red-barchetta.sakura.ne.jp's password: 

# ログイン成功したらこうなる
FreeBSD 11.2-RELEASE-p14 (GENERIC) #0: Mon Aug 19 22:38:50 UTC 2019

Welcome to FreeBSD!

%

SFTP接続のためのSSH秘密鍵を生成する

# 今いる場所を確認しておくと
% pwd
/home/red-barchetta

# ディレクトリ内容のリスティングしてみた（別にしなくてよし）
% ls -1 # -1 はタテ表示の意味。　-a 付けるとピリオドで始まる .ssh も表示される
MailBox
db
dead.letter
log
ports
sakura_pocket
sblo_files
tmp
www
% 

# .sshディレクトリへ移動（なければ mkdir で作る）
% cd ~/.ssh
% pwd
/home/red-barchetta/.ssh

# 秘密鍵（と公開鍵）を作る
% ssh -keygen -t rsa # これでハマった(;_;)
Bad escape character 'ygen'. # エラーが出た

# sshとオプションは繋げるんだとさ（オプションじゃなくssh-keygenというコマンドw）
% ssh-keygen -t rsa
Generating public/private rsa key pair.

# これから作る鍵の保存場所は()の中、嫌ならパスを入力せよ
Enter file in which to save the key (/home/red-barchetta/.ssh/id_rsa): 

# 今後使う暗号（パスワード）を今決めてここに入力せよ
Enter passphrase (empty for no passphrase): 

# もう一回
Enter same passphrase again: 

# 出来たってよ
Your identification has been saved in /home/red-barchetta/.ssh/id_rsa. # 秘密鍵
Your public key has been saved in /home/red-barchetta/.ssh/id_rsa.pub. # 公開鍵
The key fingerprint is:
# この下は何やら暗号とアスキーアートみたいなのも出てくるが無視

# ディレクトリ内容のリスティングしてできてるか確認
% ls
id_rsa		id_rsa.pub
%
# 無事秘密鍵の生成が完了

SSH秘密鍵をローカルに保存する

今しがたサーバ上で生成されたSSH秘密鍵 id_rsa を、パソコンに保存。これは普通にFTPでダウンロードするがよろし。VSCodeの設定ファイルにそのパスを書くのでちゃんとした場所に保存すべし。

セオリーとしては ~/.ssh に秘密鍵を保管するのだが、使用中のパソコンで複数のサーバに繋げたい場合は渋滞するし他の場所に保管しかない。ただ、秘密鍵をセオリー通り ~/.ssh/id_rsa とした場合、後の設定で鍵を指定しなくてもこの鍵が自動的に使われる模様。

VSCodeで設定する

VSCodeのワークスペースを目的の場所（サーバと同期したいフォルダ）にしておく
⌘ + shift + P で、コマンドパレットを出す
SFTP: Config と入力
設定ファイル .vscode/sftp.json が開く
下記を参考に書き換える

{
  "name": "red-barchetta", // お好きなものを
  "host": "red-barchetta.sakura.ne.jp", // FTPサーバ名
  "protocol": "sftp", // 他にftp
  "port": 22, // FTPなら21
  "username": "red-barchetta", // FTPアカウントのユーザ名
  "password": "サーバのFTPパスワード",

// WordPressフォルダが wp 、テーマの名前が limelight （仮称）だった場合
  "remotePath": "/home/red-barchetta/www/wp/wp-content/themes/limelight",

// さっき生成した秘密鍵 id_rsa をホームディレクトリの /Website/red-barchetta/.ssh に保存したとして
  "privateKeyPath": "~/Website/red-barchetta/.ssh/id_rsa",
  "passphrase": "さっきサーバで決めた暗号（パスワード）",

// ファイルを保存した時、勝手にアップロードさせるかどうか
  "uploadOnSave": false,

// 同期から除外するもの
  "ignore": [
    "**/.vscode/**",
    "**/.git/**",
    "**/.DS_Store",
    ".gitignore",
    "**/.ssh/**"
  ]
}