Help us understand the problem. What is going on with this article?

VSCodeのSSH接続機能で、RaspberryPi内のコードを編集してデバッグ

VSCodeとは?

マイクロソフトが開発したソースコードエディタ「Visual Studio Code」の略です。
無料・軽量・多機能の三拍子揃ったエディタとして、急速に支持を広げているそうです。

2019/10版より、RaspberryPi(ARM v8)へのSSH接続機能が公式サポートされたので、
RaspberryPi内のPythonコード遠隔編集を試した結果を記事にしました。

結論から言うと、ブレークポイント付きのデバッグが実現できたりと、快適な遠隔開発環境を実現できました!

必要なもの

・RaspberryPi (本例ではRaspberryPi3 ModelB)
・上記と同じネットワークにつながったPC (本例ではWindows10)
・Visual Studio Code 1.39.2以降(上記PCにインストール、本例では1.44.2使用)

手順

下記記事を参考にさせて頂きました
https://qiita.com/hukatama024e/items/9f96730381f0a34c6da6

①SSH接続の設定と、configファイルの保存

本記事「公開鍵認証の場合」を参考に、SSH公開鍵認証の確立とconfigファイルの保存を実施してください。

なお、configファイルはPC内の下記フォルダに保存してください
C:\Users\[ユーザー名]\.ssh

②VSCodeのインストール

PC側にVSCodeをインストールしてください

参考記事
https://qiita.com/psychoroid/items/7d85ae6bade4a67aedb1

③Remote Developmentのインストール

VSCodeを起動し、下記の手順でRemote Developmentをインストールしてください
remotedevelopment.png
※Remote - SSHなど必要な関連ツールも、Remote Developmentをインストールすると同時にインストールされます。

④RaspberryPiに接続

下図の手順で、接続するSSHサーバ = RaspberryPiを選んでください(下図の場合「raspi」)
sshtargets.png

新たにウインドウが開き、プラットフォーム選択を求められるので、Linuxを選ぶ
selectplatform.png

公開鍵認証のパスワードを求められるので、入力してEnterを押す
sshkey.png

初回接続は時間が掛かるので、しばらく待つ。
成功すると、下図の赤枠をクリックしてRaspberryPi内のファイルにアクセスできる
home.png

⑤RaspberryPi内にコードを作成

ここから先はコンソールでも良いですが、GUIで操作する前提で記載を進めます。

・空ファイルの作成
「File」→「New File」で空のファイルを作成します
makenewfile.png

・コード内容の記載
例えば、以下のようなPythonコードを記載します(numpyで標準偏差を求めて表示)
pythontestcode.png

・コードの保存
「File」→「SaveAs」→保存パスを指定→「OK」
filesave.png
savepython.png

・コンソールから実行してみる
「Terminal」→「New Terminal」でコンソールを開き
openterminal.png
コードのあるフォルダに移動し、

python3 test.py

でPythonコードを実行
runconsole.png
正常に結果がコンソール出力されていることが分かります。

⑥作成したコードをデバッグ実行

なんとVSCodeのGUIで、コードのデバッグまで出来てしまいます。
ブレークポイントで停止もできるので、開発効率が上がること間違いなしです!

・Pythonリンターのインストール
既にPCローカルでインストールしている場合も、「install in SSH:[ホスト名]」をクリックしてRaspberry Pi内にもPythonリンタをインストールします。
installpythonlinter.png

インストールが終わると「Reload Required」と出てくるので、クリックして再起動
reloadrequired.png

・作業用フォルダ(通常はコードのあるフォルダ)を開く
openfolder.png

・デバッグの実行
デバッグしたいコードを開いたのち、下記の操作を実行
runanddebug.png

コンソールが開き、デバッグが実行されます
debugconsole.png

・ブレークポイントの動作確認
下図のようにブレークポイントで処理を止め、変数内容の確認も可能です。
debugbreakpoint.png

以上で、VSCodeでRaspberryPi内のコードを遠隔デバッグすることができました。
GUIでサクサク開発できる環境が整い、個人的には満足の結果です!

追記:pipでインストールしたライブラリのimport時にエラーが出るとき

RaspberryPi側にpyenvで環境構築した場合、
pipでインストールしたライブラリのimport時に下記エラーが出ます。

エラー内容:Unable to import 'bluepy' pylint(import-error)
unableimport.png

原因

こちらに記載されているように、
VSCodeでデバッグ時に参照するPythonと、pyenvのPythonの場所が違うことが原因と思われます

対処法

/home/[ユーザ名]/.vscode-server/extensions/ms-python.python-‥/pythonFiles/.vscode
にある
settings.json
を開き、下記最後の1行を追加

settings.json
{
    //
    //元々の記載
    //
    "python.pythonPath": "[pyenvのPythonの場所]"
}

※pyenvのPythonの場所は、デフォルトでは
/home/[ユーザ名]/.pyenv/shims/python
のはずです
※既にpython.pythonPathが記載されていた場合、コメントアウトして新たに1行追加してください

それでもエラーが出る場合

⑥で開いた作業用フォルダ内に「.vscode」フォルダを作り、
フォルダ内に下記settings.jsonファイルを作成

settings.json
{
    "python.pythonPath": "[pyenvのPythonの場所]"
}

これで強制的にpyenvのPythonが実行されるはずです

c60evaporator
座右の銘:「わからんもんはわからん」。無知な私に積極コメント頂けると嬉しいです!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした