Journal

Journal

一覧へ戻る
202507/10

VS CodeでFTP/SFTPを快適に！リモート開発環境を構築する方法

はじめに

VS Code（Visual Studio Code）って、その軽快さと豊富な機能、そして数えきれないほどの拡張機能のおかげで、世界中の開発者からめちゃくちゃ愛されてるエディタですよね！普段のローカル開発はもちろん、Webサイトをデプロイしたり、リモートサーバーで作業したりと、サーバーと直接ファイルをやり取りする機会って意外と多いもの。

「通常のFTPクライアントとエディタを行ったり来たりするの、正直面倒だな…」って感じたことありませんか？でも大丈夫！VS CodeにFTP/SFTP機能を統合すれば、コードの編集からサーバーへのアップロードまでが驚くほどスムーズになって、あなたの開発ワークフローが劇的に効率アップするんです。

この記事では、VS CodeにFTP/SFTP機能を導入して、快適なリモート開発環境を構築する具体的な方法を、ステップバイステップでじっくり解説していきますね！

なぜVS CodeでFTP/SFTPを使うのがおすすめなの？

VS CodeでFTP/SFTPを使うメリットは、ざっくりこんな感じです！

  • 全部VS Codeで完結！
    FTPクライアントとエディタをあっちこっち切り替える必要がなくなります。VS Codeの中でファイルを直接開いて、編集して、保存するだけでサーバーにアップロード完了！手間が格段に減りますよ。
  • いつもの強力なエディタ機能がそのまま使える！
    VS Codeが誇るシンタックスハイライト、気の利いたコード補完、便利なスニペット、Git連携、統合ターミナルなどなど、いつものあの強力な機能が、リモートのファイルに対してもそのまま使えるんです。これ、本当に便利！
  • 時間と手間を大幅カット！
    ファイルをダウンロードして、編集して、アップロードして…という一連の作業が、エディタ上からワンクリック、あるいは保存と同時に自動でできるようになるので、作業時間を大幅に短縮できます。
  • デバッグもサクサク！
    サーバー上のファイルを直接編集できるから、デバッグ中にコードをちょっと修正したり確認したりするのが、あっという間にできちゃいます。

もちろん、大規模なファイル転送やたくさんのファイルを一度に同期するような場合は、専用のFTP/SFTPクライアントの方が速いこともあります。
でも、普段のコード編集やちょっとしたファイル転送なら、VS Codeの拡張機能で全然問題なく対応できます！

必要なもの、これだけ！

実際に設定を進めるにあたって、準備してほしいものがいくつかあります。

  • Visual Studio Code本体
    最新版がインストールされているか、今すぐ確認してみてくださいね！
  • FTP/SFTPサーバーへの接続情報
    ・ホスト名（またはIPアドレス）
    ・ポート番号（FTPなら21、SFTPなら22が一般的です）
    ・ユーザー名
    ・パスワード (もしあれば、SSH秘密鍵も準備しておくとより安全ですよ)
    ・接続したいリモートパス (例えば /var/www/html/ といった、サーバー上のフォルダの場所ですね)

VS CodeでFTP/SFTPを使うための手順 (「SFTP」拡張機能が超おすすめ！)

今回は、一番人気で機能も豊富なVS Code拡張機能の一つ「SFTP」（作者はNatizyskunkさんです）を使っていきます！

STEP01：FTP拡張機能をインストールしよう！

  1. VS Codeを開きましょう！
  2. 左側のメニューにある「拡張機能」（四角が４つ並んだアイコンです）をクリックしてください。ショートカットなら Ctrl+Shift+X (Windows/Linux) / Cmd+Shift+X (macOS) 。
  3. 検索バーに「SFTP」と入力します。
  4. 検索結果の中から、作者が「Natizyskunk」となっている「SFTP」拡張機能を見つけて、「インストール」ボタンをポチッと押しましょう！

ステップ2：接続設定ファイル (sftp.json) を作って設定しよう！

  1. VS Codeで、接続したいプロジェクトのフォルダ（作業フォルダ）を開いてください。
    まだ開いてない場合は、とりあえず空のフォルダでも大丈夫です。
  2. コマンドパレットを開きます。
    Ctrl+Shift+P (Windows/Linux) または Cmd+Shift+P (macOS) ですね。
  3. コマンドパレットに「SFTP: Config」と入力して、表示されるコマンドを選択します。
  4. すると、VS Codeのエクスプローラーに.vscodeというフォルダが自動的に作られて、その中にsftp.jsonファイルが生成されて開きます。
    このファイルに、あなたのサーバーの接続情報を書き込んでいきます。

    JSONファイルの書き方はコチラ

ステップ3：サーバーに接続してファイルを操作してみよう！

  1. sftp.jsonファイルを保存しましょう (Ctrl+S / Cmd+S)。
  2. VS Codeのエクスプローラービュー（左側のアクティビティバーの一番上のアイコンです）を開いてください。
  3. エクスプローラーの一番下に「SFTP」という項目が表示されていて、
    sftp.jsonで設定した接続名（「My Remote Server」みたいな名前ですね）が見えるはずです！
  4. その接続名をクリックすると、リモートサーバーのファイルツリーがずらっと表示されます！
  5. さあ、ファイルの操作を始めましょう！
    ・ファイルのダウンロード：リモートツリーからファイルを右クリックして、「ダウンロード」を選べば、ローカルのフォルダにファイルがやってきます。
    ・ファイルのアップロード：ローカルのツリーからファイルを右クリックして、「アップロード」を選べば、サーバーの対応する場所にファイルが送られます。
    ・ファイルを直接開いて編集：リモートツリーからファイルをダブルクリックしてみてください。VS Codeでそのファイルが直接開かれますよ。編集した後、保存 (Ctrl+S / Cmd+S) するだけで、sftp.jsonで"uploadOnSave": trueと設定していれば自動的にサーバーにアップロードされます。これぞVS Codeの醍醐味！

下記のテンプレートを参考にしながら、あなたのサーバー情報に合わせて各項目を編集してみてくださいね。

{
"name": "My Remote Server", // ここは接続名です。あなたの好きな名前でOK！
"host": "your-ftp-sftp-host.com", // サーバーのホスト名かIPアドレスを入れてね
"protocol": "sftp", // プロトコルは"ftp"か"sftp"。安全なので"sftp"を強く推奨します！
"port": 22, // ポート番号だよ (SFTPは22、FTPは21が一般的)
"username": "your_username", // あなたのFTP/SFTPユーザー名
"password": "your_password", // FTP/SFTPパスワード (セキュリティ上、直接書くのはあまりおすすめしません。後述のSSHキーがベスト！)
"remotePath": "/var/www/html/", // サーバー上のルートディレクトリのパスだよ
"uploadOnSave": true, // ファイルを保存した時に、自動でサーバーにアップロードするかどうか (trueなら自動でアップロード！)
"watcher": { // ファイル変更を監視して自動でアップロードする設定です
"files": "**", // すべてのファイルを監視するよ
"autoUpload": true, // 自動アップロードを有効にするか
"autoDelete": true // ローカルファイルを削除した時に、リモートも削除するかどうか
},
// "privateKeyPath": "/Users/youruser/.ssh/id_rsa", // SSH秘密鍵のパス (パスワード認証の代わりに使えます)
// "agent": "", // SSHエージェントのパス
// "passphrase": "", // SSH秘密鍵にパスフレーズを設定した場合
// "ignore": [ // アップロード・ダウンロード対象から除外したいファイル/フォルダがあればここに！
// ".vscode",
// ".git",
// ".DS_Store",
// "node_modules"
// ]
}

【超重要！】パスワードの取り扱いについて

passwordフィールドに直接パスワードを書き込むのは、セキュリティ上、あまり推奨されません。
もし誰かに見られたら大変なことになっちゃいますからね。
できることなら、もっと安全なSSHキー認証を使うことを強くおすすめします。
sftp.jsonファイルはアップロードしないように注意しましょう！！

ちょっとだけ豆知識！FTPとSFTP/FTPSって何が違うの？

  • FTP (File Transfer Protocol)
    一番古いファイル転送プロトコルです。でも、データが暗号化されずにそのまま転送されるので、盗聴のリスクがあるんです。特にパスワードみたいな大事な情報は、絶対にFTPで送っちゃダメです！
  • SFTP (SSH File Transfer Protocol)
    これはSSH（Secure Shell）プロトコル上で動くファイル転送プロトコルです。すべてのデータが暗号化されて転送されるので、とっても安全！VS Codeの「SFTP」拡張機能が対応しているのは、まさにこのSFTPのことなんです。
  • FTPS (FTP over SSL/TLS)
    既存のFTPプロトコルにSSL/TLSで暗号化の層を追加したものですね。これも安全ですが、SFTPとはちょっと違うプロトコルです。通常はSFTPの方が、設定が簡単で、ファイアウォールの設定などもシンプルな傾向があります。

セキュリティの観点から、FTPではなく、SFTPまたはFTPSを使うことを強く強くおすすめします！

▼詳しい特徴を知りたい方はコチラ
ファイル転送の三銃士！FTP、SFTP、SCP、あなたはどれを選ぶ？