Visual Studio Code

SFTP

拡張の概要

用途：共有レンタルサーバーの /public_html 更新、SSHでの安全なミラー更新、GUI不要のVS Code完結運用など。

インストールと初期化

  1. VS Code拡張ビューで「SFTP（Natizyskunk）」をインストール。
  2. 対象のローカルフォルダを VS Code で開く。
  3. コマンドパレット → SFTP: Config を実行（.vscode/sftp.json を作成）。
  4. sftp.json に接続設定を記入。
  5. 初回は SFTP: Download Project でサーバー内容をローカルに取得し、以後は保存や同期で反映。

基本：FTP/FTPS でアップロード

前提：host / username / password / remotePath が分かっている。安全性のため FTPS を推奨。

最小サンプル（FTP/FTPS）

JSON

{
	"name": "MySite-FTP",
	"protocol": "ftp",
	"host": "ftp.example.com",
	"port": 21,
	"secure": true,
	"username": "myuser",
	"password": "********",
	"remotePath": "/public_html",
	"uploadOnSave": false,
	"ignore": [".git", ".vscode", "node_modules"]
}

手順

  1. sftp.json を保存。
  2. SFTP: Upload Active File で開いているファイルを転送、または Sync Local -> Remote で差分同期。
  3. uploadOnSave を true にすれば保存で自動アップロード。

備考：secure:true は一般的に 明示的 FTPS（TLS） を意味します。ホスティングによっては暗黙的 FTPS（990/TCP）など指定が異なるため、提供元のドキュメントに従ってください。

基本：SFTP（SSH）でアップロード

SFTP は SSH による安全な転送方式（通常ポート 22/TCP）。パスワード認証も公開鍵認証も利用できます。

最小サンプル（SFTP：パスワード認証）

JSON

{
	"name": "MySite-SFTP",
	"protocol": "sftp",
	"host": "sftp.example.com",
	"port": 22,
	"username": "myuser",
	"password": "********",
	"remotePath": "/home/myuser/public_html",
	"uploadOnSave": false,
	"useTempFile": false,
	"openSsh": true
}

公開鍵認証サンプル

JSON

{
	"name": "MySite-SFTP-Key",
	"host": "sftp.example.com",
	"username": "myuser",
	"remotePath": "/var/www/html",
	"privateKeyPath": "~/.ssh/id_rsa",
	"passphrase": "********",
	"uploadOnSave": true
}

手順

  1. sftp.json を保存。
  2. Upload Active File / Sync Local -> Remote を使ってアップロード。
  3. uploadOnSave を有効にすると保存時に自動反映。

操作コマンド（よく使うもの）

SFTP: Config
sftp.json を作成
Upload Active File
現在のファイルをアップロード
Upload Changed Files
直近の Git 変更分をまとめてアップロード
Upload Active Folder
今開いているファイルのフォルダをアップロード
Download Active File / Folder
ダウンロード
Sync Local -> Remote / Sync Remote -> Local / Sync Both Directions
Cancel All Transfers
転送を中止
Open SSH in Terminal
VS Code ターミナルで SSH を開く

Tip：メニュー操作時に Alt を押すと Force Upload/Download（ignore を無視）を選べます。

便利ワザ（運用をラクに）

uploadOnSave
小さな修正を素早く反映。
watcher
dist/*.{js,css} など 生成物だけを自動アップロード。

watcher の例

JSON

{
	"watcher": {
		"files": "dist/*.{js,css}",
		"autoUpload": true,
		"autoDelete": false
	}
}
ignore
.git や node_modules を除外。

JSON

{
	"ignore": [
		".git",
		".vscode",
		"node_modules",
		"*.map",
		"tmp/**"
	]
}
profiles
dev / prod の接続先を切り替え（defaultProfile や SFTP: Set Profile）。

JSON

{
	"profiles": {
		"dev": {
			"host": "dev.example.com",
			"remotePath": "/dev",
			"uploadOnSave": true
		},
		"prod": {
			"host": "prod.example.com",
			"remotePath": "/prod"
		}
	},
	"defaultProfile": "dev"
}
Multiple Context
フォルダごとに別の転送先へ。

JSON

[
	{
		"name":"assets",
		"context":"project/assets",
		"host":"...",
		"remotePath":"/srv/app/assets"
	},
	{
		"name":"src",
		"context":"project/src",
		"host":"...",
		"remotePath":"/srv/app/src"
	}
]
Remote Explorer
リモートの中身を VS Code 内でブラウズ、右クリックで「Edit in Local」。
Connection Hopping
踏み台（bastion）経由で多段接続。

7. 実戦テク（Webページのアップロード運用）

安全第一の流れ（例：本番サーバー）

  1. defaultProfile を本番ではなく staging に。
  2. ローカル → staging を uploadOnSave で即時確認。
  3. OK になったら手動で prod に Sync Local -> Remote。

壊れにくい sftp.json のコツ

権限・所有者エラー対策

事故防止の基本

8. 代表的なトラブルと確認ポイント

No such file
remotePath の綴り、末尾スラッシュ、権限、存在、シンボリックリンク／chroot を確認。
ignore が効かない
glob 書式と context の基準を再点検。Force Upload/Download を使わない。
編集が反映されない
uploadOnSave や watcher の設定、ignore 対象を確認。