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

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

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

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

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

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

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

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

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

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

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

また、コマンドパレット(command palette)については、以下のリンク先を確認してみてください。

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アップロードするサーバー側のディレクトリを、絶対パスで指定
uploadOnSavetrueを指定すると、ファイルを保存した際にサーバーへ自動アップロード
contextワークスペース全体をサーバーへ接続させない場合、サーバーへ接続させるディレクトリをワークスペースのルートからのパスで指定
privateKeyPathSSH接続の秘密鍵へのパスを、絶対パスで指定
passphraseSSH接続のパスフレーズを指定

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

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

Sassやwebpackのコンパイルなど、外部からファイルが更新された際にも、自動でアップロードする場合は、次のような設定を上記オブジェクトに追加します。

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

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

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

mixhostでSFTP接続する場合

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

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。