VSCodeでSFTPを使ってリモートサーバーにファイルをアップロードする方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、VSCodeでSFTPを使ってリモートサーバーにファイルをアップロードする方法について解説します。

1 VSCodeでSFTPを使ってリモートサーバーにファイルをアップロードする
2 Twitterやってます！Follow Me！
3 Python関係書籍
4 プログラミング学習・エンジニア転職関連の情報
5 参考・引用
6 最近の投稿

VSCodeでSFTPを使ってリモートサーバーにファイルをアップロードする

それでは、VSCodeでSFTPを使ってリモートサーバーにファイルをアップロードするフローを1つ1つ順に追って説明していきます。

VSCodeのSFTP拡張機能をInstallする

まずは、VSCode の SFTP 拡張機能を Install します。

SFTP の接続設定をするために設定ファイルを作成する

Install が完了したら、SFTP の接続設定を行なっていきます。

表示 > コマンドパレットを選択します。

すると、VSCodeのコマンドパレットが開かれるので、SFTP と検索をかけましょう。

SFTP: Config が出てきたら、それを選択します。

フォルダーを選択してくださいと言われるので、SFTPを利用したいフォルダーを選択します。

フォルダーを選択すると、次のように「.vscode」ディレクトリが作成されて、その中に sftp.json ファイルが作られます。

Default では、次のような内容の sftp.json ファイルが作成されます。

sftp.json にリモートサーバーとの接続設定を記述する

それでは、sftp.json にリモートサーバーとの接続設定を記述していきます。

Default の設定を次のようにリモートサーバーに合わせて、書き換えました。

{
    "name": "Robotama-Server",
    "host": "192.168.101.163",
    "protocol": "sftp",
    "port": 22,
    "username": "robotama",
    "remotePath": "/home/robotama/app/data/packages",
    "uploadOnSave": false
}

今回設定した設定値は、それぞれ次のような意味になります。

{
    // 任意の設定名
    "name": "Robotama-Server",

    // Remote-Server のアドレス
    "host": "192.168.101.163",

    // 接続プロトコル
    "protocol": "sftp",

    // 接続ポート番号
    "port": 22,

    // リモートサーバのユーザ名
    "username": "robotama",

    // リモートサーバーのアップロード・ディレクトリのパス
    "remotePath": "/home/robotama/app/data/packages",

    // 保存時に自動的にアップロードする
    "uploadOnSave": false
}