Visual Studio Codeプラグイン「SFTP」の使い方。FTPソフト立ち上げ不要でファイルアップロード可能

Visual Studio Codeプラグイン「SFTP」の使い方。FTPソフト立ち上げ不要でファイルアップロード可能 制作ツール

このブログArrownもそうですが、エックスサーバやさくらインターネットなどのレンタルサーバーを使用してWordPressサイト・ブログやWebサイトを運営されている方、それなりにいらっしゃると思います。

特に自分でCSSやJavaScript、HTML・PHPなどのコードを編集しカスタマイズしている方の場合は、編集した内容を実際に公開されているWebサイトに反映させるために、FTPサーバへのファイルアップロード作業を行うことがあると思います。

このFTPサーバへのアップロード作業を行う時、通常必要になるのが「FTPソフト」と言われるもの。

Transmit 5 for macOS. Now available.
The gold standard of macOS file transfer apps just drove into the future. Transmit 5 is here.

TransmitやFileZillaなどのソフトが有名かと思いますが、「いちいちFTPソフトを立ち上げなきゃいけないの面倒くさいなー」と思ったことがある方はいらっしゃいませんか??

Visual Studio CodeのSFTPというプラグインを使用すると、FTPソフトを立ち上げすることなく、ファイルアップロードを自動で行うことができるようになります。

今回は、SFTPの使い方についてご紹介したいと思います!

Visual Studio Codeのプラグイン「SFTP」の導入方法

プラグインのインストール

まずは、Visual Studio CodeにSFTPプラグインを導入するところから始めてみたいと思います!

Visual Studio Codeの使い方・基礎基本 - Microsoft製のコードエディタ -
以前、Bracketsの使い方・プラグインの導入手順の基礎基本 – 無料で使えるコードエディタ –という記事で、コードエディタ「Brackets」についてご紹介させていただきました。 Bracketsだけでなく、Atomなどコードエデ...

Visual Studio Codeの使い方・基礎基本 – Microsoft製のコードエディタ –という記事でVisual Studio Codeのインストール・設定方法についてはご紹介させていただいていますので、もしVisual Studio Codeをご使用でない方・導入してみたいという方は、ぜひご参照ください!

Visual Studio Codeでsftpプラグインの導入手順図

プラグインの導入方法は上記画像の通りに行っていただければOKです!

SFTPプラグインを探して、インストールボタンを押すだけという、いたってシンプルな手順となっています!

プラグインのインストールができたら、Visual Studio Codeの再読み込みを実行しておいてくださいね!

SFTPプラグインの設定

続いて、SFTPプラグインの設定を行います。まずは、Visual Studio Codeの画面でCommand + Shift + Pを実行します。
(Windowsの方はCommandではなくてControl)

Visual Studio Codeで SFTPプラグインの設定

すると上記画像のような画面が出てきます。

初めから出ていない方もいらっしゃるかもしれませんが、ここで「sftp:config」を選択(もしくは入力)してみましょう!

sftp.jsonファイルが生成される

すると、新たにsftp.jsonというファイルが生成されます。

プロジェクトフォルダ内にもsftp,jsonが生成されているのが確認できる図

プロジェクトフォルダにもsftp.jsonファイルが存在しているのを確認することができます。

sftp.jsonへの必要事項の入力

次に、sftp.jsonへの必要事項の入力を行っていきます。

ここの内容は重要です!ここで誤った情報を入れてしまうと、ファイルアップロードができなくなってしまうからです。

{
    "host": "**", //サーバのアドレス
    "port": 22,
    "username": "www", //サーバに入るためのユーザーネーム
    "password": null,
    "protocol": "sftp",
    "agent": null,
    "privateKeyPath": "**", //サーバに入るための認証鍵ファイルがある場所(自分のPC内で指定)
    "passphrase": null,
    "passive": false,
    "interactiveAuth": false,
    "remotePath": "**", //サーバ上のファイルアップロードをしたい場所(トップディレクトリ)
    "uploadOnSave": true,//保存時に自動アップロードするようにしたいかどうか
    "syncMode": "update",
    "watcher": {
        "files": false,
        "autoUpload": false,
        "autoDelete": false
    },
    "ignore": [ //自分のPC上にあるプロジェクトフォルダ内のデータのうちアップロードしたくないもの、する必要がないものを指定
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store"//Macの場合は必要になるかと
    ]
}

色々設定項目がありますが、最低限上記でコメントを打ったところがきちんと設定できればOKです。

サーバのアドレス・ユーザー名などはご使用のサーバの管理画面などを参照いただきたいと思うのですが、引っかかるポイントとしてprivateKeyPathのところがあげられるかなと思うので、エックスサーバを例に、keyの発行方法と、上記privateKeyPathの設定について触れておきたいと思います!

エックスサーバにおけるSFTP接続用のKeyの発行方法

まずはエックスサーバのサーバパネル管理画面にログインしましょう。

エックスサーバ のサーバパネルでSSH設定を選択

ログインをしたら、SSH設定を選択します。

エックスサーバのSSH設定画面

次に出てきた画面で、「SSH設定」というタブを選択し、「ONにする」というボタンを押して、SSH設定をまずは有効にします。

エックスサーバのSSH設定画面

次に、「公開鍵認証用鍵ペアの生成」というタブを選択し、パスフレーズを入力します。

パスフレーズは、要するにパスワードを入力するようなイメージを持っておいていただければ大丈夫です!

エックスサーバのSSH設定画面

パスフレーズを設定すると、自動的に「**.key」というファイルがダウンロードされます。

このファイルがある場所をsftp.jsonの「privateKeyPath」の項目のところで指定するようにする、というわけなんですね!

作業プロジェクトのフォルダに入れてもいいとは思うのですが、間違ってkeyファイル(認証鍵ファイル)をサーバにアップロードしてもいけないので、別の場所にkeyファイルを置いておいて、その場所を正しく指定するようにした方がいいのかもしれないですね。

ちなみに、Desktop上に「arrown.key」という認証鍵ファイルを置いた場合、指定の仕方としては、

privateKeyPath:"Users/ユーザー名/Desktop/arrown.key"

のような書き方になります。(Macの場合の書き方。要するに相対パスでは指定しないことがポイント)

Visual Studio Codeのプラグイン「SFTP」を実際に使用してみる

それでは、必要な設定が済んだところで、最後にSFTPの実際の使い方を見てみます!

Visual Studio CodeでSFTPを実行

といっても、その方法はいたってシンプル!

Command(Windowsの場合はControl) + Shift + Pを押すと上記画面が出てくるので、SFTP:uploadを実行するだけ!

実行すると、以後はファイルを保存する度に自動的にファイルがアップロードされるようになるので、実質必要な作業は以上でおしまいなんです!

まぁ、素敵!

まとめ

ということで、今回はVisual Studio Codeプラグイン「SFTP」の使い方について見ていきました!

これで開発効率があがりますね! そして、Visual Studio Codeからますます離れられなくなりそうです!