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でアクセスするためのアカウントを作成します。以下のコマンドを実行。
```bash
useradd <ユーザー名>
password <ユーザー名>
```
 さらに、`sudo` を使えるように、
 ```bash
 sudo usermod -aG sudo <ユーザー名>
 ```
 次に、`/home/`配下に下記の通り、ディレクトリを作成します。
 ```bash
mkdir /home/<ユーザー名>
mkdir /home/<ユーザー名>/.ssh
 ```
 `.ssh` 配下に `authorized_keys`ファイルを作成します。（後で、公開鍵を埋め込みます。）
 ```bash
touch /home/<ユーザー名>/.ssh/authorized_keys
 ```
## 2. ローカルPCにて鍵のペア(公開鍵、秘密鍵)を作成
ローカルPCで、PowerShellを立ち上げ、下記コマンドを実行。
```bash
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```
- `-t` rsa: 鍵のタイプをRSAに設定。
- `-b` 4096: 4096ビットの鍵を生成（より強力な暗号化）。
- `-C` `"your_email@example.com"`: SSHキーに説明をつける（任意ですが、わかりやすくなります）
 
すると、以下のように出力されます。鍵の保存先に関して、特に変更ない場合はEnterキーを押下します。
```bash
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_username/.ssh/id_rsa):
```
以前に、鍵を生成している場合は、以下のように出力されます。注意して、再生成（上書き）する場合は`y`を入力後Enterキーを押下します。
```bash
/Users/your_username/.ssh/id_rsa already exists.
Overwrite (y/n)? 
```
次に、SSHキーにパスフレーズを設定するか聞かれます。セキュリティを強化するためにパスフレーズを設定できますが、設定しない場合は空のままEnterを押してください。
```bash
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`
に貼り付けして保存します。
```bash
vi /home/<ユーザー名>/.ssh/authorized_keys
```
でエディター画面を開き、
```vim:authorized_keys
ssh-rsa xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

"authorized_keys" 1L, 751B      
```
ペーストして、`esc`キー押下 `:wq`で保存。
次に、ファイルの権限を変更します。下記コマンドを実行します。
```bash
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys
```
所有者も変更しておきましょう。
```bash
chown -R <ユーザー名>:<ユーザー名> /home/<ユーザー名>/.ssh
```
リモートPC内の同期先ディレクトリへ、作成したアカウントの権限（所有権）をつけておきます。（Apacheを使用しているので今回は、`/var/www/html`配下を指定します。）
```bash
sudo chown -R <ユーザー名>:root /var/www/html/
```
`/var/www/html/` 配下に、同期したいファイルを格納するディレクトリを作成します。今回は、`sample`とします。下記コマンドを実行。
```bash
mkdir /var/www/html/sample
```
ディレクトリの権限を確認します。rootで上記ディレクトリを作成した場合は、所有者変更をかけておきます。下記コマンドで、権限を確認。
```bash
cd /var/www/html
ls -l
```
出力結果が下記の様であれば、所有者変更をかけます。
```bash
drwxrwxr-x 2 root root    4096 Oct  7 11:38 sample
```
下記コマンドを実行します。
```bash
sudo chown -R <ユーザー名>:root /var/www/html/
```

## 4. VSCodeにSFTPの拡張機能の追加と設定
ローカルPCにて、VSCodeに拡張機能を追加します。VSCodeの拡張機能メニューで `sftp` と検索し、インストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901300/f7b007a5-918a-0c2d-4379-16f8a9f29606.png)

VSCodeで、同期したい作業ディレクトリを開き`Ctrl+Shift+P`を押下して、コマンドパレットを開きます。そこで、`sftp`と検索して、SFTPのコンフィグファイルを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901300/b3f3c7cd-f7d0-3676-cde5-92ba15a90e84.png)

すると、雛形がかれたjsonファイルが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901300/c145e138-a433-dd4f-612a-94c55007673c.png)

下記のように変更します。
```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`ファイルを作成して、保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901300/4eff23c5-31b2-2893-572d-679e59ffdbdc.png)

VSCodeの左にあるメニューバーのSFTPを開いて確認します。以下のように同期されていれば問題有りません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901300/27e9aac9-4d92-4e9a-7621-d3145a10fc91.png)

同期されない場合は、変更したファイルの上で右クリックをし、`Upload File`を試してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901300/714ae89f-3213-9f29-ed26-866fdfa1a154.png)

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

以上です。

## 参考
https://www.digitalocean.com/community/tutorials/how-to-set-up-ssh-keys-on-ubuntu-20-04-ja

https://www.aura-office.co.jp/blog/vscode-sftp/