この記事ではRaspberry PiにVSCodeの開発版Code Insidersと、拡張機能のRemote SSH (Nightly)を使用して、PCのVSCodeから直接Raspberry Pi上のファイルにアクセスする方法について解説しています。
現状(2019/06/12)では、Remote SSHの正式版はVSCodeで使用することができますが、Raspberry Pi(armv7l)に対応しているものは開発版のみです。Code Insidersは普通のVSCodeと同居可能ですので気軽に試すことができます！
以下ツイートでRaspberry Pi(armv7l)のサポートが発表されています。
And how about @code remote SSH into a @Raspberry_Pi? 🥧 You can now use @code to edit files directly in your armv7 RPi! 🔥 Try it today on Insiders https://t.co/yvCAQmysBz, with the nightly SSH extension https://t.co/w2d7ARjlux pic.twitter.com/5HkEzO4Ook
— João Moreno (@joaomoreno) June 11, 2019
この記事でできること
VSCode Insiderのエクステンションを利用してRaspberry Pi上のファイルにアクセスする。- ポートフォワーディングを設定する
使うことのできるRaspberry Piのモデル
CPUのアーキテクチャがarmv7lのRaspberry Piが今回サポートされるようになりました。つまり、Raspberry Pi 2系統とRaspberry Pi 3系統はすべて実行可能です。Raspberry Pi Zero系統はCPUのアーキテクチャがarmv6となっているので現在は実行不可能です。いずれサポートされる可能性はあるかもしれません。
CPUのアーキテクチャは以下のコマンドなどで確認可能です。
$ uname -a Linux RPI3 4.14.98-v7+ #1200 SMP Tue Feb 12 20:27:48 GMT 2019 armv7l GNU/Linux
手順
Code Insiderをインストールする
まずは開発版のVSCode(Code Insiders)をインストールします。以下のリンク先から環境に合わせたインストールパッケージをダウンロードし、インストールしてください。
すでにインストールされている場合は[help] > Check for updatesから最新版にアップデートしておいてください。
Remote SSH (Nightly)をインストールする
次にRemote SSH (Nightly)拡張機能をインストールします。Ctrl + Shift + Xなどで拡張機能のサイドバーを開き、remote ssh nightlyと入力して表示されたものをインストールします。アイコンが青いものと緑のものがありますが、緑のほう(開発版)を選択します。
インストールが完了するとサイドバーの部分にPCと><という感じのアイコンが表示されるようになります。
接続先ホストの設定をする
次に接続先の設定をします。先ほど表示されるようになったアイコンを選択するとCONNECTION、FORWARDED PORTSといったメニューが表示されます。CONNECTIONをホバーしたときに表示される歯車をクリックします。
選択するとSelect SSH ...というプロンプトが表示されます。これで設定の保存先のファイルを選択するのですが、Windowsの場合はC:\Users\[user]\.ssh\configあたりを選択しておくといいと思います。
開かれたエディタに以下のように設定していきます。保存するとCONNECTIONタブ内に反映されます。
Host 192.168.11.xxx HostName rpi User user # # Host [Raspberry Piのホスト名、IPアドレス] # HostName [この設定上で使用するホスト名] # User [Raspberry Pi上の接続したいユーザー名]
接続
先ほどの設定で現れた設定値を右クリックしてConnect to host ...をクリックすると接続が開始されます。初めて接続する端末ではフィンガープリントの保存についてプロンプトで聞いてきますので、continueを選択して続けていきます。
次にパスワードを聞かれますのでRaspberry Piのユーザーのパスワードを入力します。(体感としてなぜか認証に失敗することが多いです。。。(笑))
Remote SSH用の設定ファイルがダウンロードされたのちに、接続が完了します。失敗している場合はホストやユーザー名、CPUがarmv7lであるかどうかなどを確認してください。
ちなみにarmv6などの端末に接続すると、こんな感じのエラーポップアップが表示されます。
ディレクトリを開く
無事接続できたらディレクトリを開いてみましょう！サイドバー一番上のエクスプローラーを開くといつもと違う感じになっています。
Open Folderのボタンを押して開きたいディレクトリ・プロジェクトを選択するとそのディレクトリ内をブラウジングできるようになります。
これでRaspberry Pi上のファイルを自由に触ることができるようになりました！！エクスプローラーを触った感じはまんまVSCodeと同じとなっていますね🤣
ターミナルを開く
接続しているウィンドウでターミナルを開く(Ctrl + Shift + `)とそのままRaspberry Pi上でコマンドを実行することができます。ここからサーバーの再起動などを直接行うことができます。
ポートフォワーディングの設定をする
WEBサーバーなどの開発を行っている場合、ポートフォワーディングを設定することでリモートを意識することなく確認を行うことができます。http://localhost:3000にアクセスするとhttp://[raspberrypiのIPアドレス]:3000にアクセスすることができるようになります。
Remote SSHのアイコンをクリックすると表示されるFOWARDING PORTSのタブから設定することができます。FOWARDING PORTSにホバーして表示されるプラスのアイコンをクリックして新しく追加します。
Entry the on [IPアドレス] ...とプロンプトで表示されるので、設定したいポート番号を入力します。Expressで開発などを行っていると3000を使用しますね。
次にName the port foward ...と聞かれて設定名を入力しますが、空のままでOKです。タブ内に追加されたら成功です。これで簡単にリモート感なくアクセスできるようになりました。
最後に
以上が手順となっています。おそらく今後のアップデートで正式版のVSCodeに取り込まれていくと思われます。稼働するサーバー上で動作確認をパパっとできるのはかなりお手軽でいいですね！うちで動いているサーバーは全部Raspberry Piで、開発機は基本Windowsなのでかなり助かります！
これでいつも使っているパソコンから簡単にRaspberry Pi上のプログラムを編集、起動させることができるようになりました。VSCodeから編集できるとvimなどのCUI上のテキストエディタを使わなくていいのでプログラミング初心者にはとてもやさしい環境となると思います。公式版にマージされたらその開発環境をデフォルトとして初心者の方向けに紹介していきたいと思います😎
