SFTP拡張機能の概要
拡張機能のSFTPを使って、Visual Studio Code（以下VSC）で保存したファイルを自動的にサーバにアップロードする方法を説明します。拡張機能のインストール方法は下記ページを参考にしてください。
SFTP拡張機能はマーケットプレイスの検索ボックスで「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があるので、そちらを参考にしてください。