VS Codeでリモート編集！FTP/SFTPの接続・設定方法

By /

VS Codeでリモート編集！FTP/SFTPの接続・設定方法を徹底解説

はじめに：なぜVS Codeでリモート編集が必要なのか？

Webサイトの開発、サーバーの設定ファイル編集、リモートサーバー上のスクリプト修正など、開発や運用業務において、ローカル環境ではないリモート環境上のファイルを直接編集したい場面は数多く存在します。

従来、これらの作業は専用のFTP/SFTPクライアントソフトウェア（FileZilla, WinSCP, Cyberduckなど）でファイルを開き、ローカルにダウンロードしてから編集し、再度アップロードするという手順で行われることが一般的でした。あるいは、SSH接続でサーバーにログインし、VimやNanoといったテキストエディタをターミナル上で操作する方法もありました。

しかし、これらの方法にはいくつかの課題があります。

  • 専用クライアントとエディタの切り替え: ファイルを開く、ダウンロード、アップロードは専用クライアントで行い、編集は別途インストールしたエディタで行うため、ウィンドウの切り替えや手順が増え、作業効率が低下します。
  • 機能の制限: ターミナル上のエディタは高機能ですが、マウス操作ができなかったり、現代的なIDE（統合開発環境）が提供するような補完機能、構文チェック、デバッグ機能などが限定的であったりします。
  • ローカルでの再現性の問題: リモート環境のファイル構造や設定を把握しながら編集したい場合、ローカルにダウンロードしたファイルだけでは全体のコンテキストを掴みにくいことがあります。

ここで登場するのが、高機能なコードエディタであるVisual Studio Code（VS Code）を用いたリモート編集です。VS Codeは豊富な拡張機能エコシステムを持っており、FTPやSFTPプロトコルを使って直接リモートサーバー上のファイルをローカルファイルシステムのように操作・編集することを可能にします。

VS CodeでFTP/SFTP編集を行うメリット

  1. シームレスなワークフロー: リモートファイルの閲覧、開く、編集、保存、アップロードまで、VS Codeの単一ウィンドウ内で完結します。
  2. VS Codeの全機能を利用可能: コード補完、構文ハイライト、Lint機能、デバッグ機能、Git連携など、VS Codeが提供する強力な機能をリモートファイルに対してそのまま利用できます。
  3. 使い慣れたインターフェース: 普段ローカル開発で利用しているVS CodeのUIとキーバインドで作業できます。
  4. プロジェクト単位での管理: リモートサーバー上の特定のディレクトリをワークスペースとして開き、プロジェクトとして管理できます。
  5. 設定の共有と再現性: 接続設定をファイルとして保存できるため、チーム内での共有や、別の環境での再現が容易です。

VS CodeでFTP/SFTP編集を行うデメリット

  1. 拡張機能への依存: リモート編集機能はVS Code本体ではなく、サードパーティ製の拡張機能によって提供されるため、機能の安定性や継続的なメンテナンスは拡張機能の開発者に依存します。
  2. SSH接続との比較: VS Codeには「Remote – SSH」という公式の強力なリモート開発機能があります。サーバー側でSSH接続が可能であれば、SFTPよりもRemote – SSHの方がパフォーマンスが高く、VS Codeのほぼ全ての機能をリモート環境で実行できるため、より推奨される場合があります。しかし、共有ホスティングなど、サーバー側にVS Code Serverをインストールできない、あるいはSSHアクセスがSFTPに限定されている環境では、FTP/SFTP拡張機能が唯一の選択肢となることがあります。
  3. 大規模プロジェクトへの不向き: ファイル操作のパフォーマンスはネットワーク帯域やサーバー負荷に依存します。非常に大規模なプロジェクト全体をリモートで扱う場合、Remote – SSHや他の専用ソリューションの方が適している場合があります。
  4. セキュリティリスク: パスワード認証を使用する場合、パスワードが設定ファイルやVS Codeの履歴に残る可能性があります。セキュリティ対策としてSSHキーペア認証が推奨されます。

この記事では、VS CodeでFTPおよびSFTP接続を実現するための主要な拡張機能に焦点を当て、それぞれの設定方法、使い方、そして知っておくべき注意点について詳細に解説します。特に、多くのユーザーに利用されている「FTP-Simple」と「SFTP」の2つの拡張機能を取り上げます。

VS CodeでのFTP/SFTP編集の基本：拡張機能の導入

VS CodeでFTP/SFTP接続を行うためには、対応する拡張機能をインストールする必要があります。マーケットプレイスにはいくつかの拡張機能がありますが、ここでは特に人気があり、機能も豊富な以下の2つを紹介します。

  • FTP-Simple: シンプルな設定で手軽に始めたいユーザー向け。FTP, FTPS, SFTPに対応。
  • SFTP: より多機能で、同期機能や高度な設定オプションが必要なユーザー向け。主にSFTPに対応。

どちらの拡張機能を選ぶかは、必要な機能や設定の好みによります。まずはFTP-Simpleから試してみて、必要であればSFTPも検討するという流れでも良いでしょう。

拡張機能のインストール方法

VS Codeの拡張機能のインストールは非常に簡単です。

  1. VS Codeを開きます。
  2. サイドバーにある「拡張機能」アイコン（四角が3つと斜めの四角1つ）をクリックします。
  3. 検索バーに「FTP-Simple」または「SFTP」と入力します。
  4. 検索結果に表示された該当の拡張機能を選択し、「Install」（インストール）ボタンをクリックします。

インストールが完了すると、拡張機能が有効になり、VS CodeでFTP/SFTP接続の設定が可能になります。

次に、それぞれの拡張機能について、具体的な設定方法と使い方を詳しく見ていきましょう。

FTP-Simple 拡張機能の詳細

FTP-Simpleは、その名の通りシンプルで直感的な操作が可能なFTP/SFTP拡張機能です。基本的なリモートファイル編集のニーズを満たすには十分な機能を備えています。

FTP-Simpleの概要と特徴

  • FTP, FTPS (FTP over SSL/TLS), SFTP (SSH File Transfer Protocol) の3つのプロトコルに対応。
  • 設定ファイル (ftp-simple.json) はVS Codeのワークスペース直下に作成されるため、プロジェクトごとに設定を管理しやすい。
  • VS Codeのエクスプローラービューと連携し、リモートファイルをツリー表示できる。
  • 保存時の自動アップロード機能。
  • シンプルなインターフェースで初心者でも扱いやすい。

インストール方法

前述の手順で、「FTP-Simple」を検索してインストールします。

基本的な設定ファイルの作成

FTP-Simpleは、接続設定をVS Codeのワークスペース（フォルダ）直下にある .vscode/ftp-simple.json ファイルに記述します。このファイルは、通常、手動で作成するか、拡張機能のコマンドを使用して作成します。

設定ファイル作成の手順:

  1. VS Codeで、リモート編集したいプロジェクトのローカルフォルダを開きます（まだローカルフォルダがない場合は、新規作成して開いてください）。このフォルダが、リモートサーバー上の特定のディレクトリに対応するローカルのワークスペースとして機能します。
  2. コマンドパレットを開きます（Windows/Linux: Ctrl+Shift+P, macOS: Cmd+Shift+P）。
  3. ftp-simple と入力し、候補の中から FTP-Simple: Config - Create/Edit ftp-simple settings を選択します。
  4. 初めて設定ファイルを作成する場合、「.vscode/ftp-simple.json が見つかりません。作成しますか？」のようなメッセージが表示されるので、「はい」を選択します。
  5. .vscode/ftp-simple.json ファイルが作成され、VS Codeで開かれます。最初はサンプルの設定が記述されています。

ftp-simple.json ファイルの構造

ftp-simple.json はJSON形式で記述されます。複数の接続先を設定する場合は、配列の中に複数の設定オブジェクトを記述します。

json
[
{
"name": "My Remote Server (SFTP)",
"host": "your_remote_server.com",
"port": 22,
"type": "sftp", // SFTP接続の場合
"username": "your_username",
"password": "your_password", // 非推奨！代わりにprivateKeyを使用してください
// "privateKey": "/path/to/your/ssh/private/key", // 推奨
// "passphrase": "your_key_passphrase", // privateKeyにパスフレーズがある場合
"remotePath": "/path/to/remote/directory", // リモート側の作業ディレクトリ
"uploadOnSave": true, // 保存時に自動アップロードするか
"ignore": [ // アップロード・ダウンロード・同期時に無視するファイル/ディレクトリ
".vscode",
".git",
".DS_Store",
"node_modules"
],
"watcher": { // SFTPの場合の監視設定 (任意)
"files": "*.{css,js,php,html}",
"autoUpload": true,
"autoDelete": false
}
}
// 他の接続設定をここに追加できます
/*
,
{
"name": "Another Server (FTP)",
"host": "another_ftp_server.com",
"port": 21,
"type": "ftp", // FTP接続の場合
"username": "another_username",
"password": "another_password",
"remotePath": "/another/remote/path",
"uploadOnSave": false
}
*/
]

各設定項目の詳細な説明

ftp-simple.json で設定できる主な項目は以下の通りです。

  • name (string, 必須): この接続設定に付ける任意の名前です。VS CodeのUIで表示されます。複数の設定がある場合に識別しやすくなります。
  • host (string, 必須): 接続先のホスト名またはIPアドレスを指定します。例: your_remote_server.com または 192.168.1.100。
  • port (number): 接続先のポート番号を指定します。プロトコルによってデフォルト値が異なります（FTP: 21, FTPS: 21, SFTP: 22）。通常はデフォルト値で問題ありませんが、サーバー側で変更されている場合は指定が必要です。
  • type (string, 必須): 使用するプロトコルを指定します。「ftp」「ftps」「sftp」のいずれかを指定します。
  • username (string, 必須): 接続に使用するユーザー名を指定します。
  • password (string): パスワード認証を使用する場合にパスワードを指定します。セキュリティ上の理由から、平文でのパスワード保存は非推奨です。可能な限りSSHキーペア認証（SFTPの場合）や、VS Codeのシークレットストア連携（一部拡張機能や設定方法）を検討してください。
  • privateKey (string): SFTP接続でSSHキーペア認証を使用する場合、ローカルにある秘密鍵ファイルへの絶対パスを指定します。例: C:\\Users\\YourUser\\.ssh\\id_rsa (Windows), /Users/YourUser/.ssh/id_rsa (macOS/Linux)。パスワードよりも推奨される認証方法です。
  • passphrase (string): privateKey で指定した秘密鍵にパスフレーズが設定されている場合に指定します。秘密鍵ファイル自体にパスワードがかかっている場合の解除用パスワードです。
  • remotePath (string): 接続後の作業ディレクトリとなるリモートサーバー上のパスを指定します。指定しない場合、ユーザーのホームディレクトリなどがデフォルトとなることが多いですが、サーバー設定によります。重要な設定項目です。 例: /var/www/html/my-project。
  • uploadOnSave (boolean): true に設定すると、ファイルを保存するたびに自動的にリモートサーバーへアップロードされます。Webサイト開発などで変更をすぐに反映したい場合に便利ですが、意図しない変更をアップロードしてしまうリスクもあります。デフォルトは false。
  • ignore (string[]): アップロード、ダウンロード、同期などのファイル操作時に無視するファイルやディレクトリを指定します。.gitignore と同じような形式でパターンを指定できます。ローカル開発環境固有のファイル（.vscode, .git）、依存関係管理ディレクトリ（node_modules, vendor）、一時ファイルなどを除外するのに役立ちます。例: [".vscode", ".git", "node_modules", "*.log"]。
  • concurrency (number): 同時に実行するファイル操作の数（アップロード/ダウンロード）を指定します。並列処理数を調整することでパフォーマンスに影響します。デフォルトは 5。
  • secure (boolean): type が ftps の場合に使用します。true にするとSSL/TLSを使用して接続します。デフォルトは true。明示的に false にすることで、暗号化されていないFTP接続も可能です（非推奨）。
  • agent (string): SFTP接続でSSHエージェントを使用する場合に指定します。
  • ftp (object): type が ftp または ftps の場合の詳細設定オブジェクト。
    • ascii: ASCIIモードで転送するファイルパターンを指定します。テキストファイルなどを壊さずに転送するために重要です。例: [".html", ".css", ".js", ".php", "*.txt"]。
    • passive: パッシブモードを使用するかどうか。通常は true で問題ありません。
  • sftp (object): type が sftp の場合の詳細設定オブジェクト。
    • uploadMethod: アップロード方法 (‘sftp’, ‘scp’)。デフォルトは ‘sftp’。
    • downloadMethod: ダウンロード方法 (‘sftp’, ‘scp’)。デフォルトは ‘sftp’。
    • syncMode: 同期モード (‘full’, ‘update’, ‘mirror’)。後述の同期機能で使用します。
  • watcher (object): SFTP接続時のリモートファイル監視設定。ローカルでの変更をリモートに自動アップロードするのではなく、リモート側の変更をローカルに同期するような機能ではありません。
    • files (string): 監視するリモートファイル/ディレクトリのGlobパターン。
    • autoUpload (boolean): 監視対象ファイルがリモートで変更された場合にローカルを更新するかどうか…ではなく、ローカルでの変更を自動アップロードするかどうかの設定です（紛らわしいですがドキュメントに従います）。uploadOnSave がファイル保存時なのに対し、これはファイル変更時（保存以外も含む？）にトリガーされるようです。通常 uploadOnSave で十分です。
    • autoDelete (boolean): ローカルでファイルが削除されたときにリモートでも削除するかどうか。デフォルトは false。注意して使用してください。

これらの設定項目を適切に記述することで、VS Codeからリモートサーバーへの接続設定が完了します。

接続方法と基本的な操作

設定ファイルを保存したら、いよいよリモートサーバーに接続してファイルを操作します。

コマンドパレットからの接続:

  1. コマンドパレットを開きます (Ctrl+Shift+P または Cmd+Shift+P)。
  2. ftp-simple と入力し、候補の中から FTP-Simple: Remote directory open を選択します。
  3. 設定ファイルに複数の接続設定がある場合、リストが表示されるので、接続したい設定の名前（name で指定した名前）を選択します。
  4. 接続が成功すると、VS Codeのエクスプローラービューにリモートサーバー上のファイルとディレクトリが表示されます。remotePath で指定したディレクトリがルートとして表示されるはずです。

エクスプローラービューからの操作:

エクスプローラービューにリモートファイルが表示されたら、ローカルファイルと同じような感覚で操作できます。

  • ファイルを開く: リモートファイル名をクリックすると、ファイルがダウンロードされてVS Codeのエディタで開かれます。
  • ファイルの保存: 開いたファイルを編集し、保存（Ctrl+S または Cmd+S）すると、VS Codeは自動的にリモートサーバーに変更をアップロードします。uploadOnSave が false の場合は手動アップロードが必要です。
  • 手動アップロード/ダウンロード: エクスプローラービューでファイルやディレクトリを右クリックし、コンテキストメニューから「FTP-Simple: Upload File/Folder」や「FTP-Simple: Download File/Folder」を選択します。
  • ファイルの作成: エクスプローラービューでディレクトリを右クリックし、「FTP-Simple: Create New File」または「FTP-Simple: Create New Folder」を選択します。
  • ファイルの削除/リネーム: ファイルやディレクトリを右クリックし、「FTP-Simple: Delete」または「FTP-Simple: Rename」を選択します。
  • リモートディレクトリの更新: ディレクトリを右クリックし、「FTP-Simple: Refresh」を選択すると、リモート側の最新の状態を再取得して表示を更新します。

ワークスペースとの連携

VS Codeで開いているローカルフォルダ（ワークスペース）は、設定ファイルで指定した remotePath と紐付けられます。VS Codeのエクスプローラービューには、ローカルのファイルとリモートのファイルが並行して表示されるわけではありません。FTP-Simpleで接続している間は、エクスプローラービューがリモートファイル表示に切り替わるというイメージです。

ワークスペースのローカルファイルを開きたい場合は、FTP-Simpleの接続を解除するか、別のVS Codeウィンドウを開く必要があります。ただし、保存時に自動アップロードされるのは、VS Codeで開いて編集しているリモートファイルです。ローカルで作成・編集したファイルをリモートにアップロードするには、エクスプローラービューのリモート表示側でアップロード操作を行うか、ローカルフォルダとリモートフォルダを同期する別の拡張機能（後述のSFTP拡張機能などが持つ同期機能）を利用する必要があります。

FTP-Simpleのトラブルシューティング

  • 接続できない:
    • ftp-simple.json の host, port, username, password/privateKey, type が正しいか再確認してください。
    • サーバー側でファイアウォールがVS Codeからの接続をブロックしていないか確認してください。
    • port がデフォルト（FTP: 21, SFTP: 22）と異なる場合は、正しいポート番号を指定してください。
    • SFTP接続の場合、秘密鍵のパス（privateKey）が正しい絶対パスになっているか確認してください。秘密鍵ファイルに適切なパーミッション（自分以外読み書き不可など）が付与されているか確認してください。
    • サーバー側で指定された認証方法（パスワード認証か公開鍵認証か）と設定が一致しているか確認してください。
    • FTP接続の場合、アクティブモードとパッシブモードの設定（"passive": true）がサーバー側と合っているか確認してください。通常はパッシブモード（true）で問題ありません。
  • ファイルリストが表示されない: 接続はできたがファイルリストが空の場合、remotePath の指定が間違っている可能性があります。存在しないディレクトリや、ユーザーに権限のないディレクトリを指定していないか確認してください。
  • ファイルのアップロード/ダウンロードが失敗する:
    • サーバー側のディスク容量がいっぱいになっていないか確認してください。
    • ユーザーにファイル操作の権限があるか確認してください。
    • ignore 設定で意図せずファイルが除外されていないか確認してください。
    • ファイル名に特殊文字が含まれていないか確認してください。
    • ネットワークが不安定な場合、操作が失敗することがあります。
    • FTPの場合、ASCIIモードとバイナリモードの設定がファイルタイプと合っているか確認してください（"ascii": [...]）。
  • 日本語ファイル名やパスが文字化けする: FTPプロトコルは文字コードの扱いに互換性の問題が出やすいことがあります。SFTPでは通常問題ありません。FTP-Simpleには明示的な文字コード設定オプションは見当たりませんが、サーバー側の設定や他のFTPクライアントで接続できるかなどを確認してみてください。
  • 保存時に自動アップロードされない: uploadOnSave が true になっているか確認してください。また、保存しているファイルが現在開いているリモート接続のファイルであるか確認してください。
  • 設定ファイル .vscode/ftp-simple.json が作成されない: コマンドパレットで FTP-Simple: Config - Create/Edit ftp-simple settings を実行し、VS Codeでフォルダを開いている（ワークスペースが開いている）ことを確認してください。VS Codeウィンドウでファイル単体を開いているだけではワークスペースがないため作成できません。

FTP-Simpleの高度な使い方

  • 複数の接続設定: ftp-simple.json はJSON配列なので、複数のサーバーへの接続設定をリストとして追加できます。コマンドパレットから接続を選択する際に、リストから目的のサーバーを選べるようになります。
  • 設定の共有: .vscode/ftp-simple.json ファイルはプロジェクトフォルダ内に保存されるため、Gitなどでバージョン管理することで、チームメンバーと接続設定を共有できます。ただし、パスワードなどの機密情報を含める場合は、セキュリティリスクを十分に理解した上で、.gitignore に追加しないなど、慎重に取り扱う必要があります。 公開リポジトリにパスワード入りの設定ファイルをプッシュしないよう細心の注意を払ってください。機密情報は環境変数やVS Codeのシークレットストアなどの安全な方法で管理することを検討してください。FTP-Simpleは標準でVS Codeのシークレットストア連携機能は持っていないため、パスワードレスの公開鍵認証（SFTP）が推奨されます。

SFTP 拡張機能の詳細

「SFTP」拡張機能 (開発者: Luis Pabon) は、主にSFTPプロトコルに特化しており、FTP-Simpleよりも多機能で、特に強力な同期機能を備えています。

SFTPの概要と特徴

  • 主にSFTPプロトコルに対応（FTPSにも対応していますが、SFTPがメイン）。
  • 設定ファイル (.vscode/sftp.json) はワークスペースの .vscode ディレクトリ内に作成される。
  • 独自のSFTPエクスプローラービューを持ち、より柔軟なファイル操作と同期機能を提供。
  • ローカルとリモート間の同期機能（アップロード、ダウンロード、ミラーリング）。
  • 詳細なファイル監視設定。

インストール方法

前述の手順で、「SFTP」を検索してインストールします。開発者が「Luis Pabon」であることを確認してください。

基本的な設定ファイルの作成

SFTP拡張機能も、接続設定をワークスペースの .vscode/sftp.json ファイルに記述します。

設定ファイル作成の手順:

  1. VS Codeで、リモート編集したいプロジェクトのローカルフォルダを開きます。
  2. コマンドパレットを開きます (Ctrl+Shift+P または Cmd+Shift+P)。
  3. sftp と入力し、候補の中から SFTP: Config を選択します。
  4. .vscode/sftp.json ファイルが作成され、VS Codeで開かれます。最初はサンプルの設定が記述されています。

.vscode/sftp.json ファイルの構造

sftp.json もJSON形式で記述されます。複数の接続先を設定する場合は、オブジェクトのリストとして記述します。

json
[
{
"name": "My Remote Server (SFTP)",
"host": "your_remote_server.com",
"protocol": "sftp", // SFTP接続の場合
"port": 22,
"username": "your_username",
"password": "your_password", // 非推奨！代わりにprivateKeyPathを使用してください
// "privateKeyPath": "/path/to/your/ssh/private/key", // 推奨
// "passphrase": "your_key_passphrase", // privateKeyにパスフレーズがある場合
"remotePath": "/path/to/remote/directory", // リモート側の作業ディレクトリ
"uploadOnSave": true, // 保存時に自動アップロードするか
"ignore": [ // アップロード・ダウンロード・同期時に無視するファイル/ディレクトリ
".vscode",
".git",
".DS_Store",
"node_modules"
],
"watcher": { // ファイル監視設定
"files": "**/*", // 監視対象ファイル (Globパターン)
"autoUpload": true, // ローカルファイルの変更を自動アップロード
"autoDelete": true // ローカルファイルの削除を自動反映
},
"syncMode": "full", // 同期モード ('full', 'update', 'mirror')
"uploadCompression": "gzip" // アップロード時の圧縮設定 (任意)
}
// 他の接続設定をここに追加できます
/*
,
{
"name": "Another Server (SFTP)",
"host": "another_sftp_server.com",
"protocol": "sftp",
"port": 22,
"username": "another_username",
"password": "another_password",
"remotePath": "/another/remote/path",
"uploadOnSave": false
}
*/
]

各設定項目の詳細な説明

SFTP拡張機能の主な設定項目です（FTP-Simpleと共通する項目もあります）。

  • name (string, 必須): 接続設定の名前。
  • host (string, 必須): 接続先ホスト名またはIPアドレス。
  • protocol (string, 必須): 使用するプロトコル。通常は "sftp"。"ftps" も指定可能ですが、SFTP機能がメインです。
  • port (number): ポート番号。SFTPのデフォルトは 22。
  • username (string, 必須): ユーザー名。
  • password (string): パスワード認証用のパスワード。非推奨。
  • privateKeyPath (string): SSHキーペア認証用の秘密鍵ファイルへの絶対パス。例: /Users/YourUser/.ssh/id_rsa。~/.ssh/id_rsa のようなチルダ展開も可能です。privateKey (FTP-Simple) と異なり、ファイルパスを指定する点が異なります。推奨される認証方法です。
  • passphrase (string): 秘密鍵にパスフレーズがある場合に指定。
  • remotePath (string): リモート側の作業ディレクトリ。このパスが、ローカルのワークスペースフォルダと対応します。重要な設定項目です。
  • uploadOnSave (boolean): ファイル保存時の自動アップロード。デフォルトは false。
  • ignore (string[]): 無視するファイル/ディレクトリのパターンリスト。
  • uploadOnCreate (boolean): ローカルでファイル/ディレクトリが作成されたときに、自動的にリモートにも作成・アップロードするかどうか。デフォルトは false。
  • uploadOnChange (boolean): ローカルファイルの変更を自動的にアップロードするかどうか。uploadOnSave と似ていますが、保存時以外の変更も含まれる可能性があります。通常は uploadOnSave: true で十分です。
  • downloadOnOpen (boolean): リモートファイルを開いたときに、必ずリモートの最新版をダウンロードし直すかどうか。true にすると、ローカルにキャッシュされた古いバージョンではなく、常に最新版を編集できます。デフォルトは false。
  • syncMode (string): 同期機能を使う際のデフォルトモード。「full」「update」「mirror」から選択。詳細は後述。デフォルトは "full"。
  • watcher (object): ファイル監視設定。
    • files (string): 監視対象ファイルのGlobパターン。例: "**/*" (全てのファイル/ディレクトリ)。
    • autoUpload (boolean): ローカルで変更されたファイルを自動アップロード。通常 uploadOnSave があれば不要ですが、保存時以外にもトリガーしたい場合に。
    • autoDelete (boolean): ローカルでファイル/ディレクトリが削除されたときにリモートでも自動削除。デフォルトは false。非常に危険な設定なので注意して使用してください。
    • autoDownload (boolean): リモートで変更されたファイルを自動ダウンロード。デフォルトは false。VS CodeのRemote-SSHのようなリアルタイム双方向同期ではないため、ファイル競合などに注意が必要です。
  • concurrency (number): 同時接続数。デフォルトは 10。
  • ssh (object): SSH接続のより詳細な設定。
    • agent: SSHエージェントソケットのパス。
    • strictHostKeyChecking: ホストキーチェックの挙動 (‘yes’, ‘no’, ‘ask’)。
  • remotePlatform (string): リモートサーバーのOSプラットフォームを指定 (‘unix’, ‘win32’)。ファイルのパス区切り文字などに影響します。通常は自動検出されます。
  • protocolSpecific (object): プロトコル固有の設定。
    • ftps (object): FTPS接続の詳細設定。
      • explicit: 明示的SSL/TLS (true) または暗黙的SSL/TLS (false)。
      • secure: サーバー証明書の検証を行うかどうか (true)。自己署名証明書などで検証をスキップしたい場合は false に設定することもありますが、セキュリティリスクがあります。
  • uploadCompression (string): アップロード時の圧縮方法 (‘gzip’, ‘none’)。gzip を指定すると転送量を減らせる可能性がありますが、サーバー側での解凍処理が必要になる場合があります。
  • downloadCompression (string): ダウンロード時の圧縮方法 (‘gzip’, ‘none’)。
  • openRemoteDirOnConfig (boolean): 設定ファイルを開いたときに自動的にリモートディレクトリを開くかどうか。

接続方法と基本的な操作

SFTP拡張機能は、専用の「SFTP」ビューとコマンドパレットから操作できます。

SFTPエクスプローラービュー:

VS CodeのサイドバーにSFTPアイコンが表示されます。これをクリックするとSFTPビューが開きます。

  1. SFTPビューを開きます。
  2. 設定ファイルに複数の接続設定がある場合、ドロップダウンリストから接続したい設定の名前（name で指定した名前）を選択します。
  3. 「Connect」ボタンをクリックするか、右クリックメニューから「Connect」を選択します。
  4. 接続が成功すると、SFTPビューにリモートサーバー上のファイルとディレクトリが表示されます。ローカルのワークスペースフォルダの内容も同時に表示され、ローカル⇔リモート間のドラッグ＆ドロップ操作などが可能です。

基本的なファイル操作（SFTPビュー）:

  • ファイルを開く: リモートファイル名をダブルクリックまたは右クリックメニューから「Open」を選択すると、ファイルがダウンロードされてVS Codeのエディタで開かれます。
  • ファイルの保存: 開いたファイルを編集し保存（Ctrl+S または Cmd+S）すると、uploadOnSave: true であれば自動アップロードされます。手動でアップロードしたい場合は、エディタを右クリックして「SFTP: Upload File」を選択します。
  • アップロード/ダウンロード: SFTPビューでローカルまたはリモートのファイル/ディレクトリを右クリックし、「SFTP: Upload File/Folder」または「SFTP: Download File/Folder」を選択します。ローカル⇔リモート間でドラッグ＆ドロップでもアップロード/ダウンロードできます。
  • ファイルの作成/削除/リネーム: SFTPビューで右クリックメニューから選択します。
  • リモートディレクトリの閲覧: SFTPビューのリモート側ツリーでディレクトリをクリックすると、その内容が表示されます。

コマンドパレットからの操作:

SFTP拡張機能のほとんどの操作はコマンドパレットからも実行できます。SFTP: と入力して、利用可能なコマンドを確認してください。

  • SFTP: Connect: サーバーに接続します。
  • SFTP: Disconnect: 接続を切断します。
  • SFTP: Upload File: 現在アクティブなエディタのファイルをアップロードします。
  • SFTP: Download File: 現在アクティブなエディタのファイルをダウンロードします。
  • SFTP: Sync Local -> Remote: ローカルからリモートへ同期します。
  • SFTP: Sync Remote -> Local: リモートからローカルへ同期します。
  • SFTP: Compare Files: ローカルファイルとリモートファイルを比較します。
  • SFTP: List Files: コマンドライン形式でファイルリストを表示します。
  • SFTP: Rename File/Folder: ファイル/ディレクトリ名を変更します。
  • SFTP: Delete File/Folder: ファイル/ディレクトリを削除します。
  • SFTP: Create File: ファイルを作成します。
  • SFTP: Create Folder: ディレクトリを作成します。
  • SFTP: Config: 設定ファイルを開きます。

強力な同期機能

SFTP拡張機能の大きな特徴の一つは、ローカルとリモート間の同期機能です。これは、単にファイルをアップロード/ダウンロードするだけでなく、両者の状態を比較して差分を反映させる機能です。

同期機能は、主にコマンドパレットから実行します。

  • SFTP: Sync Local -> Remote: ローカルのファイル/ディレクトリを基準に、リモート側のファイル/ディレクトリを同期します。
    • リモートに存在しないローカルファイルはアップロードされます。
    • ローカルに存在しないリモートファイルは削除されます（syncMode が "mirror" の場合）。
    • ローカルで変更されたファイルはアップロードされます。
    • リモートで変更されたファイルは、ローカルの変更が優先されるため、リモートでの変更は失われます（syncMode が "full" や "update" の場合。詳細は後述）。
  • SFTP: Sync Remote -> Local: リモートのファイル/ディレクトリを基準に、ローカル側のファイル/ディレクトリを同期します。
    • ローカルに存在しないリモートファイルはダウンロードされます。
    • リモートに存在しないローカルファイルは削除されます（syncMode が "mirror" の場合）。
    • リモートで変更されたファイルはダウンロードされます。
    • ローカルで変更されたファイルは、リモートの変更が優先されるため、ローカルでの変更は失われます。

syncMode オプション

同期コマンドの挙動は、設定ファイルの syncMode オプションによって制御されます。これは同期コマンド実行時に選択することも可能です。

  • "full" (デフォルト): 双方向同期を試みます。ローカルとリモートの両方で変更されたファイルがある場合、競合が発生し、どちらか一方の変更が優先されることになります（通常はコマンドを実行した側の変更が優先されることが多いですが、タイムスタンプやファイルサイズなどで判断されることもあります）。注意して使用する必要があります。
  • "update": 変更または新規作成されたファイルのみを転送します。具体的には、ローカルまたはリモートで、相手側に存在しないファイル、または相手側より新しいタイムスタンプを持つファイルを転送します。削除は行いません。これは、差分アップロード/ダウンロードとして最も一般的に使われるモードです。
    • Local -> Remote (update): ローカルにありリモートにないファイル、またはローカルの方が新しいファイルをアップロード。
    • Remote -> Local (update): リモートにありローカルにないファイル、またはリモートの方が新しいファイルをダウンロード。
  • "mirror": 一方向のミラーリングを行います。同期元（LocalまたはRemote）のファイル構成と完全に一致するように、同期先を削除・追加・更新します。同期先のファイルが失われる可能性があるため、非常に注意が必要です。
    • Local -> Remote (mirror): ローカルにあるファイルのみをリモートにコピー（アップロード）。リモートにのみ存在するファイルは削除されます。
    • Remote -> Local (mirror): リモートにあるファイルのみをローカルにコピー（ダウンロード）。ローカルにのみ存在するファイルは削除されます。

同期機能は非常に便利ですが、特に "full" モードや "mirror" モードを使用する際は、意図しないファイルの上書きや削除が発生しないよう、事前にバックアップを取るなど慎重に行ってください。慣れないうちは "update" モードから始めることをお勧めします。

SFTPのトラブルシューティング

基本的な接続トラブルシューティングはFTP-Simpleと同様です（ホスト、ポート、ユーザー名、パスワード/秘密鍵、ファイアウォールなどを確認）。SFTP固有のトラブルシューティングは以下の通りです。

  • 秘密鍵認証がうまくいかない:
    • privateKeyPath のパスが正しい絶対パスになっているか確認してください。チルダ (~) はVS Codeまたは拡張機能が正しく展開できる環境であれば使用可能です。
    • 秘密鍵ファイルに適切なパーミッションが付与されているか確認してください（通常、所有者のみ読み書き可能、他はアクセス不可）。Windowsではパーミッション設定が少し異なりますが、他のSSHクライアントで接続できるかなどで確認できます。
    • 秘密鍵にパスフレーズがかかっている場合、passphrase を正しく設定しているか確認してください。
    • ssh-agent を使用している場合、エージェントに秘密鍵が追加されているか確認してください。
    • サーバー側の authorized_keys に対応する公開鍵が正しく設定されているか確認してください。
  • 同期が意図した通りにならない:
    • remotePath とローカルのワークスペースフォルダが、同期したいディレクトリのペアとして正しく設定されているか確認してください。
    • ignore 設定で同期から除外したいファイル/ディレクトリが正しく指定されているか確認してください。
    • syncMode の設定（または実行時に選択したモード）を確認してください。特に "mirror" モードは削除を伴うため注意が必要です。
    • ファイルのタイムスタンプがサーバーとローカルで正しく保持・比較されているか（ファイルシステムの仕様や転送プロトコルに依存する場合があります）。
  • SFTPビューが表示されない: 拡張機能が正しくインストールされ、VS Codeを再起動したか確認してください。サイドバーにアイコンが表示されない場合は、VS Codeの表示メニューから「外観」→「サイド バーを表示/非表示」→「SFTP」の項目があるか確認してください。
  • 大きなディレクトリを開くと遅い/タイムアウトする: ディレクトリ内のファイル数が非常に多い場合、リスト取得に時間がかかることがあります。サーバー側の負荷やネットワーク帯域も影響します。必要に応じて ignore 設定で不要なサブディレクトリを除外することも検討してください。

SFTPの高度な使い方

  • 複数の接続設定: FTP-Simpleと同様に、sftp.json はJSON配列なので、複数のサーバー設定を追加できます。
  • 設定の継承 ("extends"): 他の設定を継承して、一部の設定だけを上書きする機能です。共通設定が多い場合に便利です。
    json
    [
    {
    "name": "Base Settings",
    "host": "your_remote_server.com",
    "protocol": "sftp",
    "port": 22,
    "username": "your_username",
    "privateKeyPath": "~/.ssh/id_rsa"
    },
    {
    "name": "Project A",
    "extends": "Base Settings", // 上記の設定を継承
    "remotePath": "/var/www/html/project-a",
    "uploadOnSave": true,
    "ignore": [".git", "node_modules"]
    },
    {
    "name": "Project B",
    "extends": "Base Settings",
    "remotePath": "/var/www/html/project-b",
    "uploadOnSave": false
    // ignore 設定は継承される
    }
    ]
  • 同期の柔軟性: コマンドパレットからの同期実行時に、同期モードや同期方向を細かく指定できます。

他のリモート編集方法との比較

VS Codeでのリモート編集は、FTP/SFTP拡張機能以外にもいくつかの方法があります。主なものを比較し、FTP/SFTP拡張機能の立ち位置を明確にします。

1. VS Code Remote Development (SSH)

これはVS Code公式が提供するリモート開発機能で、SSH接続を利用します。

  • 仕組み: ローカルのVS CodeクライアントからSSH経由でサーバーに接続し、サーバー上にVS Code Serverをインストール・実行します。エディタのUIはローカルで動きますが、ファイル操作、ターミナル、拡張機能の実行などは全てリモートサーバー上で行われます。
  • メリット:
    • VS Codeの機能をほぼ100%リモート環境で利用できます（デバッグ、ターミナル、ほとんどの拡張機能）。
    • 大規模なプロジェクトでも高速な操作が可能です（リモート環境内で処理が完結するため）。
    • VS Code公式機能であり、安定性と継続的なサポートが期待できます。
  • デメリット:
    • サーバー側でSSH接続が可能であること。
    • サーバー側にVS Code Serverをインストールするための権限や容量が必要な場合があります（共有ホスティングでは難しいことが多い）。
    • SSHキーペアの設定など、FTP/SFTP拡張機能より初期設定がやや複雑に感じられる場合があります。
  • FTP/SFTP拡張機能との使い分け: サーバーにSSHアクセスが可能で、かつサーバー側にソフトウェアをインストールできる環境であれば、Remote – SSHの方が強力で推奨されます。共有ホスティングなど、SSHアクセスが制限されているか、SFTPしか許可されていない場合に、FTP/SFTP拡張機能が有効な選択肢となります。

2. 専用FTP/SFTPクライアント (FileZilla, WinSCP, Cyberduckなど)

これらのソフトウェアはファイル転送に特化しています。

  • 仕組み: リモートサーバーとの間でファイルを転送（アップロード/ダウンロード）することに主眼を置いています。エディタ機能は持たないか、非常に基本的なものに限られます。
  • メリット:
    • ファイル転送の機能に特化しており、安定しているものが多い。
    • 複雑なファイル転送（キュー、帯域制限など）やサイトマネージャー機能が充実している。
  • デメリット:
    • ファイルの編集には別途エディタが必要で、ワークフローが分断されます。
    • VS Codeのような高機能エディタの恩恵を直接受けられません。
  • VS Code FTP/SFTP拡張機能との使い分け: ファイルの編集よりも、大量のファイルのアップロード/ダウンロードや、サーバー間でのファイル移動など、ファイル転送そのものが主な作業である場合に適しています。VS Codeの拡張機能は、リモートファイルの「編集」をローカルエディタのような感覚で行うことに強みがあります。

結論として:

  • リモートサーバーでVS Codeの全機能を活用したい → Remote – SSH (SSHアクセス可能なら第一選択肢)
  • SSHアクセスがSFTP/FTPSに限定されている、またはサーバーにVS Code Serverをインストールできない → FTP-Simple または SFTP 拡張機能 (この記事の主題)
  • ファイル転送が主目的で、編集はローカルでオフラインで行うことが多い → 専用FTP/SFTPクライアント

VS CodeのFTP/SFTP拡張機能は、手軽にリモートファイルの編集をVS Code内で行いたい場合に非常に便利なツールです。

セキュリティに関する考慮事項

リモートサーバーへの接続設定には、ユーザー名やパスワード、秘密鍵といった機密情報が含まれます。これらの情報を安全に取り扱うことは非常に重要です。

1. パスワード認証の危険性

ftp-simple.json や .vscode/sftp.json ファイルに平文でパスワードを記述することは、以下のリスクを伴います。

  • ファイル漏洩: 設定ファイルが何らかの理由で漏洩した場合、サーバーへの不正アクセスを許してしまう可能性があります。特にパブリックなコードリポジトリに誤ってプッシュしてしまうなどの事故は避けなければなりません。
  • ローカル環境の危険性: ローカルPCがマルウェアに感染した場合、設定ファイルからパスワードが盗まれる可能性があります。

2. SSHキーペアによる認証の推奨（SFTPの場合）

SFTP接続では、パスワード認証よりもSSHキーペア認証（公開鍵認証）が強く推奨されます。

  • 仕組み: クライアント側で秘密鍵と公開鍵のペアを生成します。公開鍵をサーバーに登録し、接続時には秘密鍵を使って認証を行います。秘密鍵自体にパスフレーズを設定することで、さらにセキュリティを高めることができます。
  • メリット:
    • 秘密鍵ファイル自体が漏洩しても、パスフレーズがなければ不正利用されにくい。
    • パスワードのように総当たり攻撃で破られるリスクがない。
    • パスワードを平文で設定ファイルに保存する必要がなくなる。
  • 設定方法:
    1. ローカル環境でSSHキーペアを生成します（まだ持っていない場合）。コマンド例: ssh-keygen -t rsa -b 4096
    2. 生成された公開鍵 (id_rsa.pub など) の内容を、接続先サーバーのユーザーのホームディレクトリにある .ssh/authorized_keys ファイルに追加します。
    3. VS Codeの設定ファイル (ftp-simple.json の privateKey または sftp.json の privateKeyPath) に、ローカルの秘密鍵ファイルへのパスを指定します。
    4. 秘密鍵にパスフレーズを設定している場合は、passphrase も設定ファイルに記述します。
    5. サーバー側のSSH設定で、パスワード認証を無効化し、公開鍵認証のみを許可するように変更することを強くお勧めします。

公開鍵認証の設定は、サーバー側の知識も必要となりますが、セキュリティレベルを格段に向上させることができます。

3. ファイアウォール設定の確認

サーバー側のファイアウォールが、FTP（21）、SFTP（22）、FTPS（21または他のポート）のポートからの接続を許可しているか確認してください。特定のIPアドレスからの接続のみを許可するように設定することも、セキュリティ強化につながります。

4. 設定ファイルの取り扱い

  • バージョン管理システム: 公開リポジトリやチーム内で共有するリポジトリに、パスワードや秘密鍵のパスフレーズが記述された設定ファイルを登録しないように注意してください。.gitignore ファイルを使用して、.vscode/ftp-simple.json や .vscode/sftp.json をGitの管理対象から除外することを強く推奨します。
  • ローカルのセキュリティ: パスワードや秘密鍵ファイルを保存しているローカル環境のセキュリティ対策（OSのログインパスワード、ファイアウォール、マルウェア対策ソフトウェアなど）を怠らないでください。
  • VS Codeのシークレットストア: 一部のVS Code拡張機能やVS Code本体の設定では、パスワードなどの機密情報をOSの提供する安全なストア（macOSのKeychai、WindowsのCredential Managerなど）に保存する機能がありますが、ここで紹介したFTP-SimpleやSFTP拡張機能には、標準でその機能は搭載されていません（将来的に搭載される可能性はあります）。そのため、現在のバージョンでは秘密鍵認証の利用が最も現実的なセキュリティ対策となります。

パフォーマンス最適化のヒント

リモート編集のパフォーマンスは、ネットワーク環境、サーバー負荷、ファイルサイズ、同時接続数など、多くの要因に影響されます。快適な作業のために、以下の点を考慮すると良いでしょう。

  • ネットワーク環境: 安定した高速なインターネット接続が不可欠です。可能な限り有線接続を利用し、Wi-Fiの場合は安定性の高い環境を選びましょう。
  • サーバー負荷: サーバーのリソース（CPU、メモリ、ディスクI/O）に十分な余裕があるか確認してください。サーバーが高負荷状態では、ファイル操作も遅延します。
  • 同時接続数の調整:
    • FTP-Simpleの concurrency (デフォルト 5), SFTPの concurrency (デフォルト 10) 設定は、同時にいくつのファイル転送タスクを実行するかを制御します。
    • ネットワーク帯域に余裕がある場合、この値を増やすことで多数の小さなファイルの転送速度が向上する可能性があります。
    • ただし、サーバー側で同時接続数に制限があったり、値を増やしすぎるとサーバーに過負荷をかけたり、かえってパフォーマンスが低下したりする可能性があります。適切な値は環境によって異なるため、デフォルト値から始めて、必要に応じて調整してみてください。
  • ignore 設定の活用:
    • ignore 設定を適切に行うことで、不要なファイルやディレクトリ（バージョン管理ファイル、依存関係管理フォルダ、ビルド生成物など）のアップロード、ダウンロード、同期を防ぐことができます。
    • これにより、転送量が減り、ファイルリストの取得や同期処理が高速化されます。特に node_modules や vendor のような大量のファイルが含まれるディレクトリを無視対象に含めることは非常に効果的です。
  • 大きなファイルの取り扱い:
    • 数GBといった巨大なファイルを編集するような用途には、FTP/SFTP経由のリモート編集は向いていません。ファイルのダウンロード・アップロードに時間がかかりすぎます。
    • 大きなファイルを扱う必要がある場合は、Remote – SSHでサーバー上のエディタ機能を利用するか、専用のファイル転送ツールで事前に転送するなどの方法を検討してください。
  • 同期機能の使い分け（SFTP）:
    • syncMode の "update" モードは、差分のみを転送するため、毎回全体を転送するよりも効率的です。
    • "mirror" モードは削除を伴うため、ファイル数が多い場合は時間がかかる可能性があります。
  • キャッシュ設定: SFTP拡張機能には、リモートディレクトリ情報をローカルにキャッシュする機能（デフォルト有効）があります。これにより、ディレクトリを開き直す際の表示速度が向上します。キャッシュをクリアしたい場合は、コマンドパレットから SFTP: Clear Cache を実行できます。
  • uploadOnSave の影響: uploadOnSave: true は便利ですが、頻繁に保存するファイル（特に大きなファイル）や、多数のファイルが同時に変更される場合、ネットワークトラフィックを増やし、サーバー負荷を高める可能性があります。環境や作業内容に応じて false に設定し、手動またはまとめてアップロードすることも検討してください。

これらのヒントを参考に、ご自身の環境に合わせた設定や運用方法を見つけてください。

実践的なワークフロー例

VS CodeのFTP/SFTP拡張機能は、様々なシナリオで活用できます。いくつかの実践的なワークフロー例を紹介します。

1. Webサイト開発におけるファイル編集・アップロード

最も一般的な利用シナリオです。

  1. ローカルにプロジェクト用のフォルダを作成し、VS Codeで開きます。
  2. .vscode/ftp-simple.json または .vscode/sftp.json を作成/編集し、FTP/SFTP接続情報を設定します。remotePath にはサーバー上のWebサイトのルートディレクトリ（例: /var/www/html/my-site）を指定します。ignore には .git, node_modules, composer.lock, vendor などの不要なファイルを指定します。uploadOnSave: true に設定しておくと便利です。
  3. FTP-Simpleの場合はコマンドパレットから FTP-Simple: Remote directory open、SFTPの場合はSFTPビューから接続します。
  4. VS Codeのエクスプローラービュー（またはSFTPビューのリモート側）で、編集したいファイルを開きます。
  5. ファイルを編集し、保存します。uploadOnSave: true であれば自動的にサーバーにアップロードされ、すぐにブラウザで確認できます。
  6. 新しいファイルを作成したり、既存のファイルを削除/リネームしたりする場合も、エクスプローラービュー（またはSFTPビュー）から直感的に操作できます。
  7. SFTP拡張機能を使っている場合、ローカルで複数ファイルを作成・編集した後、まとめて SFTP: Sync Local -> Remote (update) コマンドで効率的にアップロードすることも可能です。

注意点:

  • uploadOnSave: true は便利ですが、保存するたびに本番環境が更新されることになります。ステージング環境でテストするなどのプロセスがない場合、意図しない変更を公開してしまうリスクがあります。
  • コンパイルやビルドが必要なプロジェクト（React, Vue, Sassなど）では、ローカルでビルドしてから生成されたファイルをアップロードする必要があります。この場合、ビルド後のファイルのみをアップロード対象とし、ソースコードや設定ファイルなどは無視するように ignore 設定を工夫する必要があります。

2. サーバー上の設定ファイル編集

開発環境や本番環境のサーバー上の設定ファイル（Nginx, Apacheの設定ファイル、PHPの設定ファイル、アプリケーション独自の設定ファイルなど）を編集したい場合にも役立ちます。

  1. 設定ファイルが存在するディレクトリに対応するローカルフォルダをVS Codeで開きます。
  2. 接続設定ファイルを作成し、remotePath に設定ファイルのあるディレクトリ（例: /etc/nginx/sites-available, /etc/php/7.4/apache2/conf.d など）を指定します。
  3. 接続し、目的の設定ファイルを開きます。
  4. ファイルを編集し、保存/アップロードします。
  5. 設定変更後、通常はサーバー上でサービスを再起動する必要があります（例: sudo systemctl reload nginx）。この操作はVS Codeのターミナル機能では直接行えないため、別途SSHクライアントなどでサーバーにログインして実行する必要があります。VS Code Remote-SSHを使っていれば、VS Code内でターミナルを開いて実行できます。

注意点:

  • システムファイルや設定ファイルの編集は、サーバーの動作に直接影響します。誤った設定でサーバーが起動しなくなるなどのリスクがあるため、事前に設定ファイルのバックアップを取るなどの対策を強く推奨します。
  • これらのファイルは通常root権限で保護されています。編集するにはサーバー側のユーザーに適切な権限が必要になります。

3. 複数人での開発における注意点

複数の開発者が同じサーバー上の同じファイルを同時に編集する可能性がある場合、競合が発生するリスクがあります。

  • 上書き: ある開発者がファイルを編集・保存し、別の開発者が古いバージョンのファイルを編集・保存すると、先に保存した変更が後から保存した変更によって上書きされてしまいます。
  • 対策:
    • 可能な限り、バージョン管理システム（Gitなど）を利用し、ローカルで開発・コミット・プッシュし、サーバー側ではプルまたはデプロイするワークフローを採用する。
    • それが難しい場合、編集前に必ず最新版をダウンロードし、編集・アップロード後は他の開発者に通知するなど、チーム内でルールを定める。
    • SFTP拡張機能の同期機能（特に "update" モード）も、ローカルとリモートのタイムスタンプを比較して差分を反映させるため、ある程度の競合回避には役立ちますが、完全ではありません。
    • 最も良いのは、Remote – SSHのようにサーバー上で開発環境を共有するか、コンテナ技術（Dockerなど）を利用して各開発者が独立した環境で作業できるような仕組みを導入することです。

FTP/SFTP拡張機能は手軽さが魅力ですが、大規模なチーム開発や複雑なプロジェクトでは、より高度なワークフローやツールを検討することも重要です。

よくある質問 (FAQ)

Q: 接続できないのですが、どこを確認すれば良いですか？

A: 以下の点を順に確認してください。

  • 設定ファイル（ftp-simple.json または .vscode/sftp.json）の host, port, username, type/protocol が正しいか。
  • パスワードまたは秘密鍵の設定が正しいか。SFTPで秘密鍵を使っている場合は、パスの絶対パス、秘密鍵のパーミッション、パスフレーズが正しいか確認。
  • サーバー側でファイアウォールがポートを開放しているか。
  • サーバー側で指定された認証方法（パスワード認証/公開鍵認証）と設定が一致しているか。
  • FTPの場合、アクティブ/パッシブモードの設定が正しいか（通常パッシブモードでOK）。
  • コマンドパレットやSFTPビューで、接続しようとしている設定の名前が正しいか。
  • VS Codeの出力ウィンドウ（表示 > 出力、ドロップダウンで「FTP-Simple」または「SFTP」を選択）にエラーメッセージが出ていないか確認。

Q: 設定ファイル .vscode/ftp-simple.json や .vscode/sftp.json はどこに置くのが一般的ですか？

A: 通常は、その接続設定を使ってリモート編集を行うローカルのプロジェクトフォルダの直下にある .vscode ディレクトリに置きます。これにより、VS Codeでそのプロジェクトフォルダを開いたときに、自動的に設定が読み込まれます。

Q: パスワードをファイルに平文で保存したくないのですが、どうすれば良いですか？

A: SFTP接続であれば、SSHキーペア認証（公開鍵認証）を利用するのが最も安全で推奨される方法です。設定ファイルには秘密鍵ファイルへのパスを指定し、パスワードは記述しません。秘密鍵にパスフレーズを設定しておけば、さらにセキュリティが高まります。FTP/FTPS接続の場合は、キーペア認証が使えないため、パスワード認証となり、パスワードの取り扱いに注意が必要です。VS Codeのシークレットストア連携機能があれば良いのですが、現状これらの拡張機能には標準搭載されていません。

Q: SFTPとFTPSの違いは何ですか？

A: どちらも暗号化された安全なファイル転送プロトコルですが、ベースとなる技術が異なります。
* SFTP (SSH File Transfer Protocol): SSHプロトコル上で動作します。SSH接続が確立されれば、そのセキュアなトンネルを利用してファイル転送が行われます。ポートは通常22番です。SSHの認証方法（パスワード認証、公開鍵認証など）を利用できます。
* FTPS (FTP over SSL/TLS): 既存のFTPプロトコルにSSL/TLSによる暗号化を追加したものです。データ転送用のポートを別に開く必要がある（パッシブモード時）など、FTPの仕組みを引き継いでいるため、ファイアウォールの設定などがSFTPより複雑になる場合があります。ポートは通常21番ですが、明示的/暗黙的SSLによって挙動が異なります。

セキュリティやファイアウォール越しの接続のしやすさから、可能であればSFTPを利用することが推奨されます。

Q: SFTP拡張機能の同期機能がうまく動きません。

A:
* sftp.json の remotePath とローカルワークスペースフォルダが正しく対応しているか確認してください。
* ignore 設定で同期対象から外されていないか確認してください。
* 同期コマンド (SFTP: Sync Local -> Remote, SFTP: Sync Remote -> Local) を実行した際に、出力ウィンドウにエラーが出ていないか確認してください。
* syncMode の設定（full, update, mirror）が意図した通りになっているか確認してください。
* 手動でのアップロード/ダウンロードは成功するか確認し、接続自体に問題がないか切り分けてください。
* タイムスタンプやファイルサイズに基づいて同期判断が行われるため、サーバーやローカルのファイルシステムがこれらの情報を正しく扱えるか、あるいは転送プロトコルがそれを保持できるかも影響します。

まとめ

VS CodeのFTP/SFTP拡張機能は、リモートサーバー上のファイルをローカルファイルシステムのように手軽に編集できる強力なツールです。特に、VS Codeが提供する豊富なエディタ機能や拡張機能エコシステムを活用しながらリモート作業を行える点は大きなメリットです。

本記事で紹介したFTP-SimpleとSFTPは、それぞれ異なる特徴を持っています。FTP-Simpleはシンプルさ、SFTPは多機能性（特に同期機能）が魅力です。ご自身のニーズに合わせて最適な拡張機能を選択し、設定ファイル（ftp-simple.json または .vscode/sftp.json）を適切に記述することで、VS Codeからリモート環境への接続を確立できます。

しかし、これらの拡張機能を利用する際には、セキュリティに関する考慮が不可欠です。パスワードの平文保存のリスクを理解し、可能であればSFTPのSSHキーペア認証を利用することを強く推奨します。また、設定ファイルの取り扱いには十分注意し、バージョン管理システムで共有する際は機密情報を含めないように配慮してください。

パフォーマンスについては、ネットワーク環境やサーバー負荷に加え、同時接続数や ignore 設定の調整が有効です。大規模なプロジェクトや、より高度なリモート開発が必要な場合は、VS Code公式のRemote – SSH機能も検討に値します。

この記事が、VS Codeを用いたFTP/SFTPリモート編集の導入から実践までの一助となれば幸いです。快適なリモート開発ライフを送りましょう！

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール