Contents
VSCode拡張機能「SFTP」とは
FTPソフトを使用せずにファイルのダウンロードやサーバーアップロードが
できる便利なVScodeの拡張機能です
拡張機能「SFTP」をVScodeインストール
sftp.jsonにサーバー情報を書き込む
サーバーに接続するための情報をVScodeに入力します。
command + shift + P コマンドパレットを表示させて、SFTP: Config と入力。
.vscodeとsftp.jsonの２つが作成されるので、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です。
関連記事
