こんにちは、エンジニアの仁木です。
今回はVS Codeの拡張機能である「SFTP」を紹介したいと思います。
サーバーへのファイルのアップロードに、FTP/SFTPソフトを使ってアップしている方は多いんじゃないかと思います。
今回ご紹介する「SFTP」という拡張機能を使うことで、VS CodeからFTPソフトを介さずに直接ファイルをサーバーにアップロードできるようなります。
SFTPのインストールから使い方を紹介していきます。
まずは「SFTP」をVS Codeにインストールします。
SFTPで拡張機能を検索するといくつか同じ名前／アイコンの拡張機能が出てきます。
liximonoさんのものが一番ダウンロード数が多いようですが、現在は非推奨になっているようなので、代替のNatizyshunkさんのものをインストールします。
SFTPはワークスペース毎に専用のconfigファイルを用意し、サーバーの接続情報や拡張機能のコンフィグを設定します。
なので、まずはワークスペースを開きます。
ワークスペースを開いた後に、⌘+Shift+P でコマンドパレットを開きます。
コマンドパレット上で「sftp」と入力するとサジェストに表示される「SFTP: Config」を選択します。
「SFTP: Config」の選択後に、ワークスペースに「.vscode/sftp.json」ファイルが生成されます。
このsftp.jsonにサーバーの接続情報やSFTP拡張機能のコンフィグを書いていきます。
サーバーの接続情報については以下の項目を設定します。
普段FTPソフトを使っている場合はFTPソフトに設定してい情報をそのまま書きます。
sftpで接続する場合は以下の情報も追加で必要となります
その他ファイルの同期に関する設定です
uploadOnSave
VS Code上でファイルを保存した際に自動でサーバーにアップロードするかどうかを指定します。
trueで自動アップロード、false にすると手動でアップロードします。
useTempFile
公式ドキュメントでは「VSCode の保存操作ごとに一時ファイルをアップロードして、ファイルのアップロード中 (不完全) にユーザーがアクセスしたときに Web ページが壊れないようにします。」ということでした。
アップロード中のファイルにユーザーがアクセスしないようにする設定のようです。デフォルトのfalseのままで良さそうです。
その他にも設定があり、Githubのドキュメントで確認できます。
https://github.com/Natizyskunk/vscode-sftp/wiki/Common-Configuration
接続情報が正しく設定され、コンフィグでuploadOnSaveをtrueにしている場合、ファイルを保存したタイミングで自動でサーバー上のファイルに保存されます。
任意のタイミングでサーバーに反映したい場合は uploadOnSaveをfalseにして、ファイルまたはディレクトリをアップロードできます。
VS Codeのエクスプローラタブを開き、アップロードしたいファイルまたはディレクトリを右クリック選択し、「Upload File（Folder）」でアップロードできます。
SFTPはアップロードだけでなく、サーバーにおいてあるファイルをダウンロードすることもできます。
サーバーにしかおいていないファイルを直接ダウンロードすることはできません。（ただしディレクトリごとダウンロードした場合は可能です）
ダウンロードも手動アップロードと同じようにダウンロードしたいファイル、ディレクトリを右クリックして、「Download File（Folder）」でダウンロードできます。
自動反映の設定にしている場合など、意図しない変更を本番で稼働しているサーバーに反映してしまうと危険なので利用するにしても手動更新の方が良さそうです。（開発サーバーやテストサーバーで利用するくらいが良さそうです。）
開発環境とサーバーで内容が違うファイルがある場合は、気づかないうちにファイルを上書きしてしまう恐れがあるので、手動反映の設定にしておくほうが良さそうです。
ほとんどのプロジェクトでGitを利用していると思いますが、/vscode/sftp.jsonファイルはサーバーの接続情報が素のテキストで書かれているのでGitにプッシュしないように .gitignoreに追加しておきましょう。
いかがでしたでしょうか。
VS Code上でファイルをアップロードできるので、これまでFTPやSFTPソフトを使うより手早くサーバーにアップできるようになるのではないでしょうか。
FTPやSFTPソフトを利用しているVS Codeユーザーはぜひ試してみてください
