概要
コーディングをしていてサーバにコードをアップロードしたいとなったとき、いつも以下の「３大ストレス源」と戦っていました。
- SFTPクライアントを立ち上げる儀式が面倒すぎ問題：コードを書くのはVS Codeなのに、アップロードのためだけに、毎回SFTP専用アプリをポチッ、ポチッと起動する地獄のルーティン。
- ホストサーバー管理の迷宮問題：対象サーバーが多すぎて、どれがどのプロジェクトの、どの環境だかもうわからない！サーバー一覧の整理画面が、もはや宇宙船のコックピット並みに煩雑化している。
- 「誤爆デプロイ」の悪夢と格闘問題：特に本番環境へのアップロード…。テスト用のコードを間違えて本番にアップロードしていないかという、余計な緊張感と格闘しながらコードを作成し、その確認に費やす時間が無駄中の無駄に感じる！デプロイボタンを押すたびに寿命が3年縮む気がする！
悩みを書けばキリがないのでこのくらいにして、いい加減にしろ！と叫びたい。
VS Codeで開発しているのでVS Code一本で、なんとかならないかな！？！？！？」
今回は、そんな切実な悩みから探し当てた拡張機能「SFTP Natizyskunk SFTP/FTP sync」をご紹介します。
拡張機能のインストール
まずは拡張機能をインストールしましょう。
- VS Codeを起動します。
- 左側のアクティビティバーにある「拡張機能」（四角が4つ並んだアイコン）をクリックします。
- 検索窓に「SFTP Natizyskunk SFTP/FTP sync」と入力します。
- 検索結果に表示された拡張機能を選択し、「インストール」ボタンをクリックします。
これでインストールは完了です。
設定ファイルの作成と編集
次に、ホストサーバへの接続情報を設定します。この拡張機能では、プロジェクトのルートディレクトリに.sftp.jsonというファイルを作成し、そこに接続設定を記述します。
1. 設定ファイルの作成
VS Codeでプロジェクトフォルダを開いた状態で、以下の手順で設定ファイルを作成します。
- コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）を開きます。
- 「SFTP: Create SFTP configuration file」と入力し、選択して実行します。
- プロジェクトのルートに.sftp.jsonというファイルが自動で作成されます。
2. 設定ファイルの編集
作成された.sftp.jsonファイルを開き、接続情報を編集します。
デフォルトでは以下のような設定が記述されています。
{
"host": "localhost",
"port": 22,
"username": "username",
"remotePath": "/path/to/remote/folder",
"uploadOnSave": true,
"syncMode": "full"
}
必須項目の設定
以下の項目は、接続に最低限必要な情報です。
| 設定項目 | 説明 | 例 |
|---|---|---|
| host | 接続先ホスト名またはIPアドレス | “example.com” |
| port | 接続ポート番号（SFTPは通常22） | 22 |
| username | SFTP接続ユーザー名 | “myuser” |
| remotePath | サーバー上の同期対象ディレクトリのパス | “/var/www/html/myproject” |
認証情報の設定
認証方法に応じて、以下のいずれかを設定します。
- パスワード認証の場合
“password”: “your_password” を追加します。（セキュリティ上、非推奨） - 鍵認証の場合 (推奨)
“privateKeyPath”: “/path/to/your/private/key” を追加し、秘密鍵ファイルのパスを指定します。
その他の便利な設定
| 設定項目 | 説明 | 推奨設定 |
|---|---|---|
| uploadOnSave | ファイルを保存した際、自動でアップロードするか | true (自動同期したい場合) |
| syncMode | 同期モード（full、update、mirrorなど） | full (基本設定) |
| profiles | 複数の接続先（テスト/本番など）を切り替えるための設定 | 後述 |
3. 複数環境（プロファイル）の設定
この拡張機能の最も便利な点の一つが、profiles機能による複数環境の管理です。テスト環境と本番環境など、接続先を簡単に切り替えられるようになります。
.sftp.jsonファイルを以下のように編集します。
{
// デフォルト設定 (普段使う環境を設定)
"host": "test.example.com",
"port": 22,
"username": "myuser_test",
"remotePath": "/var/www/test/myproject",
"uploadOnSave": true,
"profiles": {
"production": {
"host": "prod.example.com",
"username": "myuser_prod",
"remotePath": "/var/www/prod/myproject",
"privateKeyPath": "~/.ssh/id_rsa_prod", // 本番環境用の鍵
"uploadOnSave": false // 本番環境では自動アップロードを無効にするなど
}
}
}
この設定例では、デフォルトでテスト環境に接続され、profiles内に本番環境の接続情報がproductionという名前で定義されています。
【ポイント】
本番環境でのミスを防ぐため、本番環境のプロファイルではuploadOnSaveをfalseにしておくのがおすすめです。
ファイルのアップロード/ダウンロード方法
設定が完了すれば、あとは簡単です。
1. 手動アップロード/ダウンロード
エクスプローラー（VS Code左側のファイル一覧）で、アップロード/ダウンロードしたいファイルやフォルダを右クリックします。
| アクション | コマンドパレットのコマンド | 説明 |
|---|---|---|
| アップロード | SFTP: Upload | ローカルのファイルをサーバーにアップロードします。 |
| ダウンロード | SFTP: Download | サーバーのファイルをローカルにダウンロードします。 |
| 同期（ローカル→リモート） | SFTP: Sync Local -> Remot | ローカル側の更新をサーバーに反映します。 |
| 同期（リモート→ローカル） | SFTP: Sync Remote -> Local | サーバー側の更新をローカルに反映します。 |
2. ファイル保存時の自動アップロード
uploadOnSaveをtrueに設定していれば、ファイルを保存するだけで自動的にサーバーにアップロードされます。VS Codeでコーディングするだけで、別途FTPクライアントを操作する必要がなくなります。
3. プロファイルの切り替え
複数環境を設定している場合は、コマンドパレットから簡単に切り替えられます。
- コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）を開きます。
- 「SFTP: Set active profile」と入力し、選択して実行します。
- 設定したプロファイル名（例: production）を選択すると、その環境に接続が切り替わります。
切り替え後は、ステータスバーに現在アクティブなプロファイル名が表示されます。
まとめ
VS Code拡張機能「SFTP Natizyskunk SFTP/FTP sync」を使うことで、以下のメリットが得られます。
- FTP/SFTPクライアントの起動が不要：VS Code一本で完結します。
- 自動アップロードで効率化：保存と同時にサーバーへ反映され、手間が激減します。
- 複数環境の一元管理：.sftp.jsonで接続情報をプロジェクトごとに管理し、プロファイル機能でテスト/本番の切り替えが楽になります。
面倒なアップロード作業から解放され、コーディングに集中できるようになるこの拡張機能、ぜひ試してみてください！
