Windows Visual Studio Code

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

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

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

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

VSCodeの設定をする

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

{   "name": "sshsftp（なんでも良い）",
    "host": "hogehoge.sakura.ne.jp（さくらインターネットのホスト名）",
    "protocol": "sftp",
    "port": 22,
    "username": "hogehoge（さくらインターネットのユーザー名）",
    "password": "password（さくらインターネットのパスワード）",
    "remotePath": "/home/hogehoge/www（アップロード先のパス）",
    "privateKeyPath": "C:/ssh/id_rsa（秘密鍵の場所とファイル名）",
    "passphrase": "piyopiyo（ssh-keygenで作成したパスフレーズ）",
    "uploadOnSave": true,
    "downloadOnOpen": false,
    "ignore": [
      "**/.vscode/**",
      "**/.history/**",
      "**/.git/**"
    ]
}

sftp.jsonを上書き保存して閉じる。（Ctrl+S → Ctrl+W でOK）

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

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

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

[ 戻る ]