自動アップロードで作業効率化！VSCodeのプラグインSFTP

この記事の結論

• 『SFTP』プラグインを入れることで、ファイルを自動でサーバーへアップロードしてくれる
• 手動でアップロードする手間が省けるので、作業がすごい勢いで捗る
• 自動アップロード ＝ サーバーの上書きなので、そこは注意が必要

手動でアップロードする作業が無くなる

普段、サーバーにファイルをアップロードするとき、FileZillaなどのツールを使ってファイルをアップロードしていたのですが、
「毎回、手動でアップロードするの面倒だな…」
なんて思っていました。

そこで見つけた便利なプラグインが、VSCodeエディタで使える『SFTP』です。

簡単に言うと、ファイルを保存した瞬間にサーバー側に自動でファイルを保存(同期)してくれるプラグインです。かなりの作業効率化になるのでおすすめです。

プラグイン『SFTP』の使い方

まず、VSCode(Visual Studio Code)エディタを使っていることが条件です。
もし、別のエディタを使っている場合でも、似たプラグインは存在するので探してみてください。

VSCodeは以下のリンクからダウンロードできます。

https://code.visualstudio.com/

SFTPプラグインのダウンロード

VSCodeの左側にある拡張機能のボタンをクリックし、『SFTP』と検索すると一番上に出てくるのでインストールします。

SFTPの設定

コマンドパレットを開き、検索欄に「SFTP」と入力すると、「SFTP:Config」という項目があるのでクリックします。

クリックすると設定ファイルが開きます。
設定ファイルは、デフォルトで以下のようになっています。

{
    "protocol": "sftp",
    "host": "localhost",
    "port": 22,
    "username": "username",
    "remotePath": "/"
}

サーバーと同期させるために設定ファイルを書き換えます。
最低限、以下があれば大丈夫なので、ドメインやパスなど、必要なところを書き換えてください。

[
    {
        "name": "XXX.jp", // 設定に対する名前(なんでも良い)
        "host": "XXX.jp", //サーバーのアドレスを設定
        "protocol": "ftp", //「sftp」で転送するか「ftp」で転送するか
        "username": "user", //FTPのログイン名
        "password": "pass",　//FTPのパスワード
        "remotePath": "XXX.jp/test", //保存するサーバーの階層
        "uploadOnSave": true //サーバーに自動保存するかどうか
    }
]

設定ファイルは、書き間違えると動作しないので、しっかり確認してください。
ポイントは"uploadOnSave": trueです。
この設定がtrueになっていることによって、自動でサーバーに保存されるようになります。

実際に自動で保存されているか、ブラウザを確認してみてください。

成功していたら、あとはガンガン作業していきましょう！

SFTPの注意点

サーバーに自動で保存されるということは、
自動で上書きされるということです。

1人で作業しているプロジェクトなら問題無いですが、

複数人で動くプロジェクトなど、少し慎重に作業しなければいけない場合、自動保存機能はオフにしておいたほうが無難です。

今だとgit管理が当たり前になっているので、取り返しのつかないことになることはほぼ無いとは思いますが、念のため注意してください。

それでは良い作業効率ライフを～。