SFTP拡張機能の概要

拡張機能のSFTPを使って、Visual Studio Code（以下VSC）で保存したファイルを自動的にサーバにアップロードする方法を説明します。拡張機能のインストール方法は下記ページを参考にしてください。

拡張機能・マーケットプレイス

SFTP拡張機能はマーケットプレイスの検索ボックスで「SFTP」で検索するか、以下のサイトからダウンロードしてインストールしてください。

VSCマーケットプレイス：SFTP拡張機能

SFTP接続の設定例

インストールしたら、SFTPの接続設定を行います。Windows/Linux では［Ctrl］+［Shift］+［P］、Mac では［Cmd］+［Shift］+［P］でコマンドパレットを開き、SFTP: config コマンドを実行します。

SFTP: configを実行すると、sftp.jsonファイルが開かれます。このファイルにファイルを同期したいSFTPの設定をおこなっていきます。このファイルはプロジェクトルートの.vscodeディレクトリに作成されます。

簡単な設定例は次のようになります。

※JSONファイルはコメント構文が使えませんが、説明のために一部コメントを使っています。コピーして使う際はコメントを削除してください。

{
	// 任意の設定名
	"name": "exampleサーバ",
	// リモートサーバのホスト名
	"host": "example.com",
	// 接続プロトコル
 	"protocol": "sftp",
	// 接続ポート番号
	"port": 22,
	// リモートサーバのユーザ名
	"username": "username",
	// リモートのアップロードディレクトリのパス
	"remotePath": "/var/www/htdocs/",
	// リモートログイン用の秘密鍵のパス
	"privateKeyPath": "/Users/user/Documents/ssh/id_rsa.ppk",
	// 保存時に自動的にアップロードする
	"uploadOnSave": true
}

その他、様々な設定項目があるので、以下で紹介します。

{
	"name": "任意の設定名",
	"protocol": "sftp",
	"host": "リモートサーバのホスト名",
	"port": 22,
	"context": "ローカルのアップロード対象 例：dist",
	"username": "リモートサーバのユーザ名",
	"privateKeyPath": "リモートログイン用の秘密鍵のパス 例：/Users/foo/.ssh/id_rsa",
	"remotePath": "リモートのアップロードディレクトリのパス 例：/home/www/example.jp",
	// ※WindowsのC:\といったドライブ表記は/に置換する
	"ignore": [
		// アップロードから除外するファイル
		".vscode",
		".git",
		".DS_Store"
	],
	"sshConfigPath": "ssh設定のパス 例：/Users/foo/.ssh/config",
	// 同期オプション
	"syncOption": {
		// 削除を同期する
		"delete": true,
		// 新規作成ファイルをスキップする
		"skipCreate": false,
		// 既存ファイルの更新を除外する
		"ignoreExisting": false,
		// ローカル側が新しい場合のみ更新する
		"update": false
	},
	// 保存時にアップロードする
	"uploadOnSave": true,
	// 監視するファイル
	"watcher": {
		// VSC以外からファイル変更を監視する対象
		"files": "*.{js,css}",
		// VSC以外から変更された場合にリモートを自動で更新する
		"autoUpload": true,
		// VSC以外から削除された場合にリモートを自動で削除する
		"autoDelete": true
	}
}

1つのプロジェクトに複数の接続先を設定することができます。

複数の接続先

[
	{
		"name": "サーバA",
		"context": "project/build",
		"host": "example.com",
		"username": "username",
		"password": "password",
		"remotePath": "/remote/project/build"
	},
	{
		"name": "サーバB",
		"host": "example.jp",
 		"protocol": "sftp",
		"port": 22,
		"username": "username",
		"privateKeyPath": "/Users/user/Documents/ssh/id_rsa.ppk",
	}
]

uploadOnSave設定がtrueになっていれば、ファイルを保存すれば自動的にアップロードされます。手動でアップロードする際は、アップロードしたいファイル上で右クリックし、メニューから［Upload］を選択します。右クリックメニューはツリーパネル、エディタパネルのどちらでも使えます。

コマンドパレットからでも実行できます。Windows/Linux では［Ctrl］+［Shift］+［P］、Mac では［Cmd］+［Shift］+［P］でコマンドパレットを開き、SFTP: Upload コマンドを実行します。Uploadにはいくつか種類があり、用途に合わせて選んでください。

ツリービューからディレクトリをアップロードすることもできます。

ローカルとリモートのファイルを比較

ローカルフィアルとリモートファイルを比較することもできます。任意のファイルを右クリックして、ポップアップメニューから［Diff with Remote］を選択してください。ローカルとサーバのファイルを比較して差異を表示します。

ローカルとリモートの同期

ファイルやディレクトリ単位でのアップではなく、ローカルとリモートを同期することもできます。

• SFTP: Sync Both Directions
  リモートとローカル双方向で同期
• SFTP: Sync Local -> Remote
  ローカルからリモートに同期
• SFTP: Sync Remote -> Local
  リモートからローカルに同期

問題点

SFTP拡張機能のGithubリポジトリにQ&Aがあるので、そちらを参考にしてください。

GithubリポジトリのQ&A