。ザワくんブログ

。ザワくんブログ

FTPソフトおさらば!! vscodeの拡張機能、SFTPを使おう!

投稿日:2021/8/6

FTP

FTPソフトというものがあります。手元で更新したものをいちいちサーバーにあげるのって結構めんどくさいですよね。その時間がなくなればその分コーディングに当てる時間も増えます。
ということで今回は、そんな手間を省くべくvscodeでSFTPを使い、サーバーに自動アップロードしましょう!

そもそもFTPって?FTPソフトって何?

FTPソフトとは、PCとサーバの間でFTPやFTPS、SFTPを使ってファイルを転送するツールのことです。
FTPとはファイル転送のための通信手順に従ってファイルを転送するソフトウェアのことです。ただこのFTPは30年ほど前から使われており、ユーザー名やパスワードが暗号化されておらず、ガンブラー攻撃などの危険性が高まります。
そのため対策としてFTPSSFTPなどの暗号化の仕組みがあります。ファイルを転送するという点では同じですが、FTPSではFTPによる通信をSSLという仕組みを使い暗号化します。SFTPは暗号化と認証機能を使って安全に通信する技術SSHを使いファイルを転送します。
少し本題とずれましたがこの辺は実務をこなす上で結構大事になってきますのでしっかり学習することをお勧めします。

いちいち送信するのはめんどくさい

このFTPソフトにはいくつか種類があり、FileZillaCyberduckなどがあります。これらのソフトはサーバーにファイルをあげるとき、パソコンで直したものFTPソフトで手動であげます。
うん。めんどくさい笑
そんな時に自動アップロードをしてくれるのがvscodeの拡張機能、sftpです。

本題! vscodeでSFTPを使う!!

では本題に入りましょう。
まずはSFTP拡張機能はマーケットプレイスの検索ボックスで「SFTP」と検索し、インストールしてください。

sftp 操作表1

①で検索ボックスに「SFTP」と入力
②でSFTPを押す
③でインストールする の手順を踏んでください。

次に設定を行います。windowsの方は「ctrl+shift+p」、Macでは「Cmd+Shift+p」を押してコマンドパレットを開き、SFTP:configとコマンドを入力してください。

sftp 操作表2

では設定していきましょう!!こんな感じで設定します!!!

{
    // 自由に名前決めてください
    "name": "test",
    // サーバのホストの名前
    "host": "test.com",
    // 接続プロトコル(sftpとかftpを入力)
    "protocol": "sftp",
   // port番号を入力
    "port": 22,
    //サーバのユーザ名
    "username": "test-zawakunn",
    //サーバのパスワード
    "password": "test",
    //リモートのアップロードディレクトリのパス
    "remotePath": "/test",
    //秘密鍵のパス
    "privateKeyPath": "/id_rsa.ppk",
    //保存したら自動的にアップロードする
    "uploadOnSave": true,
   //監視しておくファイルファイル
    "watcher": { 
        //監視しておくファイルファイル
        "files": "**/**{.css,.css.map}",
        //外部から変更されたものを自動的に保存
        "autoUpload": true,
        //外部から削除されたものを自動的に削除
        "autoDelete": true
    },
    //アップロードから除外するファイル
    "ignore": [
        ".vscode",
        ".DS_store"
    ]
}

こんな感じですね。パスはそれぞれの環境に従って設定してください。
またもっと色々設定できたりもするので、詳しくは公式を見るのがいいかなと思います!

あとはこれを保存すればサーバーとの接続ができます!失敗する場合はパスが間違っていたりする可能性が高いので再度確認してください。

また確認してからアップロードしたい場合は、uploadOnSaveをfalseに設定して、右クリックでuploadを実行してください。以上です。