VSCode拡張機能｢SFTP｣でレンタルサーバーへ自動アップロード！

2025/09/10

今回はレンタルサーバー上でWordPressや静的サイトなどを直接開発するために便利なVSCode拡張機能｢SFTP｣をご紹介します。

これがあるとFileZillaなどのFTPソフトの出番が減り、LocalなどのWordPress開発ソフトに依存しなくてもサイトが作成できるようになります。

さらに完成サイトをチェックしてもらい、ディレクターさんやデザイナーさんとのチェックと同時に修正などもできるようになるスグレモノです。

設定も一度してしまえば簡単なのでぜひ、この記事を読んで使ってみてください。それでは始めましょう！

この記事に使われているエディタ画像はcursorのものです。

VS CodeでSFTPをつかうための準備

VSCodeの拡張機能である｢SFTP｣は、VSCodeから直接サーバーにファイルをアップロードできるため、FileZillaなどのFTPソフトを利用する手間を省けます。

SFTP拡張機能をインストール

まずはVSCodeにSFTP拡張機能をインストールします。

同様の機能をもった拡張機能は他にもありますが

今回は、SFTPのNatizyskunkさんのものをインストールします。

VSCodeで作業環境を作成

まずはVSCodeで作業フォルダを作成します。

今回は例としてWordPressサイトを参考にします。

レンタルサーバー上にてWordPressをインストール（今回は割愛します）

インストールしたデータの一部（wp-contentフォルダ）をFileZillaなどのFTPソフトを利用して任意のフォルダへダウンロードします。

VSCode SFTP拡張機能の設定ファイルを作成

ここまでで、ご自身のPCには任意のフォルダ内にwp-contentフォルダのみ設置している状態です。

.vscodeフォルダを作成

次にSFTPの設定フォルダを作成していきます。

設置する場所はwp-contentフォルダと同じ階層です。

そこに.vscodeというフォルダを作成します。

.vscodeフォルダはそのプロジェクト用の設定ファイルなどを管理するフォルダで隠しフォルダになっています。なのですでにある方は作成しなくても大丈夫です。ドットがあり隠しフォルダなのでFinderで見えないという方は　Command + Shift + .（ピリオド）　Windowsの方は　Ctrl + Shift + .（ピリオド）を押してください。

sftp.jsonファイルを作成

.vscodeフォルダ内にsftp.jsonファイルを作成し、ここにサーバーの情報やパス、設定などを書き込むことによって利用できるようになります。

VSCode SFTP拡張機能の各種設定項目

それでは私が書いている設定項目を記述して、それぞれ説明してまいります。

{
  "name": "Test Server",
  "host": "レンタルサーバーのホスト名",
  "protocol": "ftp",
  "username": "レンタルサーバーのユーザーネーム",
  "password": "レンタルサーバーのパスワード",
  "remotePath": "ドメイン名/public_html/任意のフォルダ名/",
  "uploadOnSave": false,
  "watcher": {
    "files": "wp-content/themes/任意のテーマフォルダ名/css/style.css",
    "autoUpload": true,
    "autoDelete": false
  },
  "useTempFile": false,
  "openSsh": false,
  "ignore": [
    ".vscode/",
    ".git",
    "themes/src/",
    "**/.DS_Store"
  ]
}

name: サーバーを識別するための任意の文字列です。
host: サーバーのホスト名またはIPアドレスです。
protocol: 使用するプロトコルを指定します（sftp または ftp）。今回はftpを使用します。
username: 認証用のユーザー名です。　レンタルサーバーにログインするためのものとは違います。
password: パスワードベースのユーザー認証用のパスワードです。レンタルサーバーにログインするためのものとは違います。

パスワードをそのまま保存すると、gitの操作ミスや手動で誤ってサーバーにアップしてしまう危険性があります。SSHキーを使う方法もありますが、今回はftpの利用方法がメインなので十分にご注意ください。

remotePath: リモートホスト上の絶対パスです。ワークスペースのルートディレクトリに対応するサーバーのパスを指定します。
uploadOnSave: VSCodeでの保存操作ごとに自動でサーバーにアップロードするかを指定します。true で自動アップロード、false で手動アップロードです。
watcher: watcher コマンドの動作を設定します。
- watcher.files: VS Codeエディタ外で編集された場合に処理されるGlobパターンです。
- watcher.autoUpload: ファイルが変更されたときにアップロードします。
- watcher.autoDelete: ファイルが削除されたときに削除します。
useTempFile: 保存操作ごとに一時ファイルをアップロードし、ファイルのアップロード中にユーザーがアクセスしてもウェブページが壊れないようにします。
openSsh: アトミックファイルアップロードを有効にします。（OpenSSHサーバーのみ対応）
ignore: 同期から除外するファイルやフォルダを指定します。gitignoreと同じ動作で、ワイルドカードも使用できます。

uploadOnSaveをfalseにしている場合はアップロードは手動です。 autoで自動アップロードにすると変更を加えるとアップロードされます。使い所は充分ご注意ください。

次に、設定がうまくできているか確認します。

まずはターミナルなどが表示されるテキストエディタの下のパネル部分を表示させます。

表示されたら

エディタ画面下のパネルメニューで出力を選択肢、そこで表示されたセレクトボックスでsftpを選択します。

そして

上の画像が表示されます。(下2行はアップロードしたら表示されます) この項目はsftp.jsonファイルの設定が表示されます。

その後、エディタ左パネルからアップロードしたいファイルを選択、右クリックすると

アップロード完了になります。

すると

画像の下2行の項目が表示されます。

ここで表示されても開発画面に反映されない場合はパスが間違えている可能性が高いです。間違えてアップしてしまったファイルを探すのと、再度パスを見直しましょう。

画像ファイルを追加した場合などレンタルサーバー上にファイルが反映されているか確認したいときもあるでしょう。

その場合は、

上の画像のアイコンをクリックすると、レンタルサーバーの中を確認できます。ファイルなどは文字化けして確認できないものもありますが、アップしたファイルを確認する場合などに使えます。

上の画像はcursorですが、VSCodeで位置の変更をしてなければ左端に少し大きめのアイコンとして縦に並んでいます。

VS Code SFTP拡張機能の利用中にハマったこと

ファイルやフォルダを変更してもアップできないってなったときにハマった理由の一つに watcherとオートアップロードの競合がありました。

watcher.files と uploadOnSave の同時使用に関する注意 watcher.files を設定する際、「すべてを監視する場合は uploadOnSave を false に設定してください」とあります。つまりwatcher.filesでの設定を**/*のようにすべてのファイルを設定するとという話ですね。

NatizyskunkさんのGitより（生成AIによって翻訳）

わたしがハマった場合は、開発環境はSASSを使用してサーバーにはCSSファイルのみあるという状態でしたので、SASSファイルは監視対象から外したかったのです。

そこでwatcher.filesを使用しました。その時の対象にはCSSファイルのほか、phpファイルやJavaScriptファイルなども監視対象に含めており、さらにuploadOnSaveの項目もtrueにしていました。どちらかに絞ると解決しました。

openSsh と useTempFile の設定依存性 openSsh を true に設定する場合、useTempFile オプションも true に設定する必要があるという重要な注意書きがあります。これは、openSsh を使用する際の必須条件となります。

NatizyskunkさんのGitより（生成AIによって翻訳）

こちらは個人的には両方オフにしております。私はほとんど自宅で作業を行い、接続に不安を感じていないので使っていません。

ご自身の環境を確認して、利用するならファイル破損を防ぐために、useTempFileとopenSshの両方オンにしてくださいということですね。