VScodeの拡張機能「SFTP」でファイルを簡単にサーバーアップロード

VSCode拡張機能「SFTP」とは

FTPソフトを使用せずにファイルのダウンロードやサーバーアップロードが
できる便利なVScodeの拡張機能です

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

sftp.jsonにサーバー情報を書き込む

サーバーに接続するための情報をVScodeに入力します。
command + shift + P コマンドパレットを表示させて、SFTP: Config と入力。
.vscodeとsftp.jsonの2つが作成されるので、sftp.jsonにサーバー情報を書き込みます。

FTPの場合

{
  "name": "任意の名前", //省略可能
  "context": "dist", //アップロードするフォルダを指定。指定しないと全体をアップロード。
  "host": "example.com", //ホスト名 
  "username": "username", //リモートサーバのユーザ名
  "password": "パスワード",
  "protocol": "ftp", //ftp接続する場合
  "port": 21, //ポート番号 ftp接続をする場合 エックスサーバーは22
  "ignore": [".vscode", ".git", ".DS_Store"], //アップロードしたくないファイルやフォルダを指定 
  "uploadOnSave": false, //ファイルを変更したら自動でサーバーにアップ
  "downloadOnOpen": false, // VScode起動時にリモートサーバーからファイルダウンロードする
  "remotePath": "/public_html/ドメイン名/対象のディレクトリ" //サーバーにアップしたいディレクトリを指定
  }

uploadOnSaveはfalseにするのが無難です。
また、passwordもsftp.jsonに残しておかないほうが無難です。
(書き込まなければアップロード時にpasswordを聞かれる)

SFTPの場合

{
  "name": "任意の名前",
  "context": "dist",
  "host": "ホスト名",
  "username": "ユーザー名",
  "protocol": "sftp", // sftpに変更
  "port": 22, //22に変更
  "ignore": [".vscode", ".git", ".DS_Store", "node_modules", "map"],
  "privateKeyPath": "~/.ssh/id_rsa", // 秘密鍵までのパスを指定
  "remotePath": "/home/ユーザー名/public_html/ドメイン名/対象のディレクトリ"  //ftpとパスが変わるので注意
}

アップロード

右クリック > Upload でアップロードできます。
今回は「dist」フォルダをアップロード対象フォルダに指定しているので、
「dist」フォルダの中がアップロードされます。
特定のファイルだけをアップロードしたいならファイルを選択している状態でUploadです。

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。