LoginSignup
0

More than 3 years have passed since last update.

【2019年5月版】Win10からVSCodeでUbuntu18にSSH接続してWebDriverでE2Eテストさせてみる

Last updated at Posted at 2019-05-24

長いタイトルですいません。

今回は表記の通り、手元の Windows 10 マシンからVSCode InsiderSSHリモートプラグインでUbuntu 18.04に接続し、リモートのUbuntu上でWebDriverからブラウザを立ち上げて、E2Eテストを実行したい、ということでございます。

いろいろ紆余曲折がありましたので備忘録として手順を貼っておきます。

Ubuntu での GUI(デスクトップ) ログインをしておく

今回は Ubuntu 上でブラウザを実行させようということですので、あらかじめSSH接続するユーザーでログインし、ロック状態にしておきます。

SSH 接続の確保

まず本作戦の生命線といも言うべき兵站線である Windows 10 からのパスワードなしSSHでUbuntu18.04にログインできるようにする、というのが最重要でございます。(当然ですw)

キーペアの生成

git for windowsbashから以下のような感じでパスワードなしのキー生成を行いました。

$ cd ~/.ssh
$ ssh-keygen -t ed25519 -P "" -f vscode.remote.pem -C "myaccount"

生成された公開鍵をscpなどで Ubuntu 側に送信しておきます。

$ scp vscode.remote.pem.pub 192.168.1.xxx:/home/xxxx/

権限の設定

VSCode Insider の SSH プラグインは 手元の git for windowMinGW64WSLなどのことは一切知らないので PowerShell から ssh コマンドを発行します。
ですので、git for windowsbashからchmodしても効かないのです。。。(´・ω・`)

エクスプローラーからvscode.remote.pemファイルのプロパティを開き、所有者以外のユーザーやロールからの書き込み拒否しておきます。

権限設定.png

こんな感じです。久々にやるとこのファイルのプロパティ画面の使い方もちょっと変わってて戸惑う。

公開鍵の登録

Ubuntu側でログインし、先ほどの公開鍵を ssh に通知します。パーミッションも所有者のみが参照できるようにしておきます。

$ cat vscode.remote.pem.pub >> .ssh/authorized_keys
$ chmod 600 .ssh/authorized_keys

Ubuntu 18.04 での SSH の設定がデフォルトのままでは公開鍵でのログインができませんので設定を有効にします。

/etc/ssh/sshd_config
...
PubkeyAuthentication yes          # -> コメントアウトを外す
...

sed コマンドだとこんな感じです。

$ sudo sed -i -e "s/#PubkeyAuthentication/PubkeyAuthentication/g" /etc/ssh/sshd_config

設定ファイルの書き換えが終わったらサービスを再起動しておきます。

$ sudo service sshd restart

Windows 10 からの接続

この Ubuntu へのSSH接続は、指定したユーザーと上記で生成した秘密鍵で常に行うように、Windows 10 側で以下のような設定ファイルを作っておきます。

~/.ssh/config
Host 192.168.1.xxx
    HostName 192.168.1.xxx
    User xxxxxx
    IdentityFile c:\Users\xxxxxx\.ssh\vscode.remote.pem

接続の確認

WindowsのコマンドプロンプトかPowerShellからssh接続できるかテストを行いましょう。

> ssh 192.168.1.xxx

うまくいけばOKです。

パーミッションエラーが出た場合。

パーミッションの設定に不備がある場合は出ますよ~。以下のショッキングなエラーメッセージが。。。

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for 'vscode.remote.pem' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "vscode.remote.pem": bad permissions

上記の権限設定の手順で権限をチェックしてください。
この辺りはエラーメッセージが不親切だから動けばOKというかトライアンドエラーでご機嫌を伺うことになってしまいますね。。。

VSCode Insider のダウンロードとインストール

VSCode での作業はこちらのページにて丁寧に解説頂いているのでここでは割愛します。

VSCode Insider インストールして Remote Extention Pack プラグインをインストールしてください。

Remote Connection の一覧に上記の 192.168.1.xxx が表示されていると思います。ここから接続してみましょう!

接続後のターミナルにて

無事に VSCode から Ubuntu 上のプロジェクトが開けたと思います。これだけでもだいぶ満足なんですが、開発サーバーをリモートにするのはいいけど、WebDriver 使ったテストでChrome などのブラウザの立ち上げに失敗しますよね~ということで、VS Code のターミナルにて以下のおまじないをしておきます。

$ export DISPLAY=:0

そうすると、

$ npm run test

などやった時に実行される WebDriver がリモートのUbuntu上でブラウザを立ち上げるようになります。

これでめでたく、手元の Windows 10 マシンからVSCode InsiderSSHリモートプラグインでUbuntu 18.04に接続し、リモートのUbuntu上でWebDriver+Chromeを立ち上げて、E2Eテストを実行、できるようになりました!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0