【VSCodeから直接XServerへ】拡張Natizyskunk SFTPでXserverへ右クリック転送する

1.コードを書きながらサーバにアップロード

AIが発達してから、WEB系のシステムを組むのが本当に楽になりました。私も毎日のようにVS Codeでプログラムを書いているのですが、一つだけどうしても面倒な作業が残っていました。それが、書いたコードをサーバーに上げるFTP転送の作業です。

開発はXAMPPのローカル環境で進めるのですが、最終的な動作確認はやはり本番に近いXserver上で行いたい。そのたびにXAMPPのhtdocsからWinSCPに切り替えて、修正したファイルを目視で探してドラッグ&ドロップして…という流れを繰り返していました。一時期はGitHub Actionsを使って「git pushしたら自動でFTP転送される」仕組みも組んでいたのですが、これはこれで「まだサーバーに上げたくないタイミングでも勝手に上がってしまう」という別の悩みが出てきます。本番反映前にちょっとだけ試したい時には、むしろ邪魔になることが分かりました。

もっと手元でコントロールしたい、けれどWinSCPに切り替える手間は無くしたい。そんなわがままを叶えてくれる方法をようやく見つけたので、今回はそのご紹介です。VS Codeの中から、右クリック一発でXserverに転送できる仕組みを構築します。

• VS Codeに「Natizyskunk SFTP」という拡張機能をインストールする。
• 転送先のFTPサーバー情報を sftp.json という設定ファイルに書き込む。
• 転送したいファイルやフォルダを右クリックして、メニューからアップロードを実行する。

手順1.SFTP拡張機能をインストールする

まずはVS Code（またはCursor）の左サイドバーから拡張機能アイコン（四角が4つのマーク）を開き、検索窓に SFTP と入力します。たくさん候補が出てきますが、その中から作者名が Natizyskunk のものを選んでインストールしてください。同名の拡張機能がいくつもあるので、必ず作者名を確認するのがポイントです。

「SFTP」という名前ですが、設定で protocol を切り替えれば普通のFTPでも使えます。私もこれをFTPモードでXserverに接続しています。SFTPに対応していないレンタルサーバーでも問題なく使えるのでご安心ください。

手順2.設定ファイル(sftp.json)を作成する

インストールが終わったら、転送先サーバーの情報を書く設定ファイル sftp.json を作成します。作成方法は2つあります。

方法A：コマンドパレットから自動生成する

1. プロジェクトのルートフォルダをVS Codeで開く
2. Ctrl + Shift + P でコマンドパレットを開く
3. 「SFTP: Config」と入力してEnter
4. .vscode/sftp.json が自動で作成され、エディタに開かれる

方法B：手動で作成する

もし方法Aで自動生成されない場合は、プロジェクトのルートフォルダ直下に .vscode という名前のフォルダを作り、その中に sftp.json という名前のファイルを手で作成してください。

手順3.sftp.jsonの中身を書く

作成された sftp.json に、Xserver（または使っているサーバー）の接続情報を書き込みます。私が実際にXserverで使っている設定が以下です。そのまま参考にしてください。

{
    "name": "なんでもいいので識別名（例：my-xserver）",
    "host": "sv****.xserver.jp",
    "protocol": "ftp",
    "port": 21,
    "username": "FTPユーザー名",
    "password": "FTPパスワード",
    "remotePath": "/********.com",
    "uploadOnSave": false,
    "useTempFile": false,
    "openSsh": false,
    "passive": true,
    "ignore": [
        "**/datas",
        "**/manual",
        "**/docs",
        "**/image",
        "**/tools",
        "**/stripe-php-master",
        "**/db",
        ".cloudecodeignore",
        ".git-ftp-ignore",
        ".CLAUDE.md"
    ]
}

各項目の意味は、本記事の備考2にすべて表でまとめています。最初に書き換える必要があるのは host（Xserverのサーバー番号）、username、password、remotePath（転送先のディレクトリ）の4つです。ignore のリストは、転送したくないフォルダ・ファイルを書いておきます。動画フォルダや管理用ドキュメントなど、サーバーに上げる必要のないものをここで除外しておくのがおすすめです。

【最重要】.vscodeフォルダの置き場所に注意する

ここが今回の記事で一番つまずきやすいポイントです。私もここで何度も「設定したのに動かない！」とハマりました。

.vscode フォルダは、VS Codeで「ワークスペースとして開いているフォルダ」の直下に置かなければなりません。これがズレていると、拡張機能は sftp.json をまったく認識してくれません。

例えば、私のように C:\xampp\htdocs\qumcum.com というフォルダで作業している場合は、こうなります。

【正しい配置】
C:\xampp\htdocs\qumcum.com\        ← ここをVS Codeで開いている
  ├── .vscode\
  │     └── sftp.json              ← ここに置く
  ├── index.php
  ├── css\
  └── js\

逆に、よくある失敗パターンが以下です。

【間違った配置1】 親フォルダを開いてしまっているケース
C:\xampp\htdocs\                   ← VS Codeで開いているのはこっち
  └── *******.com\
        ├── .vscode\
        │     └── sftp.json        ← これだと認識されない
        └── index.php

【間違った配置2】 .vscodeを深い場所に作ってしまうケース
C:\xampp\htdocs\******.com\        ← ここをVS Codeで開いている
  ├── system\
  │     └── .vscode\
  │           └── sftp.json        ← これも認識されない
  └── index.php

VS Codeでフォルダを開いた時、画面左上のエクスプローラーに表示される「一番上のフォルダ名」が、ワークスペースのルートです。.vscode フォルダは必ずその直下に作るようにしてください。これさえ間違えなければ、ほぼ確実に動きます。

もう一つ補足すると、VS Codeで「フォルダを開く」のではなく「ファイルを単体で開いている」状態だと、そもそもワークスペースが存在しないので拡張機能は動きません。必ず「フォルダを開く（Open Folder）」でプロジェクトのルートを開いた状態で使ってください。

手順5.右クリックでアップロードする

ここまで設定できれば、あとは本当に簡単です。VS Codeの左サイドバーのエクスプローラーで、転送したいファイルやフォルダを右クリックします。表示されるポップアップメニューの下のほうに、SFTP拡張機能が追加した項目が並んでいます。

普段使うのは「Upload」だけで十分です。ファイル単位でも、フォルダごと丸ごとでも、右クリック一発で転送が走ります。VS Code下部のステータスバーに転送状況が表示されるので、進捗もすぐに分かります。WinSCPを立ち上げる必要も、ファイルをドラッグ&ドロップする必要もありません。本当に楽になりました。

2.便利な工夫

1.保存と同時に自動アップロードしたい時は uploadOnSave を true に

修正のたびに右クリックするのも面倒だ、という方は sftp.json の uploadOnSave を true に変えてください。これで Ctrl+S でファイルを保存するたびに、自動でサーバーに転送されるようになります。

ただしこれは諸刃の剣で、「実験的に試している途中のコード」までうっかり本番に上がってしまうリスクがあります。本番運用中のサイトでは、私はあえて false のままにして、必ず右クリックで明示的にアップロードする運用にしています。開発初期のステージング環境などでは true にすると非常に快適です。

2.アップロード除外リスト(ignore)を最初にしっかり書いておく

地味に大事なのが、ignore のリストをきちんと整備しておくことです。動画ファイル、データベースのバックアップ、開発用のドキュメント、ログファイルなど、サーバーに上げる必要のないものをここで除外しておきます。書き方はGitの .gitignore と同じで、ワイルドカード（*）も使えます。

"ignore": [
    "**/.git",
    "**/.vscode",
    "**/node_modules",
    "**/datas",
    "**/docs",
    "*.log",
    "*.zip",
    "*.mp4",
    "config.local.php"
]

特に .vscode 自体や .git フォルダは必ず除外しておきましょう。これらをサーバーに上げてしまうと、最悪の場合パスワードを書いた sftp.json がそのまま公開されてしまう危険があります。

3.複数のサーバーを切り替えて使う

sftp.json は、配列形式で書くことで複数のサーバー設定を持つことができます。本番環境とテスト環境を切り替えたい時に便利です。

[
    {
        "name": "本番サーバー",
        "host": "sv****.xserver.jp",
        "protocol": "ftp",
        "port": 21,
        "username": "honban_user",
        "password": "honban_pass",
        "remotePath": "/example.com/public_html",
        "uploadOnSave": false
    },
    {
        "name": "テストサーバー",
        "host": "sv****.xserver.jp",
        "protocol": "ftp",
        "port": 21,
        "username": "test_user",
        "password": "test_pass",
        "remotePath": "/test.example.com/public_html",
        "uploadOnSave": true
    }
]

右クリックメニューからアップロードを実行する時に、どちらのサーバーに送るかを選べるようになります。本番には慎重に、テストには気軽に、という使い分けができるので、大規模なプロジェクトでは特に重宝します。

3.備考

1.Natizyskunk SFTPとは

Natizyskunk SFTPは、フランスの開発者 Natan FOURIÉ氏（GitHub ID: Natizyskunk） が中心となって開発・メンテナンスしている、VS Code向けのファイル転送拡張機能です。SFTP（SSH File Transfer Protocol）とFTP/FTPSの両方に対応し、ローカルで編集したファイルをリモートサーバーに転送・同期できます。

もともとは liximomo氏 が作っていた「vscode-sftp」という拡張機能が広く使われていましたが、原作者がメンテナンスを停止したため、Natizyskunk氏がフォーク（派生開発）して引き継いだものが現在の主流になっています。VS Codeのマーケットプレイスでも、liximomo版は「非推奨（deprecated）」と表示され、Natizyskunk版が後継として案内されています。さらに2023年からは satiromarra氏 も共同メンテナとして加わり、現在は2人体制で開発が続けられています。

ここ2年ほどで50回以上のアップデートがリリースされており、バグ修正・機能追加・安定性向上が継続的に行われています。執筆時点の最新安定版はv1.16.3です。GitHubのスター数は約500、フォーク数は100以上と、世界中の開発者に使われている定番拡張機能の一つだと言えます。

主な特長は次の通りです。

参考リンク：VS Code Marketplace – SFTP by Natizyskunk
参考リンク：GitHubリポジトリ（公式）

2.sftp.jsonのパラメータ一覧

公式Wikiで公開されている設定パラメータを、用途別に整理しました。普段使うのは上の方の基本パラメータだけで十分ですが、後半のパラメータも知っておくと、いざという時に役立ちます。

接続設定（基本）

転送動作の設定

除外・同期設定

ファイル監視（watcher）

パーミッション・その他

FTP固有の設定

参考リンク：公式Wiki – Common Configuration（全パラメータの詳細）

3.セキュリティの注意点

sftp.json には、FTPのパスワードが平文（暗号化されずそのままの文字列）で書かれます。これは公式ドキュメントにも明記されている仕様で、便利さと引き換えのトレードオフです。そのため、次の3つは絶対に守ってください。

1. .gitignore に必ず .vscode/sftp.json を追加し、Gitリポジトリに上げない
2. sftp.json の ignore リストに必ず .vscode を含め、サーバーにも上げない
3. パブリックなGitHubリポジトリには絶対にコミットしない

万が一 sftp.json をGitHubの公開リポジトリに上げてしまうと、世界中からあなたのサーバーのFTPパスワードが見える状態になります。ボットがすぐに見つけてサーバーを乗っ取られる事故も実際に起きています。最初の1回だけ、必ずこの3点を確認するクセをつけておいてください。

4.WinSCPやFileZillaと比べた時のメリットとデメリット

セキュリティ面ではWinSCPなどの専用ソフトに分がありますが、開発スピードという点ではVS Code内で完結するこちらの方が圧倒的に楽です。私の場合、本番のクリティカルな運用作業はWinSCPで、開発中の頻繁な転送はNatizyskunk SFTPで、というふうに使い分けています。慣れてくると、もうWinSCPに切り替える時間すら惜しくなります。一度この快適さを味わうと、本当に手放せません。