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

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

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

mixhostでSFTP接続する場合

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

参考サイトなど

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

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

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