MENU

【VSCODE拡張機能_SFTP設定方法】保存したファイルを自動的にFTPサーバにアップロード

目次

SFTPってなにができるの?

VSCODE拡張機能のSFTPを使って、保存したファイルを自動的にFTPサーバにアップロードできます。
つまりローカルでデータを作成したものをFTPのサーバーにアップロードする時、わざわざ手動でアップロードボタンを押さなくても良い!コード書いたら、自動反映できます!
Visual Studio Codeだけで、FTP操作も完結できるのでかなりの効率化ができます。

※注意点:キノスラテストサーバーでのみ使用して下さい。
お客様のサーバーを使用しての自動アップロードは、禁止です。

設定方法

①拡張機能で、SFTPをインストール

②SFTPの接続設定を行います。Windows/Linux では[Ctrl]+[Shift]+[P]、
Mac では[Cmd]+[Shift]+[P]でコマンドパレットを開き、SFTP: config を選択して実行します。

③SFTP: configを実行すると、sftp.jsonファイルが開かれます。
右図は説明図、左図は、私が記載した設定コードになります。
今回はSFTPではなくFTPに繋げる為、秘密鍵の設定はいりません。
※ちなみに複数の接続もできるみたいですが、今回はやりません。

一番重要なのは、“uploadOnSave”: true になっているかです。
ここは、自動的にアップロードするかを問われています。
trueがする。falseがしない。
ちなみに、falseに設定すれば手動アップロードに切り替えができます。

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

※コードはキノスラテストサーバーID/PWに記載しておきました。
Cynosuraシートの250行。コピペして下さい。

remotepathは、アップロードしたい先のパスを記述しましょう。

【下図画像参照】
キノスラテストサーバーの青丸部のパス(任意)を記載してあげればOKです。
下の画像のパスは例です。

使用方法

設定したら、コマンドパレットを開き >sftpと入力。
そのあと、SFTP:Listを選択

選択すると、先ほどnameで設定した名前が表示されます。選択しましょう。

作業したいファイルを選択すれば完了です。
これだけです。

あとは.vscodeフォルダにファイルが自動生成されます。
以上です。

その他の機能

【手動アップロード】
ちなみに手動でもアップロードできます。右クリック⇒UploadすればOKです。

【差分比較】
アップロード先のファイルと差分比較ができます。

【ログの表示】
ちゃんとアップロードされているかはログを見ればわかります。

この記事を書いた人

目次