Zenn
🐱

VSCode、CursorでSFTP接続ができる拡張機能『Kreare SFTP』

2024/12/29に公開
VS Code
Cursor
tech

Webの開発では、まだまだSFTPを使ってサーバーにアップロードをするという機会も少なくありません。

そんな時、FTPクライアントを使ってアップロードするのは面倒なので、VSCode上でSFTPの操作ができる拡張機能『Kreare SFTP』を使うと便利です。

1. 拡張機能を検索

  1. VSCode左端のアクティビティバーから「拡張機能」をクリック
  2. 「sftp」などのキーワードで検索
  3. 検索結果の中から、Kreare SFTP を選択してインストール

この時、複数の拡張機能が見つかりますが、筆者は「Kreare SFTP」が動作も安定していました。「SFTP」というそのものズバリの名前の拡張機能もありましたが、筆者の環境ではうまく動作しませんでした。

2. 拡張機能をインストール・設定

  1. インストールが完了したら、<kbd>Cmd/Control</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> で コマンドパレット を表示
  2. sftp などでコマンドを検索し、「SFTP: Config」を実行
  3. .vscode フォルダ内に sftp.json というファイルが生成され、基本設定が記述される

{
  "name": "MyServer",
  "host": "example.com",
  "protocol": "sftp",
  "port": 22,
  "username": "your_username",
  "password": "your_password", 
  "remotePath": "/var/www/html",
  "uploadOnSave": true
}

それぞれ、次のような設定項目です。

  • name: 設定名
  • host: サーバーのホスト名、IPアドレス
  • protocol: プロトコル（sftp）
  • port: ポート番号（22）
  • username: ユーザー名
  • password: パスワード
  • remotePath: リモート
  • uploadOnSave: ファイルを保存すると自動でアップロードするかどうか

また、SFTPへの接続にSSHキーを使う場合は、代わりにprivateKeyPathを設定します。

...
"privateKeyPath": "/path/to"

3. ファイル一覧の表示とアップロード

拡張機能をインストールすると、VSCodeの左側「アクティビティバー」に拡張機能のアイコンが追加されます。これをクリックし、正しく接続できていればサーバ上のファイル一覧が表示されます。

ファイルやフォルダを右クリックすると、ダウンロードやアップロードの操作が行えるようになります。また、エクスプローラーパネル上のローカルファイルからも、アップロード・ダウンロードが可能です。こうして、ファイル操作が行えるようになります。

また、sftp.json の uploadOnSave を true にすると、ファイルを保存すると自動でアップロードしてくれます。これで開発管理が非常にやりやすくなりました。おすすめ。

Discussion