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月の段階でまだプレビュー状態。

名前: 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で秘密鍵および公開鍵を作成。

% 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:

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

cat ~/.ssh/id_rsa.pub 

3. 公開鍵登録(GCE)

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

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

chmod 700 ~/.ssh

4. SSH接続テスト(Local PC)

TerminalからSSH接続をまずは試します。

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

5. VS CodeでのSSHターゲット設定(Local PC)

VS CodeでSSHターゲットを設定。

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

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接続をします。

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

Tips

SSHが切れるトラブルシュート

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

Jupyter

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

jupyter notebook --port=8001

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

参考リンク