VSCodeでサーバーとファイル同期をする（SFTP）

はじめに

VSCodeで外部サーバーとファイルを同期するためのやり方をまとめておきます。手順メインで記載するので細かいところは省きます。

環境

リモートPC
OS：Ubuntu 22.04.4 LTS

ローカルPC
OS：Windows11

手順

1. リモートPCにアカウントを作成
2. ローカルPCにて鍵のペア(公開鍵、秘密鍵)を作成
3. リモート先PCに公開鍵を設置
4. VSCodeにSFTPの拡張機能の追加と設定

1. リモートPCにアカウントを作成

リモートPCにrootでログインし、SFTPでアクセスするためのアカウントを作成します。以下のコマンドを実行。

useradd <ユーザー名>
password <ユーザー名>

さらに、sudo を使えるように、

sudo usermod -aG sudo <ユーザー名>

次に、/home/配下に下記の通り、ディレクトリを作成します。

mkdir /home/<ユーザー名>
mkdir /home/<ユーザー名>/.ssh

.ssh 配下に authorized_keysファイルを作成します。（後で、公開鍵を埋め込みます。）

touch /home/<ユーザー名>/.ssh/authorized_keys

2. ローカルPCにて鍵のペア(公開鍵、秘密鍵)を作成

ローカルPCで、PowerShellを立ち上げ、下記コマンドを実行。

ssh-keygen -t rsa -b 4096 -C "[e-mail]"

• -t rsa: 鍵のタイプをRSAに設定。
• -b 4096: 4096ビットの鍵を生成（より強力な暗号化）。
• -C "[e-mail]": SSHキーに説明をつける（任意ですが、わかりやすくなります）

すると、以下のように出力されます。鍵の保存先に関して、特に変更ない場合はEnterキーを押下します。

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_username/.ssh/id_rsa):

以前に、鍵を生成している場合は、以下のように出力されます。注意して、再生成（上書き）する場合はyを入力後Enterキーを押下します。

/Users/your_username/.ssh/id_rsa already exists.
Overwrite (y/n)? 

次に、SSHキーにパスフレーズを設定するか聞かれます。セキュリティを強化するためにパスフレーズを設定できますが、設定しない場合は空のままEnterを押してください。

Output
Enter passphrase (empty for no passphrase):

完了すると、/Users/your_username/.ssh/ 配下に、秘密鍵 id_rsa と 公開鍵id_rsa.pub が出力されます。

3. リモート先PCに公開鍵を設置

linuxなどでは、コマンドで公開鍵をリモート先へ転送できますが、Windowsには用意がないので今回は手動でコピーします。/Users/your_username/.ssh/ 配下の id_rsa.pub を適当なエディターで開き、中身をまるっとコピーします。
リモートPCにて、1. でつくった /home/<ユーザー名>/.ssh/authorized_keys
に貼り付けして保存します。

vi /home/<ユーザー名>/.ssh/authorized_keys

でエディター画面を開き、

authorized_keys

ssh-rsa xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

"authorized_keys" 1L, 751B      

ペーストして、escキー押下 :wqで保存。
次に、ファイルの権限を変更します。下記コマンドを実行します。

chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

所有者も変更しておきましょう。

chown -R <ユーザー名>:<ユーザー名> /home/<ユーザー名>/.ssh

リモートPC内の同期先ディレクトリへ、作成したアカウントの権限（所有権）をつけておきます。（Apacheを使用しているので今回は、/var/www/html配下を指定します。）

sudo chown -R <ユーザー名>:root /var/www/html/

/var/www/html/ 配下に、同期したいファイルを格納するディレクトリを作成します。今回は、sampleとします。下記コマンドを実行。

mkdir /var/www/html/sample

ディレクトリの権限を確認します。rootで上記ディレクトリを作成した場合は、所有者変更をかけておきます。下記コマンドで、権限を確認。

cd /var/www/html
ls -l

出力結果が下記の様であれば、所有者変更をかけます。

drwxrwxr-x 2 root root    4096 Oct  7 11:38 sample

下記コマンドを実行します。

sudo chown -R <ユーザー名>:root /var/www/html/

4. VSCodeにSFTPの拡張機能の追加と設定

ローカルPCにて、VSCodeに拡張機能を追加します。VSCodeの拡張機能メニューで sftp と検索し、インストールします。

VSCodeで、同期したい作業ディレクトリを開きCtrl+Shift+Pを押下して、コマンドパレットを開きます。そこで、sftpと検索して、SFTPのコンフィグファイルを開きます。

すると、雛形がかれたjsonファイルが開きます。

下記のように変更します。

{
    "name": "<任意の名前>",
    "host": "<リモートPCのIPアドレス>",
    "protocol": "sftp",
    "port": 22,
    "username": "<1.で作ったユーザー名>",
    "privateKeyPath": "~/.ssh/id_rsa",
    "remotePath": "/var/www/html/sample",
    "uploadOnSave": true,
    "useTempFile": false,
    "openSsh": false,
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store"
    ]
}

秘密鍵で認証したいので、"privateKeyPath"を追加し、鍵のpathを指定します。"remotePath"には、同期先のディレクトリを指定します。また、ファイルを変更した際、保存すると変更内容が同期されるようにしたいので、"uploadOnSave": true としています。上記のように変更後、このファイルを保存します。

試しに、index.htmlファイルを作成して、保存します。

VSCodeの左にあるメニューバーのSFTPを開いて確認します。以下のように同期されていれば問題有りません。

同期されない場合は、変更したファイルの上で右クリックをし、Upload Fileを試してみてください。

パーミッションエラーがでる場合は、リモート先のディレクトリに権限が付与できていないか、SFTPのコンフィグファイルで設定したパスが間違っている可能性があります。

以上です。

参考