VS Code とGCEでリモート開発

VS CodeでGCE(Google Computing Engine)にSSH接続してリモート開発する手順です。公開鍵・秘密鍵についてほとんど理解していないので、記述内容少し怪しいです。

# 前提
- VS Code インストール済
- GCPアカウントおよびGCEのインスタンスあり

# 手順
## 1. VS Code Extension インストール(Local PC)
VS Codeの以下のExtensionをインストール。2022年8月の段階でまだプレビュー状態。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/66b93908-5344-d30d-5e1c-99f48d9e0665.png)

:::note info
名前: Remote Development
ID: ms-vscode-remote.vscode-remote-extensionpack
説明: An extension pack that lets you open any folder in a container, on a remote machine, or in WSL and take advantage of VS Code's full feature set.
バージョン: 0.21.0
パブリッシャー: Microsoft
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack
:::

以下のExtensionを内包。

> - Remote - SSH - Work with source code in any location by opening folders on a remote machine/VM using SSH. Supports x86_64, ARMv7l (AArch32), and ARMv8l (AArch64) glibc-based Linux, Windows 10/Server (1803+), and macOS 10.14+ (Mojave) SSH hosts.
> - Remote - Containers - Work with a separate toolchain or container based application by opening any folder mounted into or inside a container.
> - Remote - WSL - Get a Linux-powered development experience from the comfort of Windows by opening any folder in the


## 2. 秘密鍵と公開鍵作成(Local PC)
Local PCで`ssh-keygen`で秘密鍵および公開鍵を作成。

```bash
% ssh-keygen -t rsa -b 4096 -C "<user name>"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/<USER ID>/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /Users/<USER ID>/.ssh/id_rsa
Your public key has been saved in /Users/<USER ID>/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:Q/Kj9i3kupnMhNwkO+2wqM0mAkULFRSDPP/xhSHDlOc <user_name>
The key's randomart image is:
+---[RSA 4096]----+
|.+*oo..          |
|oo.. = o         |
| oo.  * +        |
|  o. . E .       |
| .  o + S        |
|.  . O o.o       |
|.   * *o         |
|oo.. X +o.       |
|o++ . Oo...      |
+----[SHA256]-----+
```

以下の3回を聞かれた。1回目はファイル名。2回目と3回目はパスフレーズ。全て何も入力せずにデフォルト状態。

> 1. Enter file in which to save the key (/Users/\<USER ID>/.ssh/id_rsa): 
> 2. Enter passphrase (empty for no passphrase): 
> 3. Enter same passphrase again: 

最後に公開鍵の情報を出力してコピー。

```bash
cat ~/.ssh/id_rsa.pub 
```

## 3. 公開鍵登録(GCE)
GCEで公開鍵を登録。インスタンス詳細画面でSSH認証鍵3に先程コピーしたテキストを貼り付け。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/7c2720fc-6476-9d75-cdd5-e5d1d81b5a67.png)

`.ssh`のディレクトリに対するPermissionを厳しくしておきます(そうしないとエラー発生しました)。

```bash
chmod 700 ~/.ssh
```

## 4. SSH接続テスト(Local PC)
TerminalからSSH接続をまずは試します。

```bash
ssh <USER ID>@34.83.146.187 -i ~/.ssh/id_rsa
```

## 5. VS CodeでのSSHターゲット設定(Local PC)
VS CodeでSSHターゲットを設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/ce514def-9950-0ed5-ed99-a225a2e61ff2.png)

`.ssh/config`ファイルを編集。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/e29fbdd8-833a-673c-491f-b8c3ae132d09.png)

```
Host gce-test
    HostName <ip address>
    User <user id>
    IdentityFile ~/.ssh/id_rsa
    PasswordAuthentication no
    IdentitiesOnly yes
```

## 6. VS CodeでのSSH接続(Local PC)
VS CodeからSSH接続をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/46ae6c09-6e11-2878-f673-1f8bdc65098c.png)

新規 VS Code Windowが起動し、接続できます。

# Tips
## SSHが切れるトラブルシュート
重い処理をSSHで実行した場合、接続が切れることがありました。
色々試した結果、GCEのスペックを上げて実行すれば問題なしでした。慣れないので素人くさいミスですね。

## Jupyter
PythonでJupyterを実行する方法です。PythonとJupyterをGCE上でインストールして以下のコマンド実行します。

```shell
jupyter notebook --port=8001
```

あとはローカルPCのブラウザで"http://localhost:8001" を開くだけ。VS Code上のJupyterを使いたかったのですが、venvが悪いのか上手くできませんでした(時間かけて調べれば、やれそうな気もします)。

# 参考リンク
https://sleepless-se.net/2018/09/15/gcp-ssh/