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

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

【VSCode】ファイルをサーバーに自動アップロードする例|拡張機能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)は、以下のショートカットか、メニュー内の「表示」>「コマンドパレット」から表示できます。

Mac shift+command+P
Windows/Linux Shift+Ctrl+P

設定ファイル(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の設定により、ファイルを保存すると、 SFTP接続で指定したサーバーに保存したファイルを自動アップロードします。

例で設定したsftp.jsonについて

以下、上記sftp.jsonファイルで設定した内容となります。

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

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

sftp.jsonのその他の設定項目

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

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。