こんにちはフロントエンドエンジニアのまさにょんです!
今回は、VSCodeでSFTPを使ってリモートサーバーにファイルをアップロードする方法について解説します。
目次
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
}
SFTPを使って、リモートサーバーにフォルダーやファイルをアップロードする
フォルダーをアップロードする場合は、該当のフォルダーの上で右クリックをします。
すると、次のような画面になるので「Upload Folder」を選択すれば、リモートサーバーにフォルダーをアップロードすることができます。

ファイルをアップロードする場合は、該当のファイルの上で右クリックをします。
すると、次のような画面になるので「Upload File」を選択すれば、リモートサーバーにファイルをアップロードすることができます。

Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!
Python関係書籍
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース(無料)

【IT道場】入校時0円! 就職目的プログラミングスクール

エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

参考・引用
最近の投稿





