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
と入力すれば同期しているサーバにすぐ接続することもできます。