ローカルのVSCodeからGoogle Colab (Pro)に接続する

## 0. 流れ
[Colab-ssh](https://github.com/WassimBenzarti/colab-ssh) なるPyPIパッケージを用いる．

そのために，

- cloudflaredのインストール
    - ngrokと異なり，ユーザー登録不要で使える
    - 手順が少ない
- VSCodeでの設定
- Colabでの設定

を行う. 

## 1. cloudflaredをインストール

- 参考: [Install cloudflared](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation)

- 私は，[Windows 64-bit版の実行ファイル](https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-windows-amd64.exe) （直リンクなので注意）を, Cドライブ直下に作成した`cloudflared`フォルダ配下にダウンロードした
- コマンドプロンプトを管理者権限で起動し，インストールが成功したか確認（バージョンが表示されればOK）

```
> cd C:\cloudflared
>.\cloudflared-windows-amd64.exe --version
```

## 2. VSCodeで"Remote - SSH"拡張機能をインストールし，設定
- インストール: 略
- 設定: 
    - Ctrl(Cmd)+Shift+P で"Remote-SSH: Open Configuration File..."を選択し，sshのconfigファイルを開く(例えば，`C:User\user\.ssh\config`)
    - 以下のように記述

```
Host *.trycloudflare.com
 HostName %h
 User root
 Port 22
 ProxyCommand <cloudflareの絶対パス> access ssh --hostname %h
```

私は，`<cloudflareの絶対パス>` に `C:\\cloudflared\\cloudflared-windows-amd64.exe` と記述．

## 3．Colabでの設定
てきとうなノートブックを開き，`Edit > Notebook settcelerator"をGPUに設定する．

次に，以下のように記述し，実行する．

``` python
from google.colab import drive
drive.mount('/content/gdrive')

!pip install colab_ssh --upgrade

from colab_ssh import launch_ssh_cloudflared
launch_ssh_cloudflared(password="<てきとうなパスワードを記入>")
```

すると，以下のような表示が得られる．

![colab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300536/46404a1c-c70f-dbe8-32e1-dbf2cdb13bc8.png)


この時点で，"SSH Terminal"にあるコマンドを使えば，GitBashやPowerShell等からColabのTerminalに接続することができる．

## 4. VSCodeから接続
今回はVSCodeを使いたいので，上の出力の"VSCode Remote SSH"にあるコマンドをコピーし，`Ctrl+Shift+P` から"Connect to Host..."を選択し，ペーストしてEnter.

すると，別ウィンドウが立ち上がりOSが聞かれるので"Linux"を選択．パスワードが聞かれるので，Colabのノートブックに記載したパスワードを入力する．

次に，VSCodeの"Open Folder"からGoogle Driveを読み込む．
![vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300536/21bcb787-190b-520f-8479-da329b465bd4.png)


再度パスワードを聞かれるので入力．

これで，Googel Drive上のファイルに自在にアクセスできるようになり，編集したものをColabのマシンで動かせるようになった．
![bash.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300536/177e595d-d0a4-bf92-1af1-a964961e0fcd.png)

## 【追記】5. VSCode拡張機能の引継ぎ
SSHで接続した際，ローカルのVSCodeにインストールしている拡張機能（"Jupyter"など）は引き継がれないため，別途リモートホスト上にインストールする必要がある．

インストール方法は通常通り行えばよいが，問題は「再度SSH接続した際，拡張機能はまっさらな状態に戻ってしまう」という点（AWS上での開発などではホストが一定期間固定なので最初の儀式として拡張機能導入を行うのもさほど手間ではないが...）．

よって，以下のような応急処置を行う（もっと良い方法があるはず）．

- 拡張機能を一通りインストールしたら，VSCodeのターミナルで以下を実行し，拡張機能をGoogle Driveに保存する(拡張機能は`~/.vscode-server/extensions/`に保存されている)．

``` sh
/content/gdrive/MyDrive/Colab Notebooks# mkdir VSCode
/content/gdrive/MyDrive/Colab Notebooks# ls -la ~/.vscode-server/extensions/
total 16
drwxr-xr-x 4 root root 4096 Mar 24 10:18 .
drwxr-xr-x 5 root root 4096 Mar 24 09:48 ..
drwxr-xr-x 9 root root 4096 Mar 24 10:18 ms-python.python-2021.3.680753044
drwxr-xr-x 8 root root 4096 Mar 24 10:17 ms-toolsai.jupyter-2021.3.619093157
/content/gdrive/MyDrive/Colab Notebooks# cp -r ~/.vscode-server/extensions/ ./VSCode/
```

- VSCodeのターミナルで，保存した拡張機能を`~/.vscode-server/extensions/`にコピーする

``` sh
# 拡張機能をコピー
/content/gdrive# cp -r /content/gdrive/MyDrive/Colab\ Notebooks/VSCode/extensions/ ~/.vscode-server/
```

## おまけ
加えて，私は90分制限によるタイムアウトに対応するため，以下のJavaScriptコードをマークダウンのセル内に書いており，ブラウザから開発者ツールを開き，コンソールにコピペ&実行している．

```
function ClickConnect(){
console.log("Working"); 
document.querySelector("#comments > span").click() 
}
setInterval(ClickConnect, 60000)
```

## エラー対応
Windowsで，ssh接続あたりのエラーが出た際は，以下のサイト等を参照してください．
- [Windwos10でssh ProxyCommandの多段SSHの設定](https://www.suzu6.net/posts/205-ssh-config-proxycommand-windows10/)
- [Can't connect through jumpbox #18](https://github.com/microsoft/vscode-remote-release/issues/18#issuecomment-507258777)

## 参考
[Connect Local VSCode to Google Colab’s GPU Runtime](https://medium.com/swlh/connecting-local-vscode-to-google-colabs-gpu-runtime-bceda3d6cf64)