web関連

【VS Code】拡張機能「SFTP」の設定方法

2021/05/10

プログラミング

VS Code / 環境構築

「Visual Studio Code」上からFTPソフト無しにサーバーにファイルやディレクトリをアップロードできる拡張機能「SFTP」の使い方の備忘録

１．拡張機能「SFTP」をインストール

まず、拡張機能のインストールの手順。

［Ctrl］＋［Shift］＋［X］キーで拡張機能を表示
「SFTP」と検索し、拡張機能をインストール
※2023年現在だと「Natizyskunk」の「SFTP」を推奨される

※「SFTP」の拡張機能はいくつかあり、「liximomo.sftp-1.12.10」がレビュー数が高いが非推奨のため「natizyskunk.sftp-1.16.3」が推奨

２．拡張機能「SFTP」で「sftp.json」を生成

拡張機能「SFTP」インストール後の流れ。

［Ctrl］＋［Shift］＋［P］キーで「コマンドパレット」を開く
「SFTP: Config」を選択
設置するワークスペースを聞かれるので選択
ワークスペース内に.vscode/sftp.jsonが生成される

３．生成された設定ファイル「sftp.json」を書き換え

.vscode/sftp.jsonが生成されたなら、sftp.jsonを書き換える。
以下は、例：エックスサーバー＋wordpressのテーマ紐づけ
※FTP接続とSFTP接続は異なるので注意
※SFTP接続はひと癖あるのでFTP接続を試すことを推奨

FTP接続する場合

{
  "name": "何でもいい",
  "host": "sv○○○○.xserver.jp",
  "protocol": "ftp",
  "port": 21,
  "username": "○○○○",// サーバーID
  "password": "○○○○",//　サーバーパスワード
  "context": "/Users/user_name/wordpress/twotone/themes/theme_name",// アップロード対象ディレクトリ
  "ignore": [".vscode", "sass", ".DS_Store", "node_modules", "gulpfile.js", "package-lock.json", "package.json"],// 除外ファイル
  "remotePath": "/home/○○○○/sample.com/public_html/wp-content/themes/theme_name",// アップロード先ディレクトリ
  "uploadOnSave": false // ファイル更新時に自動アップロード無効
  // 自動アップロードを利用する場合
  // "uploadOnSave": true ,
  // "watcher": { 
  //   "files": "**/template.css", // 任意ディレクトリの「template.css」は更新時自動アップロード
  //   "autoUpload": true
}

SFTP接続する場合

{
  "name": "何でもいい",
  "host": "sv○○○○.xserver.jp",
  "protocol": "sftp",
  "port": 10022,// エックスサーバーポートは「10022」
  "username": "○○○○",// サーバーID
  "password": "○○○○",//　サーバーパスワード
  "context": "/Users/user_name/wordpress/twotone/themes/theme_name",// アップロード対象ディレクトリ
  "ignore": [".vscode", "sass", ".DS_Store", "node_modules", "gulpfile.js", "package-lock.json", "package.json"],// 除外ファイル
  "remotePath": "/home/○○○○/sample.com/public_html/wp-content/themes/theme_name",// アップロード先ディレクトリ
  "privateKeyPath": "/Users/username/~ sftp接続用の鍵までのパス ~/○○○○.ppk",
  "passphrase": "○○○○○○",// SFTP接続する際のパスフレーズ
  "uploadOnSave": false // ファイル更新時に自動アップロード無効
  // 自動アップロードを利用する場合
  // "uploadOnSave": true ,
  // "watcher": { 
  //   "files": "**/template.css", // 任意ディレクトリの「template.css」は更新時自動アップロード
  //   "autoUpload": true
}

※Windowsの「C:\」は「/」に変換する必要あり
※SFTP接続にはサーバー側で「秘密鍵」を生成しローカルに保存する必要あり
※「remotePath」のパスは「SFTP」接続と「FTP」で異なる（クライアントFTPソフトでパス確認などで対応）
※「SFTP」接続と「FTP」接続のportは異なる（サーバーによっても異なる場合あり）
※右下にポップアップが出る場合、コメントアウトが原因の可能性あり

SFTP接続が上手くいかない場合、クライアントFTPソフト「WinSCP」などでSFTP接続の確認をした後に「VS Code」でSFTP接続することを推奨

【エックスサーバー】「WinSCP」でSFTP接続する方法 https://twotone.me/web/7505/

４．エラーメッセージがでなければアップロード

エラーメッセージが出てなければ紐づいているので、以下の手順でアップロード／ダウンロードが可能になる。

アップロードしたいファイルやディレクトリを右クリックで「Upload File」を選択
ダウンロードしたいファイルやディレクトリを右クリックで「Download File」を選択