チラシの裏からうっすら見える外枠の外のメモ書き

新聞に挟まってる硬い紙のチラシの裏からうっすら見える外枠の外に走り書きされたようなものです。思いついたときにふらふらと。

WSL入りWindows(VSCode)を使ってRaspberry Pi 3とファイル同期する

Windows 10 インターネット プログラミング

Windowsのエディタを使ってLinux環境で開発がしたいと思ったことがありませんか？
僕はあります。

WSLはまだ出来が悪いのでしばらくはRaspberry Pi 3をLinuxだと思いこんで開発してみようと思いました。

そこでどのように環境を整備したかご紹介します。

0. 注意

開発時はクライアントとサーバが同じネットワーク内に存在することを想定しているのでポート開放などは行っていません。

必要があれば適宜ポート開放してください。

1. クライアントの用意

各種インストール

最初にクライアントとなるWindows PCにはVSCodeとWSLを入れておいてください。

VSCodeはこれ

https://code.visualstudio.com/

そしておすすめのWSLはこれ(リンクが見えなければMicrosoft StoreからUbuntuなりを検索して入れてください)

https://www.microsoft.com/ja-jp/p/ubuntu-1804-lts/9n9tngvndl3q

それぞれの初期設定については省略します。好きなようにカスタマイズしてください。

VSCodeへの拡張機能の追加

同期を行うための拡張機能である「sftp」をインストールし有効化します。

https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

クライアントでの作業は一旦ここでやめて、次にサーバの設定を行います。

2. サーバの用意

サーバとなるRaspberry Pi 3ではリモート開発用のユーザーを追加します。 今回追加したユーザーの名前はremoteですが好きなように決めていただいて構いません。

$ sudo adduser remote # remoteユーザーを追加する

コマンドを実行したら画面に従ってユーザーを追加してください。

アカウントができたら、(後のことが面倒なので)sudoグループに追加しておきます。

$ sudo gpasswd -a remote sudo # remoteユーザーをsudoに追加する

また、Raspberry Pi 3の初期アカウントのようにsudoのたびにパスワードを要求されないようにしたい人はrootにパスワードを設定してパスワードを要求しないように設定します。 ただし、これについては好みが分かれるので嫌なのであれば入れなくても結構です。

$ sudo passwd root # rootのパスワードを設定
Enter new UNIX password:
Retype new UNIX password:
passwd: password updated successfully
$ su root # rootに移動する
password:
# sudo echo "remote ALL=(ALL) NOPASSWD: ALL" >> /etc/sudoers # sudoersに設定を追加、viなどで開いてもOK
# exit # rootのまま作業を続けるのは非推奨なので必ずログアウトしておく
exit

次に作成したremoteユーザーに切り替えて秘密鍵を生成します。 すでに生成した方はそれを使っていただいて構いません。

$ su remote # remoteユーザーに切り替える
password:
$ cd # piユーザーでログインした後にremoteユーザーに切り替えてもディレクトリの位置は切り替わらないので一旦ホームディレクトリに戻る
$ mkdir ~/.ssh # 鍵を保管するディレクトリを作成
$ ssh-keygen -t rsa # 鍵ペアを作成、画面に従って入力していく

コマンドを実行したら画面に従って鍵ペアを作成してください。 すると、/home/remote/.ssh/内にid_rsaとid_rsa.pubの2つが生成されます。そのうちのid_rsa(秘密鍵)の方をクライアントにダウンロードします。

ダウンロード方法についてはSSH SCPなどお好みの方法でどうぞ。 id_rsa.pub(公開鍵)の方はこのまま残しておき、ファイル名をauthorized_keysに変更しパーミッションを変えておきます。

$ cd ~/.ssh # ディレクトリへ移動
$ mv id_rsa.pub authorized_keys # ファイル名を変更
$ chmod 600 authorized_keys # パーミッションを変更
$ chmod 700 ../.ssh # ディレクトリのパーミッションも変えておく

ここでまたクライアントの設定に戻ります。

3. クライアントの設定

先程ダウンロードした秘密鍵の名前を適当なものに変更します。私はremote@raspberrypi.pemとしました。

次にこのファイルをWSLのホームディレクトリ以下に移動させます。 ユーザーフォルダの中に.sshフォルダを作成し、ダウンロードした秘密鍵をそこに移動させます。そしてそのフォルダをShift + 右クリックし、「Linux シェルをここから開く」を選択します。するとBashの画面が出てくるので次のコマンドを入力して秘密鍵をコピー(重要)します。

$ mkdir ~/.ssh # 先にディレクトリを用意しておく
$ cp remote@raspberrypi.pem ~/.ssh # 今作ったディレクトリへコピー

移動しなかった理由は、あとでこの位置にある鍵ファイルを利用するためです。 そしてコピー先と同じディレクトリでconfigを作成します。

$ vi ~/.ssh/config # viでconfigを開く

内容は次の通りです。

ServerAliveInterval 60

Host hoge # Raspberry Piに付けたい名前
    HostName 192.168.0.xx # Raspberry PiのIPアドレス
    User remote # ユーザー名、今回はremote
    IdentityFile ~/.ssh/remote@raspberrypi.pem # 秘密鍵のパス

記述したらファイルを保存し、パーミッションを変更します。

$ chmod 600 ~/.ssh/remote@raspberrypi.pem # パーミッションを変更
$ chmod 600 ~/.ssh/config # パーミッションを変更
$ chmod 700 ~/.ssh # ディレクトリのパーミッションも変更

これでconfigに設定した名前(今回はhoge)を使い、ssh hogeと入力するだけでログインすることができます。

ログインできることを確認できたら、またサーバの設定へ。

4. サーバの設定

最後に該当ユーザーのみパスワードでのログインを禁止します。禁止するのはパスワードでのログインだけでsudoなどでパスワードが要求されることはあるので決してパスワードを消さないでください。

早速、sshでRaspberry Piにログインしてsshd_configを開きます。

$ sudo vi /etc/ssh/sshd_config

sshd_configを開いたら、一番最後に次の内容を入力します。

Match User remote
    PasswordAuthentication no

そして保存してsshをリスタートします。

$ sudo /etc/init.d/ssh restart

これでremoteユーザーにはパスワードでログインすることができなくなります。 もしログインできるようにしたいのであればsshd_configに追加した内容を削除してsshを再起動してください。

5. サーバの設定 その2

後はサーバにNode.jsなりRubyなりPythonなど好きな環境をぶち込んでください。

そして開発するディレクトリを定めます。

6. クライアントで同期設定

VSCodeを開き適当なところにワーキングディレクトリを作ります。 そこが今回開発するプログラムが同期される位置になります。

もし別のプログラムを同期したいのであれば別のワーキングディレクトリを作っておけばOKです。

ワーキングディレクトリが用意できたら、Ctrl + Shift + Pを押してコマンドパレットを開きsftpと入力します。 すると、SFTP: Configと表示されるのでためらわずEnterを押してください。

すぐに.vscodeのフォルダ内にsftp.jsonができます。 その中に次の内容を入力します。

{
    "protocol": "sftp",
    "host": "192.168.0.xx", // Raspberry PiのIPアドレス
    "port": 22,
    "username": "remote", // ユーザー名
    "password": null, // パスワードログインできないのでnull
    "remotePath": "/home/remote/sample", // 同期したいディレクトリ
    "privateKeyPath": "C:/Users/user/.ssh/remote@raspberrypi.pem", // ユーザーフォルダに作成した.sshフォルダ内にある鍵を指定する WSLのフォルダは深すぎる
    "passphrase": null, // もし鍵にパスワードを設定しているのであれば入力
    "agent": null,
    "interactiveAuth": false,
    "syncMode": "update", // 更新のたびに同期する
    "watcher": {
        "files": "**/*", // 監視対象ファイル
        "autoUpload": true, // 変更があれば自動で同期する
        "autoDelete": true // 自動で削除する
    },
    "uploadOnSave": true, // セーブするたびにアップロードする
    "ignore": [ // 同期しないファイル/ディレクトリ
        ".vscode",
        ".git",
        ".DS_Store"
    ]
}

その後再びCtrl + Shift + Pを押してコマンドパレットを表示し、SFTP: Sync Remote -> Localを選択し、現在のワーキングディレクトリが選択されていることを確認した上でEnterを押すと同期が開始されます。

その他のコマンドについてはコマンドパレット上でSFTPと入力することで確認できます。

同期方法についての説明は以上です。

7. 豆知識

これら設定をした上で、VSCode上で``Ctrl + Shift + ```を押すと、VSCode上で統合ターミナルを表示することができます。

(コマンドプロンプトでは試していませんが)PowerShell上ではbashと入力することで統合ターミナル上でWSLのターミナルを開くことができるので、そこからssh hogeと入力すれば同期しているサーバにすぐ接続することもできます。