Remote-SSHがラズパイでも使えるようになったので使ってみた

# 概要

Raspberry Piでは使えなかったVSCodeのRemote-SSHがバージョンアップでSupportedにラズパイが含まれていたので試してみました。

# 必要な環境
- VScode(1.39.1)
- Raspberry Pi(Raspberry Pi 3 Model B)

# インストールする拡張機能
- ms-vscode-remote.remote-ssh
- ms-python.python(必要なら。pythonの実行/デバッグで使用)
- rogalmic.bash-debug(必要なら。bashの実行/デバッグで使用)

# セットアップ

## 拡張機能のインストール

Powershell から下記コマンドを実行。もしくはVSCodeの拡張機能(Ctrl + Shift + X)からRemote-SSHを検索してインストールする。

```powershell:Powershell-拡張機能のインストール
PS> code --install-extension ms-vscode-remote.remote-ssh
```

## リモートホストに接続

### 事前準備

SSH用フォルダがなければ作成する

```powershell:Powersehll-フォルダ作成
PS> mkdir $HOME/.ssh
```

### リモートホストの追加

VSCodeを起動。下記手順でリモートホストを追加する

![vscode-remote-ssh-extension-01-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/fb145075-46c0-6f58-f4f1-9eda30894c6b.png)

ユーザー名とホスト名を入力
![vscode-remote-ssh-extension-04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/a9cc6a13-c22e-3bb8-4d95-3f9783ea1beb.jpeg)

SSH設定の保存先を指定。事前準備で作成したフォルダを指定する
![vscode-remote-ssh-extension-05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/6dc86d59-9aaa-3141-8876-2113af570a1c.jpeg)

リモートホストに接続。VSCodeの右下にポップアップが出るので`Connect`をクリック。SSH鍵を登録していない場合はSSHアカウントのパスワードを聞かれるので入力する

![vscode-remote-ssh-extension-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/46ac75fe-8134-b62c-ca5a-1a7a6d7009d3.png)

自分の環境では初回接続時は失敗したのでダイアログで`Retry`を選択しました。追加したホストはリモートエクスプローラーの`SSH TARGETS`一覧に表示されるので下記のようにして接続する事もできます。

![vscode-remote-ssh-extension-01-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/be64ac6d-9b12-5a16-7e17-4e1e99449714.png)

リモートホストのフォルダを開く
![vscode-remote-ssh-extension-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/7ce54d8f-7195-6f21-4ecb-922e935e96b9.png)

以降、開いたフォルダでの操作(新規作成、編集など)はリモートホスト上の対象フォルダ配下に反映されます

# リモートでプログラムを実行

## Pythonの実行

リモートホストのPythonを実行してみる。
※なお、VSCodeの拡張機能は環境毎にインストールが必要

![vscode-remote-ssh-extension-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/57239729-bcc1-3b97-ebc8-51474184aad5.png)


Pythonの場合、拡張子.py のファイルを開くと拡張機能のインストールをうながされるので指示に従うのが楽。

![vscode-remote-ssh-extension-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/7f624646-b9b5-0b66-85c8-ec21afb1100f.png)

実行はタブの右にある:arrow_forward:アイコンをクリック
![vscode-remote-ssh-extension-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/008222ba-714d-959a-fb7d-e01db7bd6792.png)

## bashのデバッグ

### 拡張機能をインストール

拡張機能 `rogalmic.bash-debug` を検索してリモート環境にインストール

### 設定ファイルの作成

![vscode-remote-ssh-extension-60.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/37be0ab5-876a-63ff-3231-704217d4e013.png)

内容は以下↓

```json:launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "bashdb",
            "request": "launch",
            "name": "Bash-Debug (simplest configuration)",
            "program": "${file}",
            "terminalKind": "debugConsole"
        }
    ]
}
```
### デバッグ

任意のシェルスクリプトを開いてから、下記の手順でデバッグを開始する

![vscode-remote-ssh-extension-61.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494172/75c28784-333d-5c7b-bf40-53e93dff43bb.png)

# まとめ

ローカルホストと同じような操作で実行やデバッグができるので便利！