W.I.S. Laboratory
menu-bar

Windows Visual Studio Code


SFTPをWindows版VisualStudioCodeとさくらインターネットの組み合わせで使う

VSCodeで「今編集しているファイルをCtrl+Sで上書き保存すると、同時にさくらインターネットのサーバーにアップロードしてくれる」という設定をする方法。
まるでローカル上で作業をしているかのようなシームレスさで、今まで使っていたエディタには戻れないくらい便利だ。
手順としては、まず事前にさくらインターネットでSSHの鍵を生成してダウンロードし、その後VSCodeの設定という流れになる。
前提条件として、ローカルとサーバーのディレクトリ構造を同じにしておく必要がある。

さくらインターネットでSSHの秘密鍵を生成しておく

  1. ターミナルソフトを起動する。(ここではTeraTeamで説明します)
  2. 「TCP/IP」を選択する。
  3. 「ホスト」にさくらインターネットのドメインを入力する。(例:「hogehoge.sakura.ne.jp」)
  4. TCPポートは22、SSHバージョンはSSH2、プロトコルはUNSPECでOK。
  5. 「OK」をクリック。
  6. ユーザー名に「hogehoge.sakura.ne.jp」の「hogehoge」の部分を入力する。
  7. パスワードはサーバーパスワードを入力する。(コントロールパネルにログインするときのパスワード)
  8. エンターキーを1回押す。
  9. 「Welcome to FreeBSD!」と出れば接続成功。
  10. 「sh」と入力してエンター。
  11. 「ssh-keygen」と入力してエンター。
  12. メッセージが出てくるのでそのままエンターを1回押す。
  13. パスフレーズを聞いてくるので入力。(なんでもOK。ここでは「piyopiyo」にしたものとして説明します)
  14. 鍵が作成されたらFTPソフト(FFFTPなどでOK)を起動し、ホームに「.ssh」ディレクトリがあるのでそれを開く。
  15. その中に「id_rsa」があればそれが秘密鍵なのでダウンロードしておく。なければコマンド入力に失敗している可能性があるので、「11. (ssh-keygen)」からやり直し。
  16. ターミナルソフトの接続を切断する。(TeraTermならそのまま終了すればOK)
  17. ダウンロードした「id_rsa」を、自分が管理しやすいフォルダに移動する。(ここでは「C:\ssh\」に保存したものとして説明します)

VSCodeの設定をする

  1. VSCodeを起動する
  2. 上書き保存と同時にFTPアップしたいフォルダを開いておく。
  3. Ctrl + Shift + X を押す。
  4. 検索欄に「sftp」と入力してエンター。
  5. 「SFTP SFTP/FTP sync liximomo」の「インストール」をクリック。
  6. Ctrl + Shift + P を押す。
  7. 「sftp」くらいまで入力すると「SFTP:Config」が出てくるのでそれをクリック。
  8. 現在開いているフォルダーに「.vscode」というフォルダが作成され、その中に「sftp.json」が作成されて自動的に開く。
  9. sftp.jsonを編集する。

  10. ※パスは「\」ではなくすべて「/」区切り。
  11. sftp.jsonを上書き保存して閉じる。(Ctrl+S → Ctrl+W でOK)

ローカルとサーバーのディレクトリ構造を同じにしておく

すでに同じ構造になっていればこの作業は不要。
FFTPなどでミラーリングアップロードをしてもよいが .vscode フォルダはアップしないようにしておく。

以上で準備完了。
コードを保存するたびにサーバーへアップロードしてくれるようになる。
うまくいかないときは、sftp.json内にコメントがあるか情報が間違っている、または秘密鍵の場所やパスフレーズが間違っている可能性がある。
ちなみに他のフォルダにも同じように設定したい場合は、.vscodeフォルダをコピーして、sftp.jsonの中身を必要に応じて書き換えればOK。
"remotePath"の値がサーバー側のディレクトリなので、ここを書き換えるとアップロード先のディレクトリを変更できる。


[ 戻る ]
saluteweb