VS Code の Remote-SSH で Grav テンプレートを編集する

Grav のテンプレートを調整するとき、これまではコンソールで SSH ログインして vi で編集していたが、さすがに非効率なので、VS Code の Remote - SSH を使って編集できるようにした。

【パーミッション調整】

まず、以前は Grav を www-data に寄せて管理していたのでパーミッションを整理した。

sudo chown -R www-data:www-data /var/www/html/grav
sudo find /var/www/html/grav -type d -exec chmod 755 {} \;
sudo find /var/www/html/grav -type f -exec chmod 644 {} \;

実際に編集するのは /var/www/apocrypha.jp/user 以下なので、kaz ユーザーで作業できるように所有者とグループを調整した。

sudo chown -R kaz:www-data /var/www/apocrypha.jp/user
sudo chmod -R g+w /var/www/apocrypha.jp/user

また kaz を www-data グループに追加。

sudo usermod -aG www-data kaz

これをやらないと VS Code からファイルの作成・保存・上書きができない。

あとは、user フォルダ全体の group を www-data に強制し、 “setgid” を付ける

sudo chown -R www-data:www-data /var/www/apocrypha.jp/user
sudo find /var/www/apocrypha.jp/user -type d -exec chmod 2775 {} \;
sudo find /var/www/apocrypha.jp/user -type f -exec chmod 664 {} \;

【VS Code に Remote - SSH を導入】

VS Code に Remote - SSH をインストールする。拡張を追加すると左側にリモートエクスプローラーが表示されるので、SSH → ＋ → 新しい接続で設定する。

【SSH 設定例（Windows側）】

C:\Users\kaz\.ssh\config

Host apocrypha.jp
    HostName 123.345.567.789
    User kaz
    Port 22
    IdentityFile C:\Users\kaz\.ssh\id_ed25519
    IdentitiesOnly yes

id_rsa を使う場合は IdentityFile を変えるだけ。

【まとめ】

これで Grav のテンプレート、Twig、CSS、Markdown を VS Code の Remote-SSH で直接編集できるようになり、vi 作業から解放された。作業効率はかなり改善される。