【VSCode】SFTPを使用する。【拡張機能】

2022/03/062022/03/18

Visual Studio Codeの拡張機能であるSFTPを使用して、開発コードを本番環境にアップロード及び同期をします。

環境

VSCode: 1.65.0
SFTP (VSCode 拡張機能): 1.15.13
Windows: 10 home (20H2)
WSL: 2
Ubuntu: 20.04 LTS
Docker Desktop for Windows: 3.5.2 (66501)

設定ファイル（sftp.json）の作成

SFTPをインストール、Ctrl + Shift + Pでコマンドパレットを表示してSFTP: Configを選択すると、開発ディレクトリルートに.vscode/sftp.jsonが作成されます。

sftp.json の編集

以下はエックスサーバーでの使用例となります。他の設定項目、及び、詳細はWikiに詳しいです。

{
    "name": "Xserver",
    "host": "svxxx.xserver.jp",
    "protocol": "sftp",
    "port": 10022,
    "username": "serverid",
    "remotePath": "/home/serverid/serverid.xsrv.jp",
    "privateKeyPath": "/path/to/serverid.key",
    "passphrase": "xxxxxx",
    "uploadOnSave": false,
    "context": "public_html/test"
    "ignore": [
        ".vscode", ".git", ".DS_Store",        
        "node_modules",
        "/**/wp-admin"
        "*.txt"
    ],
    "syncOption": {
        "delete": true,
        "skipCreate": false,
        "ignoreExisting": false,
        "update": false
    }
}

基本設定

キー	説明	値	デフォルト値
remotePath	アップロードするリモートサーバーのディレクトリ。指定ディレクトリがリモート先のルートディレクトリになり、以下、アップロードでローカルと同構造になります。	絶対パス	/
uploadOnSave	保存時に自動アップロード	bool	false
context	アップロード対象ディレクトリをルートから指定。指定なしで全体	相対パス
ignore	アップロードを無視するディレクトリ・ファイル名。gitignoreと同挙動。	相対パス	[]

ignoreについて

node_modulesの場合は、node_modulesと名前の着くディレクトリもファイルもアップロードされません。
node_modules/の場合は、ディレクトリはアップロードされますが、配下のファイルはアップロードされませんでした。

また、ここで登録したファイルであっても、エクスプローラーでファイル単体を選択してアップロードすると、実際にアップロードされます。絶対に更新したくないファイルは、サーバー側のパーミッションを書き込み禁止にしたほうがいいのかもしれません。

同期オプション

syncOption.キー	説明	値
delete	削除を同期	bool
skipCreate	新規作成ファイルをスキップ	bool
ignoreExisting	既存ファイル更新をスキップ	bool
update	ローカル側が新しい場合のみ更新	bool

アップロード

VSCodeのエクスプローラーでディレクトリ・ファイルを右クリックしコンテキストメニューからUpload / Upload Folderを選択。

以下、同コンテキストメニューから選択。

ダウンロード

Download / Download Folderを選択。

同期

ローカル側にリモートを合わせる

Sync Local -> Remoteを選択。
開発したコードを本番環境に同期するなど。

リモート側にローカルを合わせる

Sync Remote -> Localを選択。
本番環境で更新されたファイルを開発環境にも同期するなど。

両方を合わせる

Sync Both Directionsを選択。更新時間が新しいファイルへ結合される。

エラーが出る

両方向同期をしようとすると、No such fileとエラーが出て実行されませんでした。

ローカル側でのみ更新した場合は成功するのですが、リモート側を更新してから両方向同期しようとするとエラーが出るようです。そうすると、ローカルから同期と変わらないので現時点ではこの機能は使う意味がありません……。ただ、GitHubのIssueで同問題が起きている方がおられたのですが、拡張機能製作者の方が「再現性がなく、自分の環境ではうまく動いている」と回答していたので、私の環境が原因の可能性が高いです。

差分を比較する

Diff with Remoteを選択。
Remote ↔ Localの差分が表示される。

Dockerコンテナ（WSL）に秘密鍵を渡す

エックスサーバーのSSH設定で生成した秘密鍵を、WindowsのC:¥Users¥<name>¥.ssh¥に保存し、WSL(Ubuntu)からのマウントで参照します。Dockerコンテナへは、docker-composeのsecretsを使用して渡します。

version: '3.8'

secrets:
    ssh_key:
        file: /mnt/c/Users/<name>/.ssh/serverid.key

services:
  web:
    build: .
    ports: 
      - 80:80
    secrets:
      - source: ssh_key
        target: id_rsa
        uid: '1000'
        gid: '1000'
        mode: 0400

あとはコンテナを作成し、.vscode/sftp.jsonのprivateKeyPathの値に/run/secrets/id_rsaと設定して完了です。これで、FTPクライアントソフト使うよりお手軽に本番環境へ更新が反映できるようになりました。

{
    "name": "Xserver",
    "host": "svxxx.xserver.jp",
    "protocol": "sftp",
    "port": 10022,
    "username": "serverid",
    "remotePath": "/home/serverid/serverid.xsrv.jp",
    "privateKeyPath": "/run/secrets/id_rsa",
    "passphrase": "xxxxxx",
}