Visual Studio Code ローカル(Mac)とサーバsftp同期

こんにちは、Yuuichi(@WestHillWorker)です。

リアルが忙しく、随分と更新が滞ってしまいました…

年明けからInputが多くて、アウトプットまで上手く循環できていなかったので、溜め込んだ情報を整理しつつどんどんアウトプットできたらと思います。(いいわけ)

今回は、ローカル(Mac)のVisual Studio Codeで開発していて、どこか開発環境(Linux等の環境)にファイルを同期したい場合、sftpで同期して開発できるプラグインがあり便利だったので、簡単に利用方法などをまとめてみました。

スポンサーリンク

まずローカルと開発サーバ同期?

みなさんローカルから開発サーバ等にソースをアップロードして動作等を確認したりしたい時ってありましたか?

自分はブログや趣味で開発する際にweb系だとサーバ上でvimで編集することが多かったのですが、新規でがっつり新しいものを作る際は、ローカルでIDEを使って開発する方が楽かなぁーって個人的な思いがあり、何か手段はないかなぁというのが事の発端です。

VSCで同期系はいくつかある

ローカルとサーバ同期についてですが、VSCではいくつか既にプラグインが存在します。
1つ目としては、Remote VSCode

2つ目は、liximomo.sftp

両方試してみたところ、個人的にはsftpプラグインが必要最低限の設定だけで使い勝手が良さそうでしたので、2つ目について紹介したいと思います。
※Remote VSCodeは、同期先サーバに「rmate」というパッケージをインストールしないといけなかったので、必要最低限のパッケージングしか入れたくない派の僕はそこで断念して、sftpプラグインにシフトしました。

sftp導入

Macの場合、VSCの左メニュー拡張機能の検索窓からsftp検索。
もしくは、Shift + command + xで拡張機能の検索窓からsftp検索。

設定ファイル

Macの場合、Command + Shift + Pを押下して、「SFTP: config」を選択すると初期設定ファイルが作成される。

初期作成時は、以下のような設定

{
    "protocol": "sftp",
    "host": "host",
    "username": "username",
    "remotePath": "./"
}

何も認証などしていない場合、上記のように最低限の設定だけで済ませることができてしまう。
hostには、開発サーバなどのホスト名を設定
usernameには、サーバログインユーザー名
remotePathには、開発サーバの同期場所を設定

詳細な設定ファイル

実際には、秘密鍵・公開鍵での認証や特定portなどの各種設定が入ると思いますので、もう少し設定を増やしてみようと思います。

{
    "protocol": "sftp",
    "host": "hoge.com",
    "port": xxxx,
    "username": "hogeuser",
    "remotePath": "./",
    "privateKeyPath": "/Users/<ユーザ名>/.ssh/<秘密鍵ファイル名>",
    "password": "null",
    "agent": "null",
    "passphrase": true,
    "interactiveAuth": false,
    "uploadOnSave": false,
    "syncMode": "update",
    "watcher": {
        "files": false,
        "autoUpload": false,
        "autoDelete": false
    },
    "ignore": [
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store"
    ]
}

特定port / privateKeyPathなど各自分の環境に向けて設定すれば同期できると思います。

特定ファイルを同期しないignore設定など、今回紹介した設定以外にもvscode-sftpを参考に設定が記述されています。

設定完了後 ファイル同期

設定完了後は、Command + Shift + P押下後に、SFTPと入力するとUpload / Download / Diff などファイル操作を行いながら開発をする流れになると思います。

※ファイル保存時に、自動アップロードなどの設定も「 “uploadOnSave”: true」などでできたり、色々と便利そうです。

同期がうまくいかない場合は、VSCの設定に以下を追加してデバッグログを表示して調査してみるといいかと思います。

"sftp.printDebugLog": true

スポンサーリンク
PAGE TOP