【VSCode】ファイルをサーバーに自動アップロードできる拡張機能SFTP

今回は、Visual Studio Code（以下、VSCodeと表記）で拡張機能「SFTP」を使い、保存したファイルをサーバーに自動アップロードする設定例となります。

【VSCode】保存したファイルをサーバーに自動アップロードする例｜拡張機能SFTP
参考サイトなど

【VSCode】保存したファイルをサーバーに自動アップロードする例｜拡張機能SFTP

例では、ワークスペース内の指定したディレクトリにあるファイルを保存した場合に、SFTP接続でサーバーに保存したファイルを自動アップロードします。

以下、拡張機能「SFTP」の設定手順となります。また、手順内のVSCodeに関する表記は、拡張機能「Japanese Language Pack」でVSCodeを日本語化した場合の表記となります。

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

まず、拡張機能「SFTP」をインストールし有効にします。

拡張機能をインストールする方法については、以下のリンク先を参考にしてみてください。

【VSCode】拡張機能をインストール・削除する方法と、有効・無効を切り替える方法

設定ファイル（sftp.json）を作成

次に、以下の方法で拡張機能「SFTP」の設定ファイル（sftp.json）を表示します。

メニューバーから「表示」>「コマンドパレット」を選択します。
コマンドパレットに、 sftp: config と入力します。
コマンドパレットの検索結果に、 SFTP: Config が表示されるので選択します。
sftp.jsonファイルが表示されます。

また、コマンドパレット（command palette）については、以下のリンク先を参考にしてみてください。

【VSCode】コマンドパレットから操作する方法｜利用できるコマンド一覧を確認

sftp.json内に設定を記載して保存

次に、sftp.json内に設定を記載して保存します。以下、sftp.json内に記述する設定の例となります。

{
    "name": "My Server",
    "host": "XXXXXXXX",
    "protocol": "sftp",
    "port": XX,
    "username": "XXXXXXXX",
    "remotePath": "XXXX/XXXX",
    "uploadOnSave": true,
    "context": "XXXX/XXXX",
    "privateKeyPath": "XXXX/XXXX",
    "passphrase": "XXXXXXXX"
}

上記sftp.jsonファイル内の設定項目は、次の内容となります。

プロパティ	値（設定内容）
name	任意の名前
host	サーバーのホスト名
protocol	プロトコル名（ftpかsftp）
port	サーバーのポート番号
username	接続するユーザー名
remotePath	アップロードするサーバー側のディレクトリを、絶対パスで指定
uploadOnSave	trueを指定すると、ファイルを保存した際にサーバーへ自動アップロード
context	アップロードするディレクトリをワークスペースのルートからのパスで指定（ワークスペース全体をサーバーへアップロードしない場合に指定）
privateKeyPath	SSH接続の秘密鍵へのパスを、絶対パスで指定
passphrase	SSH接続のパスフレーズを指定

上記sftp.jsonの設定により、指定したディレクトリ内にあるファイルを保存すると、 SFTP接続で指定したサーバーに保存したファイルを自動アップロードします。

mixhostでSFTP接続する場合

レンタルサーバーのmixhostでSFTP接続する場合には、以下のリンク先を参考にしてみてください。

【mixhost】SSHの公開鍵・秘密鍵を作成し利用する準備をする方法

【mixhost】FTPS・SSH・SFTPのホスト名・ユーザー名・ポート番号を確認する方法

外部からファイルが更新された際にも自動でアップロード

Sassやwebpackのコンパイルなど、外部からファイルが更新された際にも自動でファイルをアップロードする場合は、次のようにプロパティwatcherをJSONに追加します。

   "watcher": { 
        "files": "**/*.{js,css}", 
        "autoUpload": true
    }

上記例では、ワークスペース内のJavaScript・CSSファイルが外部から更新された場合に、自動でそれらのファイルをアップロードします。

アップロードを除外するディレクトリを指定

アップロードを除外するディレクトリを指定する場合は、次のようにプロパティignoreをJSONに追加します。

   "ignore": [
      "src",
      ".vscode"
   ]

上記例では、アップロードを除外するディレクトリを、ignoreの値に配列で指定しています。指定したディレクトリのパスはワークスペースのルートディレクトリからのパスとなります。

また、sftp.jsonのその他の設定項目については、文末の参考サイト内を確認してみてください。

参考サイトなど

Config · liximomo/vscode-sftp Wiki · GitHub