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

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

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

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

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

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

# SSH 接続の確保

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

## キーペアの生成

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

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

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

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

## 権限の設定

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

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

<img width="286" alt="権限設定.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/c06c0538-3ac5-3ce5-b767-d5af140c15c3.png">

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

## 公開鍵の登録

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

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

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

```text:/etc/ssh/sshd_config
...
PubkeyAuthentication yes          # -> コメントアウトを外す
...
```
`sed` コマンドだとこんな感じです。

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

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

```console
$ sudo service sshd restart
```

## Windows 10 からの接続

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

```text:~/.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です。

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

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

```console
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         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公式の機能で、リモートサーバにSSHして編集する【Insiders Preview】](https://qiita.com/suzuki_sh/items/245b9817536eba808842)

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

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

# 接続後のターミナルにて

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

```console
$ export DISPLAY=:0
```
そうすると、

```
$ npm run test
```

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

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