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

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

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

事前準備

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

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

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

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

VSCodeの拡張機能SFTP

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

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

# 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 を、パソコンに保存。VSCodeの設定ファイルにそのパスを書くのでちゃんとした場所に保存すべし。

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

VSCodeで設定する

  1. VSCodeのワークスペースを目的の場所(サーバと同期したいフォルダ)にしておく
  2. + shift + P で、コマンドパレットを出す
  3. SFTP: Config と入力
  4. 設定ファイル .vscode/sftp.json が開く
  5. 下記を参考に書き換える
{
  "name": "red-barchetta", // お好きなものを
  "host": "red-barchetta.sakura.ne.jp", // FTPサーバ名
  "protocol": "sftp", // 他にftp
  "port": 22, // FTPなら21
  "username": "red-barchetta", // FTPアカウントのユーザ名
  "password": "サーバのFTPパスワード",

// テーマの名前が 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/**"
  ]
}

VSCodeでアップロード、ダウンロードしてみる

VSCode左側のエクスプローラーペインで目的のファイルを右クリックしたら、メニューの中に色々あるのでそれでアップロード、ダウンロード、シンク等できる様になってる筈。

下図はmacでの右クリックメニュー例。

ファイルを右クリックしアップロード
フォルダを右クリックしローカルにダウンロード

ラフな説明だがまあこんなところ。途中つまづいたけど意外に簡単にいけた。これでまたVSCodeの株が上がったな。素晴らしき哉、VSCode。

メディアライブラリの不要画像を一掃する
Service

SandY Design Studioでは3つのサービスを提供しております。

Sound
design

ミキシング・マスタリング・レコーディング・編曲・作曲・CD, YouTube, クラウド音楽制作支援・CDジャケットデザイン

Web
design

WordPressによるCMSホームページ制作・Webサーバー・メールサーバー設定・ホームページ運営に関するあらゆる支援

Officework
design

個人事業主、小規模法人のIT活用支援・クライアントサーバー導入・パソコン教室・人事給与, 経理, 総務部門の実務支援

お問い合わせ・ご依頼

contact