【VSCode】VSCodeの拡張機能「sftp」が超便利!初期設定と使い方

慣れれば便利!sftp

エディターのVSCode(Visual Studio Code)の拡張機能に「sftp」があります。

 

WordPressの開発を行う際にはファイルが置かれているサーバーと接続する必要があります。

 

サーバーと接続するためにFFFTPやCyberduckなどのFTPクライアントソフトウェアを使用する方法がありますが、ファイルのアップロードやダウンロードの作業にかなりの煩わしさがあります。

ローカル(作業で使うPC)でファイルの編集を行い、更新されたファイルがリモート(サーバー)にリアルタイムで反映されたとすれば、いちいちftpクライアントソフトウェアのまどろっこしい操作をする必要はなくなるでしょう。

 

VSCodeの「sftp」を使えば、ローカルとサーバーをリアルタイムで繋ぐことができます。

今回は私のブログで使用しているエックスサーバー が提供しているレンタルサーバーを使用して、「sftp」の使い方を説明します。

 

ここでは簡単なftp接続を使用して説明します。sftp接続はエックスサーバー の設定も少し増えることになります。sftp接続については次回に記事にします。

 

まずはインストール

VSCodeを立ち上げて「sftp」をインストールしましょう。

 

次に、作業するためのディレクトリを作成します。

あなたのPC上のどこに作成しても構いません。

ディレクトリ名はなんでもいいです。あなたがわかりやすい名前をつけましょう。

 

空のディレクトリを作成したら、VSCodeのワークスペースにおいてください。

今回は「sftp_test」と言う名前のディレクトリを作成し、ここにWordPressのファイルを落としてきます。

ワークスペースにフォルダを追加

 

Ctrl+Shift+P(MacならCmd+Shift+P)でコマンドパレットを開きます。

そこに、「>sftp:config」と入力してください。

入力すると検索結果の候補に「SFTP:Config」が現れるので、それを選択しましょう。

SFTP:Configを選択

 

するとワークスペース内に「.vscode」ディレクトリと「sftp.json」ファイルが追加されます。

ワークスペース内に設定ファイルが追加される

 

すでに開かれている「sftp.json」ファイルに、リモート接続するための設定を書き込みます。

ここではエックスサーバー を例にとって説明します。

 

 

FTPサーバーにアクセスするための情報を確認

これからFTPサーバーのホスト名とユーザー名とパスワードを確認するために、エックスサーバーのサーバーパネルにログインします。

 

サーバーパネルにログインしたら、メニューの中にある「FTP」の「FTPアカウント設定」を選択します。

「ドメイン選択画面」に入ったら、あなたのWordPressサイトのドメインを見つけて右側の「選択する」を押します。

あなたのWordPressサイトのドメインを見つけて右側の「選択する」を選択

 

「FTPアカウント設定」の画面が開いたらタブの「FTPソフト設定」を選択します。

その中の「初期FTPアカウントの設定内容」の表にホスト名とユーザー名とパスワードが書かれているので、これをメモしておきましょう。

パスワードを忘れたとしてもエックスサーバー に登録したときにすでに作成しているので、エックスサーバー から届いた過去のメールを引っ張り出して確認しましょう。

「FTPソフト設定」を選択

 

sftp.jsonを編集

VSCodeに戻ります。

さきほど入手したFTPサーバーのホスト名、ユーザー名、パスワードをsftp.jsonに以下のように書いてください。

今回編集するWordPressのファイルは、あなたが現在しようされているテーマのテンプレートファイルとします。

 

passwordとuploadOnSaveの項目は新しく加えました。

 

uploadonSaveは、ファイルの変更をリモートに自動で反映させるかどうかを選択する項目です。

これがtrueの場合は、ファイルの保存をしたらすぐに自動でリモートにその変更が反映されます。

falseの場合はリモートへの反映作業を手動で行う必要があります。

 

remotePathは、ここに書かれたディレクトリ以下にあるいずれかのファイルまたはディレクトリを落とし込むという意味です。

 

ここを最上部のルートディレクトリである「/」としても構いませんが、今回はテンプレートファイルを編集することにしています。

全く必要のないファイルまで落としてあなたのPCの容量を圧迫せずに、最低限の必要なディレクトリを選択しましょう。

 

書き終えたら保存しましょう。

いよいよ、リモートの情報をローカルに落とし込む作業へ移ります。

 

 

作業フォルダをローカルへ落とす

Ctrl+Shift+P(MacならCmd+Shift+P)でコマンドパレットを開いて、「>sftp:list」と入力して「SFTP:List」を選択します。

 

選択後、remotePathに書いたパスが現れれば接続に成功です。

このパスをクリックしましょう。

remotePathに書いたパスが書かれていればサーバーとの接続が成功

 

ローカルに落としてくるファイルまたはディレクトリを選択します。

最上部にある「. choose current floder」を選択すればremotePathに書いたディレクトリとその中身を落としてくることができます。

 

それ以外のファイルやディレクトリでもOKです。

リモート上のファイルまたはディレクトリを選択したらワークスペースに追加されます。

選択したリモート上のディレクトリがワークスペースに追加される

 

あとは編集したいファイルを選択して編集するだけです。

 

sftp.configのuploadOnSaveをtrueにしているので、ローカルで編集した内容がリアルタイムでリモートに反映されるようになっています。

慎重にファイルの編集を行いたい場合はuploadOnSaveをfalseにするかその行を削除しましょう。

 

 

差分の確認

uploadOnSaveをfalseにすれば、ローカルとリモートの差分を確認することができます。

ワークスペース内にある編集したファイル名で右クリックして「Diff with Remote」を選択すると、画面が半分に割れてローカルとリモートのファイルの内容を比べることができます。

Diff with Remote

 

 

ファイルの削除

ワークスペースからファイルを削除してもリモートに影響を与えません。

ワークスペースからファイルを削除してもローカルには落としてきたファイルが残っていますが、それを削除してもリモートには影響を与えません。

 

 

まとめ

サーバーをいじるとなればサーバーサイドの知識も多少は必要になるので始めのうちは面倒かもしれませんが、慣れれば本当にたいしたことはありません。

その面倒な初期学習を上回るリターンがこの拡張機能「sftp」には備わっています。

 

基本的な操作はここに書きましたが、まだ紹介しきれていないノウハウがあります。

そもそもここでは簡単なftp接続を行ってますが、できればsftp接続にした方が安全です。

ftpは暗号化せずに通信しているので盗聴の危険があります。

sftpは暗号化されて通信されるので、盗聴される危険はありますがその内容を読み解くことはできません。

 

sftp接続の方法などはいずれ記事に書きます。