追記：VS Codeの入門書をZennでリリースしました
ブログで扱ったVS Code関連の記事をまとめて、無料の電子書籍としてZennというプラットフォームでリリースしました。本記事の内容も含めてまとめてあります。よろしければ、こちらも参考にしてみてください。
VS CodeのRemote Development拡張
VS Codeでラズパイ上のファイルやクラウド（GCP等）上のファイルを編集したくなるケースが増えてきました。
今まではリモートのファイルにアクセスするときVS CodeのSSH FSという拡張を使ってラズパイ上のファイルをSSH経由で編集していましたが、最近は、Remote Developmentが公式推奨でイケてるらしいので、乗り換えることにしました。
Remote Developmentの概要は以下です。
VS Code Remote Developmentより引用
リモートのターゲットにSSHでアクセスすることは変わりないのですが、以下の様な特徴・利点があります
- SSHのパスワード認証方式・公開鍵認証方式の両方に対応（推奨はセキュアな公開鍵認証方式）
- ターゲット（上図のRemote OS）はラズパイ等のデバイスの他、クラウドやDockerコンテナ（WindowsのWLSも）に対しても同様にリモート開発できる
- ローカルPC(上図のLocal OS)上のVS Codeからターゲット（Remote OS）のターミナル操作・デバッグも可能
つまり、いいことだらけですね。開発内容によっては、VS Codeで開発が完結できちゃいそうです。
すぐRemote Developmentに乗り換えることが出来なかったのは理由があって…自分がSSHの公開鍵認証方式をちゃんと分かっていなかったためです。多くの解説記事では、ネットワークに詳しい人が書いているケースが多く、公開鍵認証に関して基礎知識としてスキップしているものがほとんどで、最初でつまづいてしまっていたというか、面倒くさくなって諦めていました（使えなくてもなんとかなるので）。また、パスワード認証方式を使っている例も見当たらず、てっきり公開鍵認証しかできないと勘違いしていました。
逆に言うと、SSHの認証さえできてしまえば、あとはほとんど詰まることろはありません。SSHの認証を制すものは、VS Codeのリモート開発を制すといっても過言ではないでしょう（本当か？）
VS Codeでのリモート開発環境構築の流れ
基本的な流れは、ターゲット（Remote OS）に関わらず以下となります。
- ターゲット（Remote OS）の設定
- SSHの設定（パスワード認証 / 公開鍵認証）
- ローカルPC（Local OS）のVS Code設定
この記事では、ターゲットとしてラズパイ・クラウド（GCPを例として説明）、ローカルPCとしてMac/Linuxを想定してリモート開発の方法を解説します。
それぞれの具体的な手順を記載していきます。DockerコンテナやWindowsに関してはこの記事では対象外となります（すみません）。Windowsでも基本的な流れは同じなので、何かしら参考になるところはあるかとは思います。
ターゲット（Remote OS）の設定
ラズパイとクラウドの設定に関して説明します。ラズパイに関しては、代わりにLinux OSのPCを使う場合も同じ様な流れで実施できます。クラウドはGoogle Cloud Platform(GCP)を例として説明します。
ラズパイの設定
以下記事を参考に、ラズパイが起動できるところまで設定ください（ディープラーニングの設定までは不要です）。
Raspberry Piの設定でSSHを有効にするのを忘れない様にしましょう。
ホスト名はraspberrypiの前提で進めます。
ターゲット（GCP）の設定
以下記事を参考に、GCP(Google Cloud Platform)のAI Platformで適当なインスタンスを立てましょう。
インスタンスが作成できたらOKです。
SSHの設定
SSHの認証方式の基礎知識
最初にSSHの設定において重要となるSSHの認証方式に関して、簡単に記載します。SSHの認証方式は、代表的なものとして大きく「パスワード認証方式」「公開鍵認証方式の」2つの方式があります。
パスワード認証は、通常のパスワードを登録・認証する方式です。公開鍵認証はやや複雑で、秘密鍵と公開鍵という仕組みを使ってアクセスする方式です。詳細は割愛しますが、要は秘密鍵と公開鍵という2つの鍵のペアを勘合札のように使って認証を行う仕組みです。今回の場合は、公開鍵をターゲット側（Remote OS）において、秘密鍵を使ってアクセスする形になります。
以下のサイトがGCPへの接続まで書かれていてわかりやすいです。
この記事では以下3つの組み合わせを解説します。
| SSH認証方式 | ターゲット |
|---|---|
| パスワード認証 | ラズパイ |
| 公開鍵認証 | ラズパイ |
| 公開鍵認証 | クラウド(GCP) |
セキュアな公開鍵認証が推奨なのですが、手元のラズパイのファイルをパッと編集したいときを想定して、パスワード認証方式に関しても記載しています（クラウドはセキュリティの関係上、公開鍵認証方式のみとなります）。公開鍵認証方式は、ターゲットがラズパイ（Linux PC）かクラウド(GCP)かで若干お作法が変わってくるので、それぞれ説明します。
パスワード認証方式でラズパイにアクセスする設定
まずは、ラズパイにパスワード認証方式でssh接続できるか確認しましょう。ラズパイのユーザーがpiホスト名がraspberrypiの場合は以下となります。
$ ssh pi@raspberrypi.local
ラズパイのユーザーパスワードを入力して、ログインできればOKです。
続いて、~/.ssh/configに以下のような設定を追記します。
Host rpi
HostName raspberrypi.local
User pi
port 22
これにより、以下コマンドでラズパイにsshでアクセスできるようになります。
$ ssh rpi
この設定はVS Codeでアクセスするためにも必要な設定なので、必ず設定するようにしてください。パスワード認証方式でアクセスできれば良いという人は、この後の公開鍵認証方式の設定は飛ばして、VS Codeの設定に進みましょう。
公開鍵認証方式でラズパイにアクセスする設定
公開鍵認証方式の場合は、まずローカルPC(Linux or Mac)で秘密鍵と公開鍵を作ります。以下のコマンドを実行してください。-Cオプションに記載するコメントの記載は任意です（空白でもOKです）。
$ cd ~/.ssh $ ssh-keygen -t rsa -C ''
作成するとき、以下のように鍵の名前の入力を促すメッセージが出てくるので、好きな名前を記載して保存します（ここではrpiとします）
Enter file in which to save the key (/Users/<user name>/.ssh/id_rsa): rpi
続いて、パスワードを2回入力しますので、自分の好きなパスワードを入力してください（これ以降、これを鍵のパスワードと呼びます）。rpiとrpi.pubという2つのファイルが生成されます。それぞれが、秘密鍵と公開鍵になります。公開鍵をRemote OS側に置いて、秘密鍵を使ってLocal OS側からRemote OSにアクセスすることに注意してください。
公開鍵をRemote OSに設定します。設定はssh-copy-idコマンドを使うと楽です。
$ ssh-copy-id -i rpi.pub pi@raspberrypi.local
このときパスワードには、パスワード認証のパスワードを入力します。これにより、ラズパイ側の ~/.ssh以下にauthorized_keysとして公開鍵が置かれます。
続いて、sshで秘密鍵を使ってアクセスします。
$ ssh pi@raspberrypi.local -i ~/.ssh/rpi
パスワードには、鍵のパスワードを入力してください。
ここで、ローカルからは秘密鍵を使ってアクセスするので、使用する鍵のファイルはrpi.pubでなくrpiである点に注意してください。これを間違えると bad permissionsだったり、パーミッション無理やり変更してもinvalid formatというエラーが出てアクセスできません。鍵認証の仕組みを覚えていれば間違えませんね。私は、恥ずかしながら最初ハマりました。sshでアクセスできれば鍵認証はOKです。
続いて、パスワード認証のときと同様に~/.ssh/configに設定を追記します。公開鍵認証方式の場合はIdentityFileで鍵の場所を指定する必要があります。
Host rpi
HostName raspberrypi.local
User pi
port 22
IdentityFile ~/.ssh/rpi
これにより、以下コマンドでラズパイにsshでアクセスできるようになります。
$ ssh rpi
この設定はVS Codeでアクセスするためにも必要な設定なので、必ず設定するようにしてください。
公開鍵認証方式でクラウド（GCP）の設定
公開鍵認証方式の場合は、まずローカルPCで秘密鍵と公開鍵を作ります。ラズパイにアクセスするときと同様ですが、コメントにはGCPで使用しているメールアドレスを使用する必要があるので注意してください。ここではxxxx@gmail.comとします。
$ cd ~/.ssh $ ssh-keygen -t rsa -C 'xxxx@gmail.com'
以下のように鍵の名前の入力を促すメッセージが出てくるので、好きな名前で保存します（ここでは gcpとします）
Enter file in which to save the key (/Users/<user name>/.ssh/id_rsa): gcp
続いて、パスワードを2回入力しますので、自分の好きなパスワードを入力してください。gcpとgcp.pubという2つのファイルが生成されますが、それぞれ秘密鍵と公開鍵になります。
公開鍵の方をGCPに設定します。まずは公開鍵 gcp.pub の中身をコピーします。中身はエディタで開いても、以下のとおりcatコマンドでもOKです。
$ cat gcp.pub
Mac限定ですが、以下のコマンドでクリップボードに直接コピーすることも可能です。
$ pbcopy < gcp.pub
続いて、GCPのインスタンスに鍵を設定しましょう。インスタンスの詳細画面を開きます。AI Platform（GCEでも可）の以下画面で、インスタンス名をクリックします。
インスタンスの詳細情報が出てきます。ここで画面の中ほどに「外部 IP」という表示があります。これがインスタンスのIPアドレスとなります。
そのあと、画面上の「編集」ボタンをクリックするとインスタンスの編集が可能となります。下の方に「SSH認証鍵が0個あります」という表示があるので、「表示して編集」「項目を追加」をクリックして表示されるテキストボックスに、先ほどコピーした公開鍵の情報をペーストして保存しましょう。もし入力できない場合は、最初に画面上の「編集」ボタンがクリックしたか確認してください。
これで設定は完了です。あとは、以下コマンドでsshでアクセスします。<user name>はgmailのアカウント名、<ip address>はインスタンスのIPアドレスです（インスタンスの詳細画面に出てきたものです）。
$ ssh <user name>@<ip address> -i ~/.ssh/gcp
続いて、おなじみの~/.ssh/configに設定を追記します。記載する内容は以下です。ターゲットが複数の場合は、同様のフォーマットで複数書くことも可能なので、ラズパイの設定が既にあっても、気にせず下に追記すればOKです。
Host gcp
HostName <ip address>
User <user name>
port 22
IdentityFile ~/.ssh/gcp
これにより、以下コマンドでラズパイにsshでアクセスできるようになります。
$ ssh gcp
しつこいですが、この設定はVS Codeでアクセスするためにも必要な設定なので、必ず設定するようにしてください。
ローカルPC(Local OS)のVS Codeの設定
いよいよVS Codeの設定です。VS Codeはすでにインストールされている前提です。以下コマンドでVS CodeのRemote Development拡張をインストールします。
$ code --install-extension ms-vscode-remote.vscode-remote-extensionpack
すると、左側にPCのアイコンを選択して、REMOTE EXPLORERのメニューから「SSH Targets」を選択すると、以下の様に~/.ssh/configで設定した項目rpi, gcpが表示されます。
ここで、項目を選択すると右側に+のついたアイコンが表示されるので、アクセスしたい方をクリックしましょう。
すると、新しいウィンドウが表示され、真ん中上にパスワードを求める画面が表示されます。
パスワード認証で接続するときは、ラズパイのユーザーのパスワードを。公開鍵認証方式で接続する場合は、鍵のパスワードを入力してください（どちらかわからない場合は、パスワード入力ウィンドウのメッセージの末尾を確認してください。for ssh keyと書いてあれば公開鍵認証方式で、for <user name>@<host name>となっていればパスワード認証です）。
認証が完了すると、Remote OSでVS Codeのリモートアクセスのためのセットアップが始まります。初回は多少時間がかかります。
セットアップ完了したら、左上のファイルのアイコンをクリックしましょう。以下の様に表示されます。
ここで、Connected to remoteの下にある「Open Folder」アイコンをクリックします。
すると、以下のようにRemote OSのディレクトリが表示されます。開発したいディレクトリ（リポジトリ）を選択しましょう。
ここまでラズパイの例で実践しましたが、GCPでも流れは全く同じです。以下の様にGCPのディレクトリ（リポジトリ）にVS Codeでアクセスできます。
あとは、自由にリモートのファイルをVS Codeでエディットしてリモート開発をしましょう。
VS Codeのリモート開発Tips
VS Codeのリモート開発時のTipsです。
Remote OSのターミナル操作
リモート接続した状態で View -> Teminal と実行すると、VS Codeの右下にRemote OSのターミナル画面が表示されます。ターゲットのターミナル操作をVS Codeで完結することができるので便利ですね。
リモートデバッグ
VS Codeを使ったリモートのデバッグも可能となります。基本的な流れはローカルPCでのデバッグと同じです。以下記事参照ください。
ラズパイに直接VS Codeをインストール
リモート開発のTIPSからは外れますが、ラズパイに関しては、Remote Developmentを使わず、直接VS Codeをインストールしてしまう方法もあります。ラズパイ4だと、VS Codeそれなりに快適に動くので、こちらを選ぶ（もしくは併用する）のも一つの手段です。以下記事参照ください。
まとめ
VS CodeでRemote Developmentを使ってリモート開発をする方法をまとめました。簡単にメモするつもりが、めちゃくちゃ長くなってしまいました…Remote Developmentは、ネットに色々情報はあるのですが、色々なことができる分、設定も千差万別なのでなかなか自分のやりたいことがバチっと書いてある記事がみつかりませんでした。この記事が誰かの役に立つことを願っています。この記事では触れていない、Windows WLSやDockerコンテナへのアクセスなどは別の記事を参考にしてください。
使ってみると、とても便利で快適です。もっと早く使えばよかったですね。興味あるけど使えてなかった人は、この記事を読んで是非リモート開発にチャレンジしてみてください。
参考リンク
関連記事
変更履歴
- 2021/01/23 ZennのVS Code入門本に関して追記
