概要

ラズパイを使った電子工作をする際、今まではラズパイ側にsambaをセットアップして、Windows上のvscodeからファイル共有でソース編集を行っていました。
今回、新しいMacbookProを購入したので、Mac上のvscodeからRemote-SSHを使って接続できるように設定してみた手順のメモです。
（Windows10からもほぼ同様の手順で接続出来ますが一部違う部分もありますので詳しくはググってください。）

※この記事は多くの先人達の有益な記事を自分なりにまとめさせて頂いたものです。
　参考にさせていただいた記事
（ただしイラストについては自分の理解をよりわかりやすく整理する為に自分で作成しました。）
※2019年秋ごろ書いたものの、何となく公開するタイミングを逸してしまい下書きに放置してました。完全に旬を逃してますがせっかくなので公開します。情報が古いかもですがご容赦くださいm(__)m
※ラズパイZeroは残念ながらRemote-SSHでは接続出来ません。

環境

Raspberry Pi 3 Model B+ (Rasbian Buster Lite)
OSインストール後、WiFi接続と静的IPアドレスを設定済みとします。
Macbook Pro (macOS Mojave)
Visual Studio Code (1.39.2)

手順

1. ラズパイのSSHを有効化する

ラズパイのターミナルで下記のコマンドを実行。

~$ sudo raspi-config

[5 Interfacig Options] > [P2 SSH] > Yes でSSHを有効化する。

Macのターミナルから（普通のパスワード認証で）SSH接続出来ることを確認しておく。

~$ ssh [ラズパイのユーザー名]@[ラズパイのIPアドレス]

（例）ssh pi@192.168.0.240

2. MacからラズパイにSSH公開鍵認証で接続できるようにする

2-1. Mac上で公開鍵・秘密鍵のキーペアを作成する

~$ ssh-keygen

これで/Users/[ユーザー名]/.sshにキーペアが作成されます。　　
（オプションを指定していないので、デフォルトのRSA方式2048bitの鍵が生成されます。）
- 公開鍵： id_rsa.pub
- 秘密鍵： id_rsa
イメージにすると下記のような感じです。

2-2. 作成した公開鍵をラズパイに登録する

つぎに、作成した公開鍵id_rsa.pubをラズパイに登録します。
Macのターミナルで下記のコマンドを実行します。
（SSHで接続して転送するので、パスワード認証で接続します。）

~$ ssh-copy-id [ラズパイのユーザー名]@[ラズパイのIPアドレス]

（例）ssh-copy-id pi@192.168.0.240
これで、Mac側で作成された公開鍵がラズパイの~/.sshディレクトリ内のauthorized_keysというファイルに登録されました。

（Windowsからだとssh-copy-idコマンドが使えないので、SCPコマンドなどでファイルを転送するかUSBメモリなどでファイルをコピーしてから、手動でauthorized_keysに追記します。）

2-3. 公開鍵認証でSSH接続出来ることを確認する

下記のコマンドで正常に接続できるか確認します。

~$ ssh -i ~/.ssh/id_rsa [ラズパイのユーザー名]@[ラズパイのIPアドレス]

（セキュリティ向上を目的として公開鍵認証でSSH接続する場合には、この後に通常のパスワード認証方式での接続を無効にする設定を行うのですが、今回は割愛します。）

3. Visual Studio Code に拡張機能をインストールする

下記の拡張機能をインストールします。

Remote Development

4. SSH接続用のConfigファイルを記述する

Visual Studio Code のコマンドを利用して ~/.ssh/config ファイルにSSH接続（公開鍵認証）の設定情報を書き込みます。
（ちなみに、この ~/.ssh/config という設定ファイルは Visual Studio Code 専用の設定ファイルという訳ではなく、このファイルに設定情報を記述しておくと、ターミナルからも ssh [HostName] と実行するだけで、即座にリモート接続が出来るようになる設定ファイルです。）

4-1. 画面左下のアイコンをクリック

4-2. Remote-SSH: Open Configuration File をクリック

4-3. ~/.ssh/config をクリック

4-4. 接続情報を記述します

Host [接続の際に用いる名前]
    HostName [接続するホスト名またはIPアドレス]
    User [ユーザー名]
    IdentityFile [秘密鍵へのパス]

（例）

5. Visual Studio Code からラズパイへ接続する

5-1. 画面左下のアイコンをクリック

5-2. Remote-SSH: Connect to Host をクリック

5-3. 接続したいHostをクリックします

configファイルに記述したHost名（下記の例では Raspberrypi3B+）が表示されますのでクリックすると接続されます。

5-4. 接続完了

画面左下に接続先名が表示されれば無事接続完了です！

あとは通常のローカルでの作業と同じように「フォルダを開く」をクリックすると、リモート先のディレクトリが表示されますので目的のディレクトリを選択すればOKです！！
これでローカルと同じようにフォルダ内のファイル一覧を見ながら快適にコーディングが出来ますね！

また、接続された状態でターミナルを開けば自動的にリモートのカレントディレクトリが開いて、すぐにコマンド実行出来ますのでとっても便利です！

5-5. 接続を終了する

画面左下の接続先名をクリック

コマンドパレットから「リモート接続を終了する」をクリックします。

参考にさせていただい記事

有益な情報を発信して下さる皆様いつも有難うございます。
- Qiita - 【正式リリース版】VS CodeのRemote DevelopmentでRaspberry Pi内のファイルを編集する
- Qiita - SSH公開鍵認証で接続するまで
- Qiita - ~/.ssh/config による快適 SSH 環境
- Qiita - VSCode公式の機能で、リモートサーバにSSHして編集する【Insiders Preview】
- Qiita - ~/.ssh/configについて
- ツール・ラボ - Raspberry Piに公開鍵認証を使ってssh接続する
- あぱーブログ - コマンド１発！ssh-copy-id でSSH公開鍵を登録

Visual Studio Code から Rspberry Pi 3 Model B+ に Remote-SSH で接続した手順メモ

概要

環境

手順