VS CodeでFTPを使う方法を解説

By /

VS CodeでFTP/SFTPを使う方法：詳細解説

はじめに

Visual Studio Code (以下、VS Code) は、軽量ながら高機能な無料のソースコードエディタとして、世界中の開発者に広く利用されています。プログラミング言語のサポート、デバッグ機能、Git連携など、多くの強力な機能を標準で備えているだけでなく、豊富な拡張機能によってその機能をさらに拡張できるのが大きな魅力です。

Web開発やサーバーサイドの開発を行っていると、ローカル環境で作成したファイルをリモートのWebサーバーやFTPサーバーにアップロードしたり、サーバー上のファイルを直接編集したりする必要が出てくることがよくあります。このようなファイル転送やリモート編集の際に利用されるプロトコルとして、古くからFTP (File Transfer Protocol) が、そしてより安全な代替手段としてSFTP (SSH File Transfer Protocol) が広く使われています。

通常、FTP/SFTPを利用するには、FileZillaやWinSCPのような専用のFTPクライアントソフトウェアを使用します。しかし、開発ワークフローにおいては、コーディング、デバッグ、バージョン管理といった作業をVS Codeという一つの環境で完結させたいというニーズがあります。VS Codeの拡張機能を利用することで、このニーズに応え、エディタから離れることなくシームレスにリモートファイルへアクセスし、編集することが可能になります。

この記事では、VS CodeでFTPおよびSFTPを利用するための具体的な方法について、最も一般的に利用されている拡張機能を中心に、その設定方法から日々の操作、便利な機能、そして潜在的な問題への対処法まで、詳細かつ網羅的に解説します。また、セキュリティの観点からFTPの利用が推奨されない理由や、より安全なSFTPの利用方法、さらにはVS Codeが提供する他のリモート開発手段についても触れ、読者が自身の開発環境に最適な方法を選択できるようサポートします。

対象読者は、VS Codeを使ってWebサイトやサーバーサイドアプリケーションを開発しており、リモートサーバー上のファイルへのアクセスを効率化したいと考えている方々です。FTPやSFTPの基本的な知識があるとより理解が進みますが、プロトコルの詳細を知らなくてもVS Codeで利用するための設定や操作は可能です。

重要な注意点として、FTPプロトコルは認証情報（ユーザー名、パスワード）やファイルデータが暗号化されずにネットワーク上を流れるため、セキュリティ上のリスクが非常に高いです。 クレジットカード情報や個人情報などの機密情報がやり取りされるシステムでは、絶対にFTPを使用してはいけません。可能な限り、暗号化された安全なプロトコルであるSFTPまたはFTPS (FTP over SSL/TLS) を使用することを強く推奨します。この記事では、設定方法の説明のためにFTPについても触れますが、その危険性を十分に理解した上で、利用は最小限に留めるか、全く利用しないようにしてください。特に理由がない限り、SFTPを利用することを前提に読み進めてください。

それでは、VS Codeを使ったFTP/SFTP連携の世界に入っていきましょう。

FTP/SFTPの基本

VS Codeでの利用方法を学ぶ前に、まずはFTPとSFTPの基本的な仕組みと違いについて理解しておきましょう。これは、設定を行う上で、なぜ特定の設定項目が必要なのか、あるいはなぜSFTPが推奨されるのかといった背景を理解するのに役立ちます。

FTP (File Transfer Protocol)

FTPは、その名の通りファイルを転送するための最も基本的なプロトコルの一つで、インターネットが普及する以前から存在します。クライアント（あなたのPC）とサーバー（ファイルを置いているリモートマシン）間でファイルをやり取りするために設計されています。

FTPの大きな特徴は、制御用コネクションとデータ用コネクションという、役割の異なる2つのTCPコネクションを使用することです。

  • 制御用コネクション (デフォルトポート: 21):
    このコネクションは、クライアントとサーバーの間でコマンド（ファイル一覧の取得、ディレクトリの移動、ファイル名の変更など）と応答（コマンドの成功/失敗、エラーメッセージなど）をやり取りするために使われます。ログイン認証もこのコネクション上で行われます。このコネクションは、セッションが継続している間は基本的に接続されたままになります。

  • データ用コネクション:
    このコネクションは、実際のファイルデータの転送（アップロードやダウンロード）や、ファイル一覧の情報を転送するために使われます。ファイル転送や一覧取得が必要になるたびに確立され、転送が完了すると閉じられます。データ用コネクションの確立方法には、アクティブモードとパッシブモードの2種類があります。

    • アクティブモード:
      クライアントがポートを開放し、サーバーに対してそのポートへの接続を要求します。サーバーはクライアントのデータポートに接続してデータ転送を開始します。クライアント側のファイアウォールによっては、サーバーからの接続をブロックしてしまうことがあり、接続がうまくいかない原因となることがあります。
    • パッシブモード:
      クライアントがデータ転送コマンドを発行すると、サーバーはデータ転送に使うポート番号をクライアントに通知します。クライアントはそのポート番号に接続してデータ転送を開始します。多くの場合、サーバー側のファイアウォールで特定のポート範囲を開放しておく必要がありますが、クライアント側のファイアウォール設定に依存しないため、アクティブモードより接続トラブルが少ないとされています。現代のFTPクライアントやサーバーは、ほとんどがパッシブモードをデフォルトとしています。

FTPの大きな欠点は、すべての通信（認証情報、コマンド、データ）が暗号化されず、平文で行われることです。ネットワークを盗聴されると、ユーザー名やパスワードが容易に漏洩し、不正アクセスにつながる可能性があります。

SFTP (SSH File Transfer Protocol)

SFTPは、FTPという名前が付いていますが、FTPプロトコルとは全く異なるプロトコルです。SFTPは、SSH (Secure Shell) プロトコルの一部として開発されました。SSHは、リモートマシンへの安全な接続を提供するためのプロトコルで、認証やデータ転送を含むすべての通信が暗号化されます。

SFTPは、このSSH接続上でファイル転送機能を提供します。SSHの標準ポートは22番です。SFTPは、FTPのように複数のコネクションを使うのではなく、単一のSSHコネクション上で制御コマンドとデータ転送の両方を行います。

SFTPの主な利点は以下の通りです。

  • セキュリティ: SSHトンネル内で全ての通信が暗号化されるため、認証情報やファイルデータが盗聴される心配がありません。
  • ファイアウォールへの対応: 通常、単一のポート（デフォルト22番）を使用するため、ファイアウォールの設定が容易です。FTPのようなアクティブ/パッシブモードの問題もありません。
  • 機能: ファイル転送だけでなく、リモートでのファイル一覧取得、ディレクトリ操作、ファイル名の変更、権限変更（chmod）など、FTPと同様またはそれ以上の豊富な機能を持ちます。

このような理由から、特にセキュリティが重要な場面では、FTPではなくSFTPを利用することが強く推奨されます。多くのホスティングサービスやVPSでは、SSHアクセスと共にSFTPアクセスも提供しています。

FTPS (FTP over SSL/TLS)

SFTPとは別に、FTPにSSL/TLSプロトコルによる暗号化を追加したFTPSというプロトコルも存在します。FTPSには、制御コネクションとデータコネクションの両方をSSL/TLSで保護するImplicit FTPS (通常ポート990) と、制御コネクションを確立した後に明示的なコマンド（AUTH TLSなど）でSSL/TLSによる保護を開始するExplicit FTPS (通常ポート21) の2種類があります。

FTPSはFTPをベースとしているため、データコネクションの確立方法（アクティブ/パッシブモード）に関する問題は依然として存在します。セキュリティの観点ではFTPSも有効な手段ですが、SFTPの方がシンプルでファイアウォール越えの問題も少ないため、より広く利用されています。VS Codeの主要な拡張機能も、SFTPへの対応がより充実しています。

この記事では、特に断りがない限り、安全性の高いSFTPを利用する方法を中心に解説を進めます。設定の説明においてFTPやFTPSについても触れますが、可能であればSFTPを選択してください。

VS CodeでFTP/SFTPを利用するメリット・デメリット

VS Codeの拡張機能を使ってFTP/SFTPを利用することには、専用クライアントを使う場合とは異なるメリットとデメリットがあります。

メリット

  1. シームレスな開発ワークフロー:
    これが最大のメリットです。ファイルを開く、編集する、保存するといった一連の作業をVS Code内で行え、保存と同時にリモートサーバーにアップロード（設定による）できます。専用クライアントとエディタを行き来する手間が省け、開発スピードが向上します。
  2. VS Codeの豊富な機能を活用:
    シンタックスハイライト、コード補完、Emmet、Linting、フォーマットなど、VS Codeが提供する優れた編集支援機能をリモートファイルに対しても利用できます。ローカル環境で編集しているかのような感覚で作業できます。
  3. ローカルとの同期:
    リモートサーバー上の特定のディレクトリとローカルのプロジェクトディレクトリを簡単に同期できます。これにより、サーバー上の最新のファイル群をローカルに持ってきたり、ローカルで開発したコードを一括でサーバーにアップロードしたりすることが容易になります。
  4. 統一されたUIと操作性:
    VS Codeに慣れていれば、新しいソフトウェアの使い方を覚える必要がありません。慣れ親しんだキーバインドやUIでリモートファイルを扱えます。
  5. 設定のプロジェクトごとの管理:
    プロジェクト固有のFTP/SFTP設定を.vscodeディレクトリ内の設定ファイルとして保存できるため、プロジェクトを開くだけでリモート接続設定が自動的に読み込まれ、チーム内で設定を共有することも容易です。

デメリット

  1. 設定の手間:
    拡張機能のインストールに加え、接続先サーバーごとの設定ファイルを作成する必要があります。最初の設定には多少の手間がかかります。
  2. 回線状況への依存:
    常にリモートサーバーと通信しながら作業するため、インターネット回線の速度や安定性にパフォーマンスが大きく依存します。回線が不安定な場合、ファイルの保存や開くのに時間がかかったり、エラーが発生したりすることがあります。
  3. 同期による意図しない変更リスク:
    双方向同期などを行う場合、意図しないファイルがローカル環境とリモートサーバー間で上書きされたり削除されたりするリスクがあります。特にチーム開発環境では、慎重な運用が必要です。
  4. オフライン作業の限界:
    サーバーに接続していない状態では、リモートファイルを直接編集することはできません。ローカルにファイルをダウンロードして編集し、後でアップロードする必要があります。
  5. 高度なFTP/SFTP機能の制約:
    専用クライアントが提供するような、きめ細やかな転送設定、キュー管理、転送ログの詳細表示、特定のエンコーディングでのファイル転送など、一部の高度な機能は拡張機能では利用できない場合があります。

これらのメリット・デメリットを踏まえ、自身の開発スタイルやプロジェクトの要件に合った方法を選択することが重要です。小規模なプロジェクトや個人開発で、サーバー上のファイルを頻繁に編集する必要がある場合には、VS Code連携は非常に強力なツールとなり得ます。

VS CodeでFTP/SFTPを使うための準備

VS CodeでFTP/SFTPを使うために必要な準備は以下の通りです。

  1. VS Codeのインストール:
    まず、お使いのオペレーティングシステム（Windows, macOS, Linux）にVS Codeがインストールされている必要があります。まだインストールしていない場合は、VS Code公式サイトからダウンロードしてインストールしてください。インストール方法は各OSによって異なりますが、一般的なソフトウェアインストール手順に従えば問題ありません。
  2. FTP/SFTPサーバーの準備:
    接続先のFTPまたはSFTPサーバーが必要です。これは、Webホスティングサービスが提供するサーバー、VPS (Virtual Private Server)、専用サーバー、あるいはローカルネットワーク内のサーバーなど、様々な形態があり得ます。SFTPを利用するには、サーバー側でSSHサービスが有効になっている必要があります。
  3. 必要な情報の確認:
    サーバーへの接続と認証に必要な以下の情報を手元に用意してください。

    • ホスト名またはIPアドレス: サーバーのアドレスです (例: yourdomain.com, 192.168.1.100)。
    • ポート番号: 接続に使うポート番号です。SFTPは通常22、FTPは通常21、Implicit FTPSは通常990、Explicit FTPSは通常21です。サーバー管理者やホスティングプロバイダーから提供された情報を確認してください。
    • ユーザー名: サーバーにログインするためのユーザー名です。
    • パスワード: サーバーにログインするためのパスワードです。ただし、セキュリティの観点から、SFTP接続においてはパスワード認証よりもSSH秘密鍵認証が推奨されます。 秘密鍵認証を利用する場合は、パスワードは不要ですが、代わりに以下の情報が必要になります。
    • SSH秘密鍵のパス: SSH秘密鍵認証を利用する場合の秘密鍵ファイルのパスです (例: /home/user/.ssh/id_rsa, C:\Users\user\.ssh\id_rsa)。公開鍵はあらかじめサーバー側の~/.ssh/authorized_keysなどに登録しておく必要があります。
    • リモートパス: 接続後、デフォルトで表示したいサーバー上のディレクトリの絶対パスまたは相対パスです。例えば、Webサイトの公開ディレクトリが/var/www/htmlであれば、それを設定することが多いです。

これらの情報が揃っていることを確認したら、いよいよVS Code拡張機能をインストールして設定を進めます。

主要なVS Code拡張機能の紹介

VS Codeには、FTPやSFTP接続を可能にする複数の拡張機能が存在します。ここでは、代表的なものをいくつか紹介し、その中でも広く利用されている「SFTP」拡張機能に焦点を当てて、以降の詳細な使い方を解説します。

  • SFTP (liximomo.vscode-sftp):
    最も人気があり、広く利用されている拡張機能の一つです。SFTP、FTP、FTPSに対応しており、設定ファイルによる詳細な制御、ファイルの自動アップロード（保存時）、同期機能、リモートファイルブラウザなど、多くの機能を提供します。後述する詳細解説は、この拡張機能に基づいています。
  • Remote – SSH (ms-vscode.remote-ssh):
    これはFTP/SFTPクライアント機能を提供するものではありませんが、VS Codeの強力なRemote Development拡張機能パックの一部です。SSH経由でリモートサーバーに接続し、サーバー上にVS Code Serverという軽量なバックエンドをインストールすることで、あたかもローカル環境で開発しているかのように、リモートサーバー上のファイルシステムを直接操作できます。Remote – SSHは、SFTPによるファイル転送よりも、より統合されたリモート開発体験を提供します。大規模なプロジェクトや、リモートサーバー上で直接コンパイルやデバッグを行いたい場合に非常に強力です。ただし、サーバー側にSSHアクセスが可能であり、VS Code Serverをインストールできる環境が必要です。
  • ftp-simple (humao.ftp-simple):
    SFTPやFTPSにも対応した、シンプルで使いやすい拡張機能です。JSON形式の設定ファイルで複数の接続先を管理できます。基本的なアップロード/ダウンロード機能を提供します。
  • Remote-FTP (jcfilboy.remote-ftp):
    こちらもFTP/SFTP/FTPSに対応した拡張機能です。エクスプローラービューにリモートファイルツリーを表示し、直感的な操作を提供します。設定ファイルは.ftpconfigという名前を使用します。

どの拡張機能を選択するかは、個人の好みや必要な機能によって異なります。しかし、機能の豊富さ、高いカスタマイズ性、そして多くのユーザーによる利用実績から、まずは「SFTP」拡張機能を試してみることをお勧めします。

以降の章では、この「SFTP」拡張機能に焦点を当てて、インストールから詳細な設定、日常的な操作までを解説します。

「SFTP」拡張機能の詳細な使い方

ここでは、「SFTP」拡張機能（liximomo.vscode-sftp）を例に、VS CodeでFTP/SFTPを利用するための具体的な手順を解説します。

1. インストール方法

VS Codeに拡張機能をインストールする手順は簡単です。

  1. VS Codeを開きます。
  2. 左側のアクティビティバーにある「拡張機能」アイコン（四角が3つと飛び出す矢印のようなアイコン、ショートカットは Ctrl+Shift+X または Cmd+Shift+X）をクリックします。
  3. 検索バーに「SFTP」と入力します。
  4. 検索結果の中から、「SFTP」という名前で、作者が「liximomo」となっている拡張機能を探します。アイコンは通常、青い矢印のアイコンです。
  5. 見つけたら、その項目をクリックして詳細ページを開き、「インストール」ボタンをクリックします。
  6. インストールが完了すると、「インストール」ボタンが「無効にする」「アンインストール」に変わります。

これで「SFTP」拡張機能のインストールは完了です。VS Codeを再起動する必要はありません。

2. 設定ファイルの作成 (sftp.json)

「SFTP」拡張機能は、プロジェクトのワークスペースフォルダ直下にある.vscodeディレクトリ内に作成されるsftp.jsonというファイルに、接続先サーバーの設定情報を記述します。このファイルは、接続先のホスト名、ポート番号、認証情報、リモートパス、同期設定など、拡張機能の動作を制御する全ての情報を含みます。

sftp.jsonファイルは手動で作成することも可能ですが、拡張機能が提供するコマンドを利用するのが最も簡単で正確です。

  1. VS Codeで、SFTP接続を設定したいプロジェクトのフォルダを開きます（ファイル > フォルダーを開く... または File > Open Folder...）。単一ファイルではなく、必ずフォルダを開いてください。 .vscodeディレクトリがワークスペースフォルダ直下に作成されるためです。
  2. コマンドパレットを開きます（Ctrl+Shift+P または Cmd+Shift+P）。
  3. コマンドパレットに「SFTP: Config」と入力します。
  4. 候補に表示される「SFTP: Config」を選択して実行します。
  5. 初めて実行する場合、拡張機能はワークスペースフォルダ直下に.vscodeディレクトリを作成し、その中にsftp.jsonファイルを生成します。そして、このファイルがVS Codeのエディタで開かれます。

生成されたsftp.jsonファイルには、以下のような基本的な設定例が記述されています。

json
[
{
"name": "My Server",
"host": "hostname or ip",
"protocol": "sftp",
"port": 22,
"username": "username",
"password": "password",
"remotePath": "/path/to/remote/folder",
"uploadOnSave": true,
"ignore": [
".vscode",
".git",
".DS_Store"
],
"syncOption": {}
}
]

このsftp.jsonはJSON形式の配列になっており、{}ブロックが1つのサーバー設定を表します。複数のサーバー設定を管理したい場合は、この配列の中に{}ブロックをカンマ区切りで追加していきます。

3. 各設定項目の詳細な説明と例

sftp.jsonファイル内の主要な設定項目について詳しく解説します。

  • "name": "My Server"
    • この接続設定の名前です。VS CodeのUI（コマンドパレットやSFTPビュー）で表示される際に、この名前で識別されます。複数の設定がある場合に分かりやすい名前を付けましょう。必須項目です。
  • "host": "hostname or ip"
    • 接続先のFTP/SFTPサーバーのホスト名またはIPアドレスを指定します。必須項目です。
    • 例: "yourdomain.com", "192.168.1.100"
  • "protocol": "sftp"
    • 使用するプロトコルを指定します。
    • "sftp": SFTP (SSH File Transfer Protocol) を使用します。最も推奨される設定です。
    • "ftp": 無印FTPを使用します。セキュリティ上のリスクが高いため、非推奨です。
    • "explicit": Explicit FTPS (FTP over TLS/SSL) を使用します。
    • "implicit": Implicit FTPSを使用します（あまり一般的ではありません）。
    • 必須項目です。可能な限り"sftp"を指定してください。
  • "port": 22
    • 接続先のポート番号を指定します。
    • SFTPのデフォルトは22です。
    • FTPのデフォルトは21です。
    • Implicit FTPSのデフォルトは990です。
    • サーバー側でデフォルト以外のポートを使用している場合は、そのポート番号を指定します。必須項目です。
  • "username": "username"
    • サーバーにログインするためのユーザー名を指定します。必須項目です。
  • "password": "password"
    • サーバーにログインするためのパスワードを指定します。
    • セキュリティ上の理由から、SFTP接続の場合はパスワードをここに直接記述することは非推奨です。 代わりに"privateKeyPath"を使ったSSH秘密鍵認証を利用するか、"agent"を使ったSSH Agent経由の認証を利用することを強く推奨します。
    • パスワード認証を使用する場合のみ設定します。
  • "privateKeyPath": "/path/to/your/private/key"
    • SFTP接続において、SSH秘密鍵認証を使用する場合に、秘密鍵ファイルの絶対パスまたはVS Codeのワークスペースフォルダからの相対パスを指定します。パスワードの代わりにこちらを使うのがより安全です。
    • 例: "~/.ssh/id_rsa", "/Users/yourusername/.ssh/id_rsa", "C:\\Users\\yourusername\\.ssh\\id_rsa"
    • Windowsの場合、パスの区切り文字は\ではなく/を使うか、\を二重にする（\\）必要があります。
  • "remotePath": "/path/to/remote/folder"
    • 接続後、ファイルブラウザなどで最初に開かれるサーバー上のディレクトリのパスを指定します。これは、ローカルのVS Codeで開いているワークスペースフォルダに対応させたいリモートのパスを指定することが多いです。絶対パスで指定します（例: /var/www/html, /home/username/public_html）。必須項目です。
  • "uploadOnSave": true
    • VS Codeでファイルを保存した際に、自動的にリモートサーバーへアップロードするかどうかを指定します。trueまたはfalseを設定します。
    • 開発中に頻繁にファイルを更新し、すぐにサーバーで動作確認したい場合に非常に便利です。デフォルトはfalseです。
  • "ignore": [".vscode", ".git", ".DS_Store"]
    • ファイル操作（アップロード、ダウンロード、同期など）の対象から除外したいファイルやディレクトリをGlobパターンまたはパスの配列で指定します。
    • .vscodeディレクトリ（設定ファイルを含む）、.gitディレクトリ（Gitリポジトリ）、.DS_Store（macOSの隠しファイル）など、リモートサーバーにアップロードする必要のないファイルや、ダウンロード・同期の対象外としたいファイルを指定します。
    • 例: ["dist/*", "node_modules", "*.log", "!dist/important.js"] (distディレクトリ以下全てとnode_modulesディレクトリ、.logファイルを無視するが、dist/important.jsは無視しない)
  • "syncOption": {}
    • 同期機能（Upload Folder, Download Folder, Sync Local -> Remote, Sync Remote -> Local）の動作に関する詳細設定を指定します。この項目自体はオブジェクト {} を指定し、その中に以下のオプションなどを記述します。
      • "uploadOnSave": true (このオプションはルートレベルのuploadOnSaveと同じです。syncOption内ではなくルートレベルで指定するのが一般的です。)
      • "ask": false (同期実行前に確認ダイアログを表示するかどうか。デフォルト: true)
      • "delete": false (同期元にないファイルを同期先から削除するかどうか。危険なので注意！ デフォルト: false)
      • "autoDeleteThreshold": 50 (自動削除が有効な場合、削除ファイル数がこの閾値を超えると確認ダイアログを表示する。デフォルト: 50)
      • "forceUpload": false (タイムスタンプに関係なく常にアップロードするかどうか。デフォルト: false)
      • "forceDownload": false (タイムスタンプに関係なく常にダウンロードするかどうか。デフォルト: false)
  • "watcher": {}
    • リモートサーバー上でのファイル変更を監視し、変更があった場合にローカルに自動ダウンロードするかどうかを設定します。デフォルトは無効です。
      • "autoDownload": false (リモートの変更を自動的にダウンロードするかどうか。デフォルト: false)
      • "autoUpload": false (ローカルの変更を自動的にアップロードするかどうか – これはuploadOnSaveと似ていますが、watchがトリガーです。通常はuploadOnSaveを使います。デフォルト: false)
      • "recursive": true (サブディレクトリも監視するかどうか。デフォルト: true)
      • "depth": 0 (監視するディレクトリの深さ。0は無限。デフォルト: 0)
      • "ignore": [] (watcher対象から除外するファイル/ディレクトリ。ignore設定とは別に指定できます。)
      • "interval": 5000 (監視間隔（ミリ秒）。デフォルト: 5000 (5秒))
    • サーバー負荷やファイル数によっては、watcherを有効にするとパフォーマンスに影響を与える可能性があるため注意が必要です。
  • "concurrency": 4
    • 同時に実行できるファイル転送の数を指定します。値を増やすと転送速度が向上する場合がありますが、サーバーへの負荷も増えます。デフォルトは4です。
  • "agent": ""
    • SSH Agentのソケットファイルパスを指定します。SSH Agentを使用すると、秘密鍵のパスフレーズを毎回入力することなく認証が可能になります。パスワードの代わりに秘密鍵認証を使う場合に、このオプションとprivateKeyPathを組み合わせて使用すると便利です。空文字列の場合はシステム標準のAgentを探します。
    • 例: "~/.ssh/agent.sock" (Linux/macOS), "$env:SSH_AUTH_SOCK" (Windows PowerShell)
  • "secure": true
    • "protocol": "explicit" のFTPS接続の場合に、SSL/TLSを有効にするかどうかを指定します。デフォルトはtrueです。
  • "secureOptions": {}
    • FTPS接続に関する追加のSSL/TLS設定を指定できます。例えば、自己署名証明書を使用している場合に証明書検証を無効にするなど（非推奨）。
      • "rejectUnauthorized": false (自己署名証明書など、不正な証明書を許可するかどうか。セキュリティリスクがあるため、テスト環境以外では使用しないでください。 デフォルト: true)
  • "passive": true
    • "protocol": "ftp" の無印FTP接続の場合に、パッシブモードを使用するかどうかを指定します。デフォルトはtrueです。通常はパッシブモードを使用します。
  • "ascii": false
    • "protocol": "ftp" または "protocol": "explicit" のFTP/FTPS接続の場合に、ASCIIモードで転送するかどうかを指定します。テキストファイル（拡張子が.txt, .html, .css, .jsなど）を転送する際に、改行コードを環境に合わせて変換します。バイナリファイル（画像、動画、実行ファイルなど）は必ずfalse（バイナリモード）で転送する必要があります。SFTPの場合はこの設定は不要で、常にバイナリモードでの転送となります。デフォルトはfalseです。
  • "timeout": 30000
    • サーバーからの応答を待つ最大時間（ミリ秒）を指定します。この時間を超えると接続がタイムアウトします。回線状況が悪い場合などにこの値を増やす必要があるかもしれません。デフォルトは30000 (30秒) です。

これらの設定項目を、接続先のサーバー情報や自身の開発スタイルに合わせて編集します。sftp.jsonファイルを保存すれば、設定は即座に反映されます。

パスワードの取り扱いに関する注意:
sftp.jsonファイルにパスワードを平文で記述することは、セキュリティ上のリスクを伴います。特に、このファイルを含むプロジェクトをGitなどのバージョン管理システムで共有する場合、パスワードが意図せず公開されてしまう可能性があります。可能であれば、SFTPのSSH秘密鍵認証を使用し、"password"ではなく"privateKeyPath"を設定してください。どうしてもパスワード認証が必要な場合は、.vscodeディレクトリごと.gitignoreに追加するなど、パスワードを含むファイルが公開されないよう十分注意してください。

4. 基本的な操作

sftp.jsonファイルの設定が完了したら、いよいよサーバーに接続してファイル操作を行います。

SFTPビュー（サイドバー）の利用:

「SFTP」拡張機能をインストールすると、VS Codeのエクスプローラービューの上に「SFTP」というビューが追加されます（表示されていない場合は、VS Codeのメニューから表示 > 外観 > サイドバーの表示、あるいは右クリックメニューで「SFTP」にチェックを入れることで表示できます）。

このSFTPビューには、sftp.jsonで設定した接続先がリスト表示されます。

  1. リストから接続したいサーバー名（"name"で指定した名前）をクリックします。
  2. サーバーへの接続が試行されます。パスワードや秘密鍵のパスフレーズが必要な場合は、VS Codeの上部にプロンプトが表示されるので入力してください。
  3. 接続に成功すると、SFTPビューにはremotePathで指定したディレクトリ以下のファイルツリーが表示されます。

SFTPビューでできる基本的な操作は以下の通りです。

  • ファイル/ディレクトリを開く: ファイル名をダブルクリックすると、リモート上のファイルがダウンロードされ、VS Codeのエディタで開かれます。ディレクトリ名をシングルクリックすると、そのディレクトリの中身が表示されます。
  • ファイルの編集とアップロード: 開いたリモートファイルを編集し、保存 (Ctrl+S または Cmd+S) すると、uploadOnSave: trueの設定になっていれば自動的にリモートサーバーへアップロードされます。設定がfalseの場合は、後述のコマンドを使って手動でアップロードする必要があります。
  • ファイル/ディレクトリの操作: SFTPビュー内のファイルやディレクトリを右クリックすると、コンテキストメニューが表示されます。
    • Upload: 選択したファイルやディレクトリをローカルからリモートへアップロードします。
    • Download: 選択したファイルやディレクトリをリモートからローカルへダウンロードします。
    • Delete: 選択したファイルやディレクトリをリモートから削除します。削除されたファイルは元に戻せないので注意してください。
    • Rename: 選択したファイルやディレクトリの名前を変更します。
    • New File: 選択したディレクトリ内に新しいファイルを作成します。
    • New Folder: 選択したディレクトリ内に新しいフォルダを作成します。
    • Change Permissions (chmod): SFTPまたはSSHアクセスが可能な場合、選択したファイル/ディレクトリの権限を変更できます（例えば、Webサーバーで書き込み可能な権限を設定するなど）。
    • Refresh: リモートファイルツリーを更新します。
  • ローカルファイルのアップロード: VS Codeのエクスプローラービューでローカルのファイルを右クリックし、コンテキストメニューから「Upload via SFTP」> 「設定名」を選択すると、設定したリモートパスの対応する位置にアップロードできます。
  • リモートファイルのダウンロード: SFTPビューでリモートファイルを右クリックし、「Download to…」を選択すると、ダウンロード先をローカルで指定できます。

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

SFTPビューを使わない場合や、より詳細な操作を行いたい場合は、コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）から「SFTP: 」と入力して関連コマンドを実行することもできます。

よく使うコマンド例：

  • SFTP: Upload File: 現在アクティブなエディタで開いているローカルファイルをアップロードします。
  • SFTP: Download File: 現在アクティブなエディタで開いているリモートファイル（一旦ダウンロードして編集していたファイル）の最新版をリモートからダウンロードして上書きします。
  • SFTP: Upload Folder: VS Codeで開いているワークスペースフォルダ全体を設定されたリモートパスにアップロードします。
  • SFTP: Download Folder: 設定されたリモートパス以下のファイルを、ローカルのワークスペースフォルダにダウンロードします。
  • SFTP: Sync Local -> Remote: ローカルワークスペースフォルダを基準に、リモートパス以下を同期します。ローカルにあってリモートにないものはアップロード、ローカルにあってリモートで新しいものはアップロード、リモートにあってローカルにないものや古いものはそのまま残します（syncOptionの設定による）。
  • SFTP: Sync Remote -> Local: リモートパス以下を基準に、ローカルワークスペースフォルダを同期します。リモートにあってローカルにないものはダウンロード、リモートにあってローカルで古いものはダウンロード、ローカルにあってリモートにないものや新しいものはそのまま残します（syncOptionの設定による）。
  • SFTP: List all connections: 設定されているすべての接続先を表示し、選択して接続できます。
  • SFTP: Edit config: 現在のワークスペースのsftp.jsonファイルを開きます。
  • SFTP: Close SFTP Connection: 現在の接続を閉じます。

これらのコマンドを駆使することで、様々なファイル操作をVS Code内で行うことができます。

5. 同期機能の詳細

「SFTP」拡張機能の強力な機能の一つに同期機能があります。これは、ローカルのフォルダとリモートのフォルダ間でファイルの状態を比較し、差分を解消するためにファイルを転送する機能です。

同期に関連するコマンドは主に以下の4つです。

  • SFTP: Upload Folder:
    ローカルワークスペースフォルダ内のすべてのファイル・ディレクトリを、リモートのremotePath以下にアップロードします。存在しないディレクトリは作成されます。既に存在するファイルは、ローカルのファイルがリモートより新しいか、あるいはリモートに存在しない場合にアップロードされます。これは、ローカルで一通り開発が完了した後、まとめてサーバーに反映させたい場合に使用します。
  • SFTP: Download Folder:
    リモートのremotePath以下のすべてのファイル・ディレクトリを、ローカルワークスペースフォルダにダウンロードします。存在しないディレクトリはローカルに作成されます。既に存在するファイルは、リモートのファイルがローカルより新しいか、あるいはローカルに存在しない場合にダウンロードされます。これは、サーバー上の最新のファイル群をローカルに取得したい場合に使用します。
  • SFTP: Sync Local -> Remote:
    ローカルワークスペースフォルダを「正」とし、リモートのremotePath以下を同期先にします。

    • ローカルに存在し、リモートに存在しないファイル → アップロード
    • ローカルにもリモートにも存在し、ローカルの方が新しいファイル → アップロード
    • ローカルに存在し、リモートの方が新しいファイル → 何もしない（または設定によってはローカルを上書き）
    • ローカルに存在せず、リモートに存在するファイル → 何もしない（syncOption.deleteがtrueの場合はリモートから削除！）
  • SFTP: Sync Remote -> Local:
    リモートのremotePath以下を「正」とし、ローカルワークスペースフォルダを同期先にします。

    • リモートに存在し、ローカルに存在しないファイル → ダウンロード
    • リモートにもローカルにも存在し、リモートの方が新しいファイル → ダウンロード
    • リモートに存在し、ローカルの方が新しいファイル → 何もしない（または設定によってはリモートを上書き）
    • リモートに存在せず、ローカルに存在するファイル → 何もしない（syncOption.deleteがtrueの場合はローカルから削除！）

同期機能、特にSync Local -> RemoteやSync Remote -> Local、そしてsyncOption.delete: trueの設定は非常に強力ですが、同時に非常に危険でもあります。設定を誤ると、意図しないファイルが削除されたり、ローカルでの作業内容がリモートの古いファイルで上書きされてしまったりする可能性があります。

同期機能を利用する際の注意点:

  • syncOption.delete: trueは、両方の環境が常に同じ状態であるべきことが分かっている場合（例: デプロイプロセスの一部）以外は、安易に使用しないでください。デフォルトはfalseになっており、これが安全です。
  • 同期コマンドを実行する前に、どのファイルがどのように処理されるかをよく確認してください（通常、同期実行前に確認ダイアログが表示されます）。
  • 重要なファイルは、同期前にバックアップを取っておくことを強く推奨します。
  • .gitignoreやsftp.jsonのignore設定を適切に行い、同期対象に含めるべきでないファイルを確実に除外してください。
  • チーム開発環境では、他の開発者の作業内容を上書きしてしまうリスクがあるため、同期機能の利用には特に慎重になり、チーム内でルールを決めるべきです。

個人的な開発や、特定ディレクトリのバックアップ取得など、用途を限定して慎重に利用すれば、同期機能は非常に便利なワークフローを提供します。

6. FTP (非推奨) およびFTPSの設定方法

SFTPではなく、無印FTPやFTPSを使用する必要がある場合（例: 接続先サーバーがSFTPに対応していない場合など）、sftp.jsonで"protocol"設定を変更することで対応できます。

  • 無印FTP:
    "protocol": "ftp" と設定します。ポートは通常21ですが、サーバーの設定に合わせて変更してください。
    json
    {
    "name": "My FTP Server",
    "host": "ftp.hostname.com",
    "protocol": "ftp",
    "port": 21,
    "username": "ftpuser",
    "password": "ftppassword", // 平文パスワードは危険！
    "remotePath": "/public_html",
    "uploadOnSave": true,
    "passive": true, // パッシブモードを使うか（推奨）
    "ascii": false // ASCIIモードで転送するか（テキストファイルのみtrueを検討）
    }
    改めて強調しますが、FTPはセキュリティが非常に低いため、可能な限り使用しないでください。 認証情報やデータが暗号化されずにネットワーク上を流れます。
  • Explicit FTPS (FTP over TLS/SSL):
    "protocol": "explicit" と設定します。ポートは通常21です。"secure": trueと設定することでTLS/SSLによる暗号化が有効になります。
    json
    {
    "name": "My FTPS Server (Explicit)",
    "host": "ftps.hostname.com",
    "protocol": "explicit",
    "port": 21,
    "username": "ftpsuser",
    "password": "ftpspassword",
    "remotePath": "/public_html",
    "uploadOnSave": true,
    "passive": true,
    "secure": true, // TLS/SSLを有効化
    "secureOptions": {
    "rejectUnauthorized": true // 証明書の検証を行うか（通常true）
    }
    }
    FTPSはFTPよりも安全ですが、SFTPの方が実装がシンプルでファイアウォールの問題も少ないため、SFTPが利用可能であればそちらを優先すべきです。

トラブルシューティング

VS CodeでFTP/SFTP接続やファイル操作中に問題が発生した場合、以下の点を確認し、対処してみてください。

  1. 接続できない (Timeout, Authentication failedなど):
    • 設定情報の確認: sftp.jsonに記述したhost, port, username, password (privateKeyPath, agent) が正確か、タイプミスがないか再確認してください。ポート番号がSFTP (22) やFTP (21) のデフォルトから変更されていないかも確認が必要です。
    • プロトコルの確認: "protocol"設定が、接続したいサーバーがサポートしているプロトコル（"sftp", "ftp", "explicit"）と一致しているか確認してください。
    • サーバーの稼働状態: 接続先サーバーが正しく起動しており、FTP/SFTPサービスが動作しているか確認してください。専用のFTPクライアント（FileZillaなど）を使って接続できるか試してみるのも有効です。
    • ファイアウォールの確認: あなたのPCやサーバー側のファイアウォールが、指定したポート（SFTPなら22、FTPなら21など）への接続をブロックしていないか確認してください。サーバー側のファイアウォール設定や、パッシブモードFTPの場合はデータポート範囲の開放状況も確認が必要です。
    • SSH秘密鍵認証: "privateKeyPath"を使用している場合、秘密鍵ファイルのパスが正しいか、その秘密鍵に対応する公開鍵がサーバー側のユーザーの~/.ssh/authorized_keysファイルに正しく登録されているか確認してください。秘密鍵にパスフレーズが設定されている場合は、VS Codeのプロンプトで正しく入力しているか確認してください。SSH Agentを使用している場合は、Agentが正しく起動しており、秘密鍵がAgentに追加されているか確認してください。
    • サーバー側の制限: サーバー側で特定のIPアドレスからの接続のみ許可している場合や、接続ユーザーに制限がある場合もあります。サーバー管理者やホスティングプロバイダーに確認してください。
  2. アップロード/ダウンロードが遅い、途中で止まる:
    • 回線状況: あなたのインターネット回線が安定しているか、十分な速度が出ているか確認してください。同時に多くのデバイスが回線を使用している場合、速度が低下することがあります。
    • サーバー負荷: 接続先サーバーの負荷が高い場合、転送速度が低下することがあります。他のユーザーが大量にアクセスしていたり、サーバーで重い処理が実行されていたりしないか確認してください。
    • timeout設定: sftp.jsonの"timeout"設定が短すぎる場合、回線状況が悪いとタイムアウトしてしまうことがあります。必要に応じてこの値を増やしてみてください（ただし、あまり長くしすぎると、接続できない場合に待たされる時間が長くなります）。
    • concurrency設定: "concurrency"（同時転送数）の設定値を確認してください。あまり大きすぎるとサーバーに負荷をかけすぎたり、逆にパフォーマンスが低下したりすることがあります。サーバーや回線の状況に合わせて調整してみてください。
    • FTPのパッシブモード: FTP接続でパッシブモードを使用している場合、サーバー側でデータ転送用のポート範囲が適切に開放されていないと、接続が確立できず転送が止まることがあります。
  3. ファイルが文字化けする:
    • エンコーディング: VS Codeでファイルを開く際、エディタが正しい文字エンコーディング（UTF-8など）で開いているか確認してください。VS Codeの右下ステータスバーに現在のエンコーディングが表示されており、クリックして変更できます。リモートサーバー上のファイルが保存されているエンコーディングと一致させる必要があります。
    • FTPのASCIIモード: 無印FTPやFTPSを使用している場合、"ascii"設定が不適切でないか確認してください。テキストファイルはtrue、バイナリファイルはfalseで転送する必要があります。SFTPは常にバイナリ転送なので、この問題は発生しにくいです。
  4. uploadOnSaveが機能しない:
    • 設定ファイルの場所: sftp.jsonファイルが、VS Codeで開いているワークスペースフォルダの直下にある.vscodeディレクトリ内に正しく配置されているか確認してください。
    • 設定値: sftp.json内で、対象の接続設定ブロックに"uploadOnSave": trueが記述されているか確認してください。
    • 構文エラー: sftp.jsonファイルにJSONの構文エラーがないか確認してください。VS Codeが構文エラーをハイライト表示してくれるはずです。
    • 接続状態: サーバーに接続されているか確認してください。接続が切れている状態ではアップロードは行われません。
    • 権限: リモートサーバー上のremotePathディレクトリに、設定したユーザーが書き込み権限を持っているか確認してください。権限がない場合、アップロードは失敗します。
    • サーバー容量: リモートサーバーのディスク容量が不足していないか確認してください。
  5. 同期で意図しないファイルが変更される/削除される:
    • syncOptionの確認: sftp.jsonの"syncOption"、特に"delete"や"ask"の設定を慎重に確認してください。意図せず削除が行われるのは"delete": trueが原因です。
    • ignore設定の確認: 同期対象に含めるべきでないファイルやディレクトリ（.git, .vscode, ログファイル、一時ファイルなど）が、sftp.jsonの"ignore"設定で正しく除外されているか確認してください。
    • 同期の方向: Sync Local -> RemoteとSync Remote -> Localでは同期の基準となる方向が異なります。意図した方向のコマンドを実行しているか確認してください。
    • タイムスタンプ: 同期はファイルの最終更新時刻（タイムスタンプ）に基づいて行われることがあります。ローカルとリモートでタイムスタンプが大きくずれていないか確認してください（稀なケースですが、サーバー時刻の設定などが影響することがあります）。
  6. Permission Deniedエラー:
    • リモートパスの権限: sftp.jsonの"remotePath"で指定したディレクトリ、あるいは操作対象のファイル/ディレクトリに対して、設定したユーザーが適切な権限（読み取り、書き込み、実行）を持っているか確認してください。Webサーバーの公開ディレクトリなどは、所有者やグループ、その他のユーザーに対する権限設定が重要です。
    • ユーザー/グループの確認: SFTPで接続しているユーザーが、リモートファイルシステム上で操作したいファイルやディレクトリの所有者、あるいは所属グループになっているか確認してください。必要に応じてサーバー側でファイル/ディレクトリの所有者やグループを変更するか、VS Code拡張機能のChange Permissions (chmod)機能で権限を調整してください。
  7. “Error: read ECONNRESET”, “Error: Socket disconnected” などの一般的なエラー:
    • これらのエラーはネットワーク接続が予期せず切断された場合に発生することが多いです。回線状況が不安定でないか、サーバー側で接続が強制的に切断されていないかなどを確認してください。サーバー側の接続タイムアウト設定なども影響する可能性があります。

トラブルシューティングを行う際は、VS Codeの出力パネル（表示 > 出力 または View > Output）を開き、ドロップダウンから「SFTP」を選択して、詳細なログメッセージを確認すると、エラーの原因特定に役立つことがあります。

高度な使い方と応用

SFTP拡張機能は、基本的なファイル操作や同期だけでなく、いくつかの高度な設定や応用が可能です。

  • 複数のサーバー設定:
    前述の通り、sftp.jsonファイルはJSONの配列です。この配列の中に複数の{}ブロックを追加することで、複数の異なるSFTP/FTPサーバーへの接続設定を管理できます。
    json
    [
    { // 開発サーバー設定
    "name": "Development Server",
    "host": "dev.hostname.com",
    // ... その他の設定 ...
    },
    { // 本番サーバー設定
    "name": "Production Server",
    "host": "prod.hostname.com",
    // ... その他の設定 ...
    },
    { // FTPサーバー設定
    "name": "Old FTP Server",
    "host": "ftp.oldhost.com",
    "protocol": "ftp",
    // ... その他の設定 ...
    }
    ]
    VS CodeのSFTPビューやコマンドパレットから、設定名を選択して簡単に接続先を切り替えることができます。
  • ワークスペースごとの設定:
    sftp.jsonはワークスペースフォルダ直下の.vscodeディレクトリに作成されるため、設定はプロジェクトごとに独立しています。これにより、プロジェクトAではサーバーX、プロジェクトBではサーバーY、といったように、プロジェクトの要件に応じた接続設定を管理できます。
  • 特定のファイルタイプのみを同期/アップロード対象とする (ignore設定の応用):
    "ignore"設定を工夫することで、特定のファイルやディレクトリのみをアップロード/同期対象から含める（または除外する）といった細かい制御が可能です。例えば、"ignore": ["*", "!/path/to/include", "!/path/to/include/*"] のようにGlobパターンを組み合わせることで、一部のディレクトリだけを対象とするといった設定も理論上は可能ですが、Globパターンの記述には慣れが必要です。通常は、アップロード不要なファイル（.git, node_modules, ビルド成果物など）を除外するために利用するのが一般的です。
  • 同期機能を使った簡易デプロイワークフロー:
    ローカルで開発・テストを行った後、SFTP: Sync Local -> Remoteコマンドを実行することで、変更があったファイルだけを効率的にサーバーにアップロードし、簡易的なデプロイワークフローとして利用できます。ただし、これはあくまでファイル転送によるデプロイであり、データベースのマイグレーションやサーバーサイドのビルド処理などは別途行う必要があります。本格的なデプロイには、Gitと連携したCI/CDパイプラインなどを検討すべきですが、小規模なプロジェクトや個人開発においては十分便利な方法です。
  • VS Codeの他の拡張機能との連携:
    SFTP拡張機能は、VS CodeのエディタやファイルシステムAPIと連携して動作します。例えば、Git拡張機能と組み合わせて、ローカルでの変更をコミット・プッシュしつつ、同時にSFTPでサーバーにアップロードするといったワークフローを構築できます。また、VS Codeのタスク機能（tasks.json）からSFTPコマンドラインツールを呼び出したり、VS CodeのAPIを使って独自のSFTP関連タスクを自動化したりすることも、技術的には可能です（ただし、これにはプログラミングの知識が必要です）。

これらの応用例は、SFTP拡張機能が単なるファイル転送ツールではなく、VS Codeの強力な開発環境の一部として機能することを示しています。

VS Codeでのリモート開発の代替手段

これまでVS CodeでのFTP/SFTP利用について解説してきましたが、VS Codeには他にもリモート環境で開発するための強力な手段が用意されています。その代表的なものが、VS CodeのRemote Development拡張機能パックです。

特に、Remote – SSH拡張機能は、SFTP/FTPによるファイル転送とは根本的に異なるアプローチでリモート開発を実現します。

Remote – SSH (ms-vscode.remote-ssh)

Remote – SSHは、SSHプロトコルを使用してリモートサーバーに接続し、そのサーバー上にVS Code Serverという軽量なバックエンドを自動的にインストールします。そして、ローカルのVS Codeクライアントが、このリモートのVS Code Serverと連携して動作します。

これにより、あなたのVS Codeは、まるでリモートサーバー上で直接動作しているかのように振る舞います。

  • ファイルシステムの操作: リモートサーバー上のファイルシステムを、ローカルのエクスプローラーのように直接ブラウズ、編集できます。ファイルを開く、保存するといった操作は、ローカルファイルと同様の感覚で行えます。SFTPのようにファイルをダウンロード/アップロードするのではなく、サーバー上のファイルを直接編集するイメージです。
  • ターミナル: リモートサーバー上で直接統合ターミナルを開き、コマンドを実行できます。これにより、リモートでのビルド、テスト、デプロイといった作業をVS Code内で行えます。
  • 拡張機能: リモートサーバー側に拡張機能をインストールできます。例えば、PythonやNode.jsの拡張機能、リンター、フォーマッターなどをサーバー側にインストールすることで、リモート環境の実行ファイルやライブラリを使ったコード補完、デバッグが可能になります。
  • デバッグ: リモートサーバー上のアプリケーションを直接デバッグできます。ローカルでブレークポイントを設定し、リモートで実行されているコードのステップ実行や変数確認を行えます。

SFTP/FTP方式との比較

機能/特徴 SFTP/FTP 拡張機能 Remote – SSH
プロトコル SFTP, FTP, FTPS (ファイル転送プロトコル) SSH (セキュアシェルプロトコル)
接続方式 ローカルVS Codeがクライアントとしてサーバーに接続 ローカルVS Codeがクライアント、リモートにVS Code Serverを配置
ファイル操作 ファイルをダウンロード/アップロードしてローカルで編集 リモート上のファイルを直接編集
パフォーマンス ファイル転送速度に依存、多くのファイルの同時操作で遅延の可能性 ファイル操作はリモート環境内で行われるため高速、ネットワークはVS CodeクライアントとServer間の通信に使用
ターミナル連携 ローカルターミナルはローカル環境、リモート操作は別途必要 リモートサーバー上で直接統合ターミナルが利用可能
拡張機能の利用 基本的にローカルにインストールされた拡張機能を使用 リモート側に拡張機能をインストールし、リモート環境で実行
デバッグ 基本的にローカル環境、または別途設定が必要 リモート環境で直接デバッグ可能
サーバー要件 FTP/SFTPサーバー機能が稼働していること SSHアクセスが可能であること、VS Code Serverをインストールできる環境（x86_64 Linuxサーバーが推奨）
設定 sftp.jsonで接続情報を管理 SSH設定ファイル (config) で接続情報を管理
オフライン作業 一度ダウンロードしたファイルは編集可能、保存・アップロードはオンライン時 接続していないとリモートファイルは操作不可
セキュリティ SFTP/FTPS推奨、認証情報は設定ファイルに記述 SSH認証を利用（パスワード、公開鍵）、通信は暗号化

どちらを選ぶべきか？

  • SFTP/FTP 拡張機能は以下のような場合に適しています:
    • 主にWebサイトのファイルのアップロード/ダウンロードや簡単な修正が目的である。
    • ローカル環境で開発・ビルドを行い、完成したファイルをサーバーに反映させたい。
    • 接続先のサーバー環境がSSHアクセスを許可していない、またはVS Code Serverのインストールが難しい（共有レンタルサーバーなど）。
    • 複数の異なる種類のサーバー（FTPのみ対応、SFTPのみ対応など）に柔軟に対応したい。
    • ローカル環境とリモート環境のファイル構造が大きく異なり、同期機能で対応したい。
  • Remote – SSH は以下のような場合に適しています:
    • リモートサーバー上で直接開発作業全体（コーディング、ビルド、テスト、デバッグ）を行いたい。
    • サーバー側の実行環境（特定のライブラリやツールチェーン）に依存した開発を行っている。
    • SFTP/FTPによるファイル転送のオーバーヘッドを避けたい。
    • SSHアクセスが可能で、サーバー環境をある程度自由に設定できる（VPSや専用サーバー、コンテナなど）。
    • より統合された開発体験を求めている。

ほとんどの場合、サーバーがSSHに対応しており、かつVS Code Serverのインストールが可能であれば、Remote – SSHの方がより強力で快適なリモート開発環境を提供します。しかし、様々な制約からSFTP/FTP方式が唯一の選択肢となる場合や、単にファイルをアップロードしたいだけであれば、SFTP拡張機能は手軽で便利なツールとなります。

この記事はSFTP/FTPに焦点を当てていますが、リモート開発を検討する際は、Remote – SSHなどの代替手段も視野に入れることが重要です。

セキュリティに関する注意喚起

記事の冒頭でも触れましたが、ここで改めてセキュリティに関する重要な注意喚起を行います。

  • FTPの危険性:
    無印FTPプロトコルは、ユーザー名、パスワード、そして転送されるファイルデータが、すべて暗号化されずに平文のままインターネット上を流れます。これは、ネットワークを盗聴されると、第三者に簡単にこれらの情報を盗み見されてしまうことを意味します。盗聴された認証情報を使ってサーバーに不正アクセスされたり、転送中のファイルが改ざんされたりするリスクがあります。機密情報や個人情報を含むファイルを扱ったり、機密性の高いシステムにアクセスしたりする際にFTPを絶対に使用しないでください。 FTPは教育目的や、セキュリティが全く考慮されない閉じたネットワーク内でのみ利用を検討すべきです。
  • SFTPまたはFTPSの利用を強く推奨:
    セキュリティを確保するためには、必ず暗号化されたプロトコルであるSFTPまたはFTPSを使用してください。

    • SFTP: SSH接続上で動作し、認証情報、コマンド、データ転送の全てが暗号化されます。ポート22を使用します。
    • FTPS: FTPにSSL/TLSによる暗号化を追加したものです。Explicit FTPS（ポート21）やImplicit FTPS（ポート990）があります。認証情報とデータ転送が暗号化されます。
      可能であれば、ファイアウォール設定や実装のシンプルさからSFTPを選択するのが最も一般的で推奨されます。
  • パスワード認証ではなく、SSH秘密鍵認証の利用を推奨 (SFTPの場合):
    SFTP接続において、パスワード認証は総当たり攻撃（ブルートフォースアタック）によってパスワードが推測されてしまうリスクがあります。より安全な認証方法として、SSH秘密鍵認証を利用することを強く推奨します。
    SSH秘密鍵認証では、公開鍵と秘密鍵というペアを使います。公開鍵をサーバーに登録しておき、接続時にクライアント側にある秘密鍵を使って認証を行います。秘密鍵はパスワードよりも推測が困難であり、適切に管理されていればセキュリティレベルが大幅に向上します。
    SFTP拡張機能で秘密鍵認証を利用するには、sftp.jsonの"password"の代わりに"privateKeyPath"に秘密鍵ファイルのパスを指定します。秘密鍵ファイル自体には、さらにパスフレーズを設定しておくことで、秘密鍵が漏洩した場合でもパスフレーズを知らない第三者による不正利用を防ぐことができます。パスフレーズを何度も入力するのが面倒な場合は、SSH Agentを活用すると便利です。
  • sftp.jsonファイルの管理:
    sftp.jsonファイルには、ホスト名、ユーザー名、パスワード、秘密鍵のパスなど、サーバーへのアクセスに必要な情報が含まれています。特にパスワードを平文で記述している場合は、このファイル自体が機密情報となります。

    • このファイルを含むプロジェクトをGitなどのバージョン管理システムで公開リポジトリにアップロードしないように注意してください。.gitignoreファイルに.vscode/sftp.jsonを追加するなどして、コミット対象から除外すべきです。
    • ファイルをローカルに保存する場合も、ファイルシステムのアクセス権限を適切に設定し、第三者に読み取られないように管理してください。
    • 可能な限りパスワードをファイルに書かない（秘密鍵認証やSSH Agentを利用する）ようにすることで、ファイル自体の機密性リスクを減らすことができます。

安全な開発環境を維持するためには、利用するプロトコルと認証方法、そして設定ファイルの管理について、常にセキュリティを意識することが不可欠です。

まとめ

この記事では、VS Codeを使ってFTPおよびSFTPを利用するための方法について、特に人気のある「SFTP」拡張機能を中心に詳細に解説しました。

VS CodeとFTP/SFTP拡張機能を連携させることで、お使いのVS Codeを強力なリモートファイル編集・転送ツールとして活用できます。ローカル環境で慣れ親しんだエディタの機能を利用してリモートファイルを編集したり、保存と同時に自動アップロードしたり、ローカルとリモート間でフォルダの内容を同期したりといった作業を、VS Codeという一つのアプリケーション内でシームレスに行えるようになります。これは、Web開発など、サーバー上のファイルを頻繁に操作する開発者にとって、開発効率を大幅に向上させる可能性を秘めています。

しかし、FTPプロトコル自体が抱えるセキュリティ上の根本的な問題（認証情報やデータの平文転送）についても繰り返し注意喚起を行いました。現代の開発においては、必ず暗号化された安全なプロトコルであるSFTPまたはFTPSを利用することを強く推奨します。 また、パスワード認証よりもSSH秘密鍵認証を利用する方が、よりセキュリティレベルが高まります。

「SFTP」拡張機能の設定は、ワークスペースフォルダ内の.vscode/sftp.jsonファイルに記述します。ホスト名、ポート、ユーザー名、リモートパスといった基本的な情報に加え、保存時の自動アップロード、同期オプション、無視するファイル/ディレクトリなど、多くの詳細な設定が可能です。これらの設定を適切に行うことで、自身の開発ワークフローに合わせたカスタマイズが実現できます。

日々の操作は、追加されたSFTPビューを利用した直感的なファイルブラウズや、コマンドパレットからの各種SFTPコマンド実行によって行えます。ファイルの開閉、編集、アップロード、ダウンロード、名前変更、削除、権限変更といった基本的な操作から、フォルダ単位のアップロード/ダウンロード、そして強力な同期機能まで、一通りのファイル管理機能がVS Code上で提供されます。

もし接続や操作で問題が発生した場合は、設定情報の再確認、サーバー稼働状態、ファイアウォール設定、権限、sftp.jsonの構文やオプション設定など、多角的な観点からトラブルシューティングを行うことが重要です。VS Codeの出力パネルにあるSFTPログは、問題の原因特定に役立つ貴重な情報源となります。

最後に、VS Codeでのリモート開発には、SFTP/FTPによるファイル転送だけでなく、Remote – SSHのようなリモート環境自体をVS Codeの作業空間とする強力な代替手段も存在することを紹介しました。開発内容やサーバー環境、個人の好みに応じて、最適なリモート開発手法を選択してください。

この記事が、あなたがVS Codeを使った開発において、リモートサーバーとの連携を効率的かつ安全に行うための一助となれば幸いです。安全なプロトコルと適切な設定、そしてセキュリティ意識を持って、快適な開発ライフを送りましょう。

コメントする

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

上部へスクロール