VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能「SFTP」が超便利

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロード同期できる拡張機能「SFTP」が超便利だったので紹介します。

自分の主な業務はWordPressのサイト構築とHTMLコーディングです。今年よりメーンのエディタをVSCodeに切り替えました。当初はファイルはFTPのアプリケーションなどを使っていましたが明らかに作業効率が悪いので何か便利な機能拡張がないか探し拡張機能「SFTP」を見つけ、使ってみると便利でもう手放せない存在となってしまいましたので使い方などざっと解説します。

VSCode(Visual Studio Code)の拡張機能「SFTP」とは

拡張機能「SFTP」はVisual Studio Code（以下 VSCode）でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能です。サーバーはSFTPにもFTPにも対応しており、ファイルを個別にアップロード、ダウンロードしたり、またローカルファイルを保存した際に自動的にサーバーへアップロードする自動アップロード機能やサーバーとローカル間の同期が可能となっています。

Extension for Visual Studio Code – SFTP/FTP sync

VSCodeの拡張機能「SFTP」の何がいいのか

筆者が一番便利だと感じているのが「自動アップロード」の機能です。前述したように筆者はよく仕事でWordPressのサイト構築やHTMLコーディングをしています。ほとんどの場合、ファイルは外部のサーバー上に用意されており、以前は別のFTPクライアントを経由してデータをアップロードしたりしていましたが、なかなかの手間となっていました。

しかし、エディタをVSCodeに乗り換え、この拡張機能を利用するようになってからは25%ほど、作業効率が上がったように感じます。ローカルにあるデータを保存するだけで自動的にアップロードされるので、まるで「サーバー上にあるファイルを直接編集しているよう」に作業を進める事ができるからです。保存して数秒後にブラウザを更新すれば最新の状態が確認できるのは本当に素晴らしい事です。

また画像ファイルもVSCode上で管理し、この拡張機能を使えば、画像もVSCodeからアップロードする事ができるので、アプリケーション間を移動をする必要がなくなり、この点でも作業効率をあげる事ができるでしょう。

VSCodeの拡張機能「SFTP」の使い方

VSCodeの拡張機能「SFTP」の設定項目も多岐にわたるので実際に使用するにあたって必要なものを説明していきたいと思いますのでご了承ください。

また今回はワークスペースでの作業を用意し、ワークスペース内にある２つのローカルのフォルダをサーバー上にある別の階層にあるフォルダへ同期・自動保存する想定で解説する。

VSCodeの拡張機能「SFTP」のインストール

拡張機能「SFTP」のインストールはVSCodeの左メニューより拡張機能の画面に移り、「SFTP」と検索します。下記の画像の拡張機能が表示されるはずですのでインストールし再読み込みさせましょう。

VSCodeの拡張機能「SFTP」の設定準備

まずは「コマンドパレット」より「SFTP: Config」を実行しよう。

するとワークスペース内に「sftp.json」が作成されるので、このファイルの中に設定を書き込みます。

VSCodeの拡張機能「SFTP」の設定

初期の状態ですと下記のような初期設定が書き込まれています。

{
    "protocol": "sftp",
    "host": "localhost",
    "port": 22,
    "username": "username",
    "remotePath": "/"
}

今回は二つの階層をサーバー上にある別々の階層へ転送するので下記のようにしました。またプロトコルについて、一つは「ftp」でもう一つは「sftp」で設定しています。また「child-theme」の設定内では「自動保存」を設定しているので、VSCode上でファイルを保存した際に自動的にローカルからサーバーへ転送されるようにしています。

[
    {
        "name": "child-theme-folder",
        "context": "child-theme",
        "protocol": "ftp",
        "host": "ftp.sample.com",
        "port": 21,
        "username": "ログイン名",
        "password": "ログインパスワード",
        "remotePath": "/public_html/sample.karelie.net/wp-content/themes/child-theme",
        "uploadOnSave": true
    },
    {
        "name": "images-folder",
        "context": "images",
        "protocol": "sftp",
        "host": "ftp.sample.com",
        "port": 22,
        "username": "ログイン名",
        "privateKeyPath": "~/.ssh/id_rsa",
        "remotePath": "/virtual/xxxxx/public_html/sample.karelie.net/img"
    }
]

VSCodeの拡張機能「SFTP」の設定の解説

通常であれば上記の設定さえすれば問題なく動作するはずです。ここでは今回使用した設定項目について紹介します。何を設定しているの理解できれば問題が発生した時に対応しやすくなるでしょう。

name

「name」は各設定に対して名前を付けることができます。後述する「SFTP: REMOTE EXPLORER」では、ここに入力した名前が表示されます。

context

「context」は今回のように複数の階層を設定する際に、同期させたい階層を入力します。単一の場合は「context」を設定する必要はないでしょう。例えば「images」の階層内にある「upload」を対象にしたい場合は「images/upload」と入力します。

protocol

「protocol」は「sftp」で転送するか「ftp」で転送するかを設定します。

host

「host」は、サーバーのアドレスを設定します。

port

「port」は、通信する際にポート番号を設定します。

username

「username」は、ログインする際のログイン名を設定します。

password

「password」は、FTPでログインする際のパスワードを設定します。

privateKeyPath

「privateKeyPath」は、SFTPでログインする際の鍵を設定します。

remotePath

「remotePath」は、サーバーの保存する階層を設定します。「ftp」と「sftp」で接続する場合、「remotePath」の設定が同じとは限らないので注意してください。

uploadOnSave

「uploadOnSave」は、自動保存するかどうかを設定します。「true」になっていると保存した際に自動的に設定したサーバーにアップローされ上書きされます。デフォルトでは「false」で無効となっています。

VSCodeの拡張機能「SFTP」の基本的な機能

次にVSCodeの拡張機能「SFTP」の基本的な機能について紹介します。

自動アップロード

「自動アップロード」はVSCodeのエディタ上で保存した際に、自動的に設定しているサーバーに保存・上書きしてくれる機能です。サーバーにデータがない場合は新規でアップロードされ、すでにある場合は上書き保存されます。コンフィグファイルに「”uploadOnSave”: true」と設定する事で有効になります。

ファイルのアップロード

エクスプローラーで該当ファイル上で左クリックしメニューを表示させ「Upload」を選択すれば手動でファイルをアップロードする事ができます。VSCodeから画像をアップロードする事もできます。

差分表示

エクスプローラーで該当ファイル上で左クリックしメニューを表示させ「Diff with Remote」を選択すればローカル上にあるファイルとサーバー上にあるファイルの差分を表示させる事ができます。

同期

設定しているフォルダ上で左クリックしメニューを表示させ「Sync Local -> Remote」、「Sync Remote -> Local」、「Sync Both Directions」を選択する事で「ローカルからリモート先」、「リモート先からローカル」、「双方の同期」を実行する事ができます。

SFTP: REMOTE EXPLORER

左メニューから「SFTP: REMOTE EXPLORER」のアイコンをクリックする事でエクスプローラーにサーバー上のファイルやフォルダーを表示させる事ができ、「ローカル上にあるファイルの表示」や「ファイルの削除」の操作が可能です。

まとめ

こちらの拡張機能を利用するには「FTP」もしくは「SFTP」でデータを転送できる環境が必要ですが、一度使えばこの拡張機能の便利さを理解してもらえると思います。ぜひお試しください。