Visual Studio CodeのSSHから直接サーバのソースを修正

# 概要
今日はVSCODEのSSHからサーバのソースを直接修正することについてメモしたいと思います。

# 開発環境
SSHで接続が可能なLinuxサーバであればOKです。
今回の説明で使うものはRaspberry piを利用します。

# SSH接続の事前確認
Raspberry PIへSSH接続を確認します。

①サーバへSSHで接続するとログイン画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/6fdb597f-d1a2-b398-db78-ab52775753b6.png)

②ログイン情報を入力すると次のようなコンソールプロンプトが表示されます。
※Raspberry PIへ問題なく接続ができることを確認しました。

~~~bash
Linux raspberrypi 4.14.34-v7+ #1110 SMP Mon Apr 16 15:18:51 BST 2018 armv7l

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
You have new mail.
Last login: Tue Sep 27 21:38:07 2022

pi@raspberrypi:~ $
~~~

# Visual Studio Codeからパッケージをインストール

■インストール手順については次のサイトをご覧ください。

https://eng-entrance.com/texteditor-vscode

■各インストールするパッケージ一覧
以下のパッケージをインストールします。パッケージの内容は各サイトから参照してください。

①CSS Peek

https://loumo.jp/archives/26441

②HighLight Matching Tag

https://1-notes.com/visual-studio-code-highlight-matching-tag/

③HTML CSS Support

https://gimmicklog.com/tool/1320/

④Japanese Language Pack for Visual studio code

https://www.javadrive.jp/vscode/install/index4.html

⑤PHP Intelephense

https://beyondjapan.com/blog/2020/02/intelephense-vscode-php/

⑥Remote SSH

https://blog.serverworks.co.jp/tech/2020/02/20/vscode-remote-ssh/


⑦Remote SSH:Editing Configuration Files

https://1-notes.com/visual-studio-code-remote-ssh/

⑧Smary Template Support

https://marketplace.visualstudio.com/items?itemName=aswinkumar863.smarty-template-support

■パッケージがインストールされている画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/92cf6c98-23ad-af7a-f7d8-5b844b0f2a64.png)

# Visual Studio CodeでSSHを利用してRaspberry PIへ接続

①次の画面で左のメニューをクリックしますと右側に表示されるSSHターゲットの「+」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/4e4e2c1b-1598-c4b2-0349-a0722340de43.png)

②Raspberry PIへ接続するアカウント@サーバアドレスを入力します。
例）pi@192.168.1.22
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/29e31517-7e4d-7127-c101-ae6c044823d2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/5e5589b9-c1a2-5aac-d344-b8bfefb5332d.png)

③SSH構成ファイルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/d2e1067f-4e07-1999-c816-b6907481b2d9.png)

④新しくサーバアドレスが追加され、そこをクリックすると右側のボタンが表示されます。これをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/c0cb79a3-8b20-9b3f-22b0-71c4a6b05bf2.png)

⑤「Linux」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/ca272e86-ae94-4980-a35a-7705cdd90851.png)

⑥「続行」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/2a758ef1-601c-2f7d-bc9c-5d4d0cce488d.png)

⑦SSHのログインパスワードを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/42d915b5-5fd3-af21-b99b-f49bb501f103.png)

⑧ログインができた画面です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/0c36064d-f6ab-2f5e-9c29-3fdb6b06dc24.png)

⑨「フォルダを開く」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/b0d37795-60b5-7acc-5737-293a1fea5763.png)

⑩次の画面でworkフォルダを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/0fc806e2-177f-9448-a4c0-3f72d0118666.png)

次の画面でOKボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/8f3c1fe0-bc4d-ced7-2e66-2b82bb7b18e3.png)

⑪「Linux」を選択とSSHのパスワードを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/086e7f64-2a93-b38f-a957-57252ee118eb.png)

⑫次の画面で「はい。作成者を信頼します。」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/7c430033-49a4-3e01-9e4a-fdea08dc2cf4.png)

⑬WORKフォルダのソースが左画面に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/22a9ce22-cf56-adf2-082b-0f26ff16d36d.png)

⑭ソースを修正して保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/e5a263e3-bac1-75e1-eeb9-033b468238c9.png)

★その他★
SSHでログインしているユーザとサーバの所有者が異なる場合は、次の手順でファイルの書き込み権限を付与します。
①次のメニューをクリックするとSSHでログインしたユーザのコンソールプロンプトが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/296fe215-ba82-585e-3fb8-313c97843730.png)

②次のコマンドをコンソールプロンプトで入力します。
ファイルの権限を他のユーザも書き込みができるように666に権限を変更します。
~~~bash
pi@raspberrypi:~/work $ ls -alh test.php
-rw-r--r-- 1 pi pi 20 10月  7 01:00 test.php
pi@raspberrypi:~/work $ sudo chmod 666 test.php
pi@raspberrypi:~/work $ ls -alh test.php
-rw-rw-rw- 1 pi pi 20 10月  7 01:00 test.php
pi@raspberrypi:~/work $ 
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/2d27dfa9-e6e5-85a2-27a5-32baf057c32e.png)

# 終わりに
これでVisual Studio Codeから直接サーバのソース修正をSSHから可能になります。
サーバだとVIエディタまたはVisual Studio Codeと似たようなもので修正が可能だと思いますが、
今回は一般的によく使われているVisual Studio Codeを基にメモをしました。
画面キャプチャが雑かもしれないですが、いかがでしょうか。
これでローカルにソースをダウンロードして修正後、サーバに再度アップロードする手間が減ります。
次はRedhat8.5でApache＋PHP＋Sybaseの環境設定のメモを作成します。