Zenn
🐶

VSCodeでSFTP（さくらサーバー）

に公開
VS Code
WordPress
SSH
SFTP
さくら
tech

はじめに

VSCodeのsftpという拡張機能を使い、SSHの認証方式の一つとして公開鍵認証を使ってさくらサーバーに接続。
必要なファイルをさくらサーバーからローカルにダウンロードし効率よく作業できるようにしました。
ここではすでにWordPress化したフォルダがさくらサーバーにアップされているものとします。
Mac環境で進めます。

VSCodeで拡張機能インストール

VSCodeを開き、Extentionsタブを選び検索窓にsftpと入力すると画像の拡張が出てくるのでインストールする。

公開鍵と秘密鍵の登録

SSHでさくらサーバーに接続

さくらサーバーのアカウント情報を使います。
最初にy?n?と聞かれるので、yesと入力。

ssh ＜FTPアカウント＞@＜IPアドレス＞

さくらサーバーのユーザー名とIPアドレスはサーバー情報のところにあります。

password: さくらサーバーのパスワードを入力。
ログインに成功

FTPアカウント@IPアドレス's password:

Welcome to FreeBSD!

鍵の作成

.sshフォルダがなかったら作成する

mkdir ~/.ssh

.sshディレクトリに移動

cd ~/.ssh

ローカルで公開鍵を作成

ssh-keygen -t rsa

このような文章が出てくるので一つ目はそのままEnter。
passphrase（パスフレーズ）も任意ですが、もし秘密鍵が流出してもパスフレーズがないと使えない、ログインできないため安全性が増すので設定しておきましょう。

Enter file in which to save the key (/home/＜FTPアカウント＞/.ssh/id_rsa):＜そのままEnter＞
Enter passphrase (empty for no passphrase):＜任意＞
Enter same passphrase again:＜任意＞

.sshの中を確認すると、id_rsa(秘密鍵)とid_rsa.pub(公開鍵)が生成されました。

ls
id_rsa		id_rsa.pub

公開鍵をさくらサーバーに転送（authorized_keysに変換）

# scp ~/.ssh/id_rsa.pub ＜FTPアカウント＞@＜IPアドレス＞:/home/＜FTPアカウント＞/.ssh/authorized_keys

...
No matching host key fingerprint found in DNS.
Are you sure you want to continue connecting (yes/no)?

FTPアカウント@IPアドレス's password:

continue connecting (yes/no)? yesと打ってEnter
password: さくらサーバーのパスワード入力。

authorized_keysファイルが作成され、さくらサーバーに転送完了

ls
authorized_keys	id_rsa		id_rsa.pub	known_hosts

パーミッション変更

chmod 600 オーナーのみ読み書き可
chmod 700 オーナーのみアクセス可

chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

秘密鍵（id_rsa）をローカルに保存

隠しファイル表示は⇧⌘. （コマンドシフトピリオド）
FileZillaなどでさくらサーバーの.sshにアクセスしid_rsaをコピーして、ローカルの隠しファイル、/Users/ユーザー/.ssh/id_rsaに保存。

SFTPで接続設定

空のフォルダを作成し、VSCodeで開く。
⇧⌘Pで検索し、SFTP:Configを選択するとsftp.jsonの雛形ファイルが生成される。

それをこのファイルのように修正する。

sftp.json
{
//   任意ですが分かりやすい名前をつける
  "name": "vscode-sftp",
//   さくらサーバーのIPアドレスまたはドメイン
  "host": "＜IPアドレスまたはドメイン＞",
  "protocol": "sftp",
  "port": 22,
//   FTPアカウント
  "username": "＜FTPアカウント＞",
//   秘密鍵の保管先ファイル
  "privateKeyPath": "/Users/＜ユーザー＞/.ssh/id_rsa",
//   鍵作成時に設定していればそのpassphrase（パスフレーズ）
  "passphrase": "＜パスフレーズ＞",
//   さくらサーバー上のディレクトリ（themes配下をコピーする）
  "remotePath": "/home/＜FTPアカウント＞/www/vscode-sftp/wp-content/themes/vscode-sftp",
//   ローカル作業ディレクトリ（上で作った空フォルダの場所を指定する、ここにダウンロードされる）
  "context": "/Users/＜ユーザー＞/Desktop/workspace/sftp",
//   ファイル保存時に自動アップロードするかどうか
  "uploadOnSave": true,
//   ファイル変更を監視し自動アップロードするかどうか
  "watcher": {
    "files": "**/*.{js,css,html}",
    "autoUpload": true
  },
  "ignore": [".vscode", ".git", ".DS_Store", "sftp.json"]
}

watcherの設定

watcherを設定することで、VSCodeでファイルを修正した時にMacだと⌘Sで保存しなくても自動的にサーバーに反映され、ブラウザをリロードするだけで修正が反映されます。
①sftp.json

sftp.json
 "watcher": {
    "files": "**/*.{js,css,html}",
    "autoUpload": true
  },

②settings.json

settings.json
  "files.autoSave": "afterDelay"

ファイル一式をサーバーからダウンロード

⇧⌘Pで検索し、
SFTP:Sync Remote → Localでsftp.jsonの"remotePath"で設定したファイルをさくらサーバーから一式ダウンロードします。

ダウンロード先フォルダを選択

さくらサーバーからファイル一式のダウンロードが完了しました。

ファイルや画像のアップロード

画像やファイルをVSCodeにドラッグ&ドロップしたら、そのファイルや画像の上でマウスを右クリックしUpload Fileを選択すればそのままサーバーにアップロードされます。
わざわざFTPソフトを使うよりも確実に作業効率が上がります。

これでそのままScssも使え修正〜保存までの無駄なクリック数も減らすことができます。

Discussion