GCP上の開発をVisal Studio Codeで行う

# 目的
- GCPの開発、とくにVertex AIのJupiter Lab上での開発をVisual Studio Codeで行う

# メリット
- Visual Studio Codeの機能を利用しながら開発を進めることができる（とてもよい）

# 背景

布川シーランド公爵である。

社内でChatGPTをブン回していたら、ひょんなことから、GCP（Google Cloud Platform）でAI関連のいろいろな開発をするチームにアサインされた俺であった。

「プロンプトエンジニアリング**とか**のお仕事しませんか」の「**とか**」には、
広く、GCPでサーバーを立ち上げ、APIエンドポイントの作成をして環境の提供をすることが含まれていた――。

GCPとは、クラウドコンピューティングプラットフォームの一種だ。
代表的なのはGCPとAWS（GoogleとAmazon）だ。
GCPとは、AWSじゃないほうであり、AWSとはGCPじゃないほうである。
（Alibaba Cloudなどもあるぞ！）

だいたいのリソースは時間単位いくらで課金されているので（たぶん）C#アプリケーションエンジニアであり、サブスクリプションというものが嫌いな俺は、常に、木に登り、タオルを振り回しながら各種のインスタンスを威嚇している。

無機質なコンソールにアレルギーを起こしながら、先行している別チームにデプロイ例を教えてもらい、見よう見まねでなんとかやっていた。

やれてはいたので「Visual Studio Codeか……やー、いいっす👋」と嫌な飲み会をぶっちぎるノリでスルーし続けてきたのだが、この度コードレビューで「不要なimportをするな」ほか、様々な指摘を受け、FCCCP（救世主たるプログラマのための第一教会）に改宗することになった。

実際、使い始めてみるとベンリであり、すっかり元の環境に戻る気をなくしている。

Jupyter Lab上のみで開発するのは、メモ帳でHTMLいじるくらいタイヘンなことだった。

いや、それは言い過ぎかもしれないが、ベンリだ。

このベンリというのは爆速でコミットして生産性が2倍になるという意味ではなく俺が消しカスを練って使用されていないimportをはぎとらなくて済むということである。
まあそんな時間を使ってお賃金をもらうのも……悪くはないが……。

# SSH接続の準備
SSHとはなんだ？
リモートコンピュータと安全に通信するためのプロトコルだ。
SSH接続とはなんだ？
そいつを使って、接続をするということだ。

GCPでもAWSでも、作ったインスタンスには、SSHを利用して接続することができる。
俺は、まだキーを持っていなかったのだが、流れるようにSSH接続用のキーをブンどられてしまった。

もしまだ「SSHキー」がないなら、キーを作る必要がある。

キーがあるかどうかは、

```
C:\Users\[ユーザー名]\.ssh
```

を見るとわかる。
なお、ユーザー名は各自のものだ。

これはGitHubのだが（GitHubもSSH接続を使うのだ）参考になる。

https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

手順の通りに、Git Bashを立ち上げ、

```
ssh-keygen -t ed25519 -C "your_email@example.com"
```

で、鍵を作成する。
メールアドレスは置き換えてやること！

パスフレーズは何度も入力させられるので、配偶者の名前と記念日の組み合わせなどにしておくと失念してドヤされずに済むだろう。
ソーシャルハッキングされておわるリスクと天秤である（日付はまったくよろしくない）。

どうも、パスフレーズの入力を省略できる設定もあるらしい。

# GCPにSSHキーを設定する
コマンドを入れるといくつかのファイルが生成される。
.pubのほうが信頼できる相手に見せびらかしていい公開鍵である。
これをもって「合鍵、預かってくれないかな？」とインスタンスに置きに行くのである。

GCPだとここにある。

```
/home/jupyter/.ssh/authorized_keys
```

大体の場合、もうGoogleが設定してくれたカギがこのファイルにもうおいてあったのだが
作りたてほやほやのインスタンスにはなかった。
その場合は新規作成をする必要があるようだ。

権限設定などがめんどくさく、便乗したかったので、
いったんインスタンスを停止して、適当にリソースを持ち替えてやると生まれるようである。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/4bc0436c-cd6e-8ad9-1a16-307480aebad9.png)

authorized_keysが生まれていることを確認したらほほえみ、もとにもどす。
**もっと良いやり方があることだろう。**

Vertex AIに戻り、ワークベンチからインスタンスを起動する。
植木鉢の下にそっと公開鍵を置いて、ウインクして立ち去る。

つまり、ターミナルを開き、

`nano /home/jupyter/.ssh/authorized_keys`なんかでファイルを開いて、公開鍵を追記する。

これでVisual Studio CodeからもSSH接続で中身を見れるようになるわけだ。

# Visual Studio Code側の設定
Visual Studio Codeからの接続を簡略化するために、接続設定を追記する。

```
C:\Users\[ユーザー名]\.ssh
```

にある、configを編集する。
Visual Studio Codeの設定というか、SSHクライアントの設定ファイルのようだ。

```
例：Host nunogawa-instance1
  HostName nunogawa-instance1.XXX.co.jp
  User jupyter
```

# Visual Studio CodeからGCPのインスタンスに接続する

Visual Studio Codeを立ち上げる。

拡張機能の、Remote-SSHをインストールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/49231c7f-5485-064f-cd2c-a99dcf7feb8b.png)

ほか、長い付き合いになるので、便利そうなやつをバシバシ入れる。

Visual Studio Codeの右下にこいつが現れる。オレンジのやつだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/88a4b482-1527-ec28-3220-2068abb902ca.png)

クリックして、Connetc to Hostを選択。
さっきconfigに追加してやったものを選ぶ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/824fe0dc-e111-ff5f-0f74-4c6f08fdf600.png)

何度かパスフレーズを聞かれる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/43184613-b78d-0822-46c2-d153ed385a8e.png)

初回はOSを選択したり、何度か確認画面がある。

無事に開けたら、Open Folderから開発環境を開いて……。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/09d843b9-a9c2-1775-cc20-a52618f4ef34.png)

秋の実りのようにコードが色づく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/8c6ffee5-56f9-3a3b-a383-24a1b4dd6534.png)

ま、Jupyter Labのほうでも色づいてるわけだが解析の度合いが違う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/8921fd77-33dd-b9f6-f483-ed02f0e7d225.png)

例えばホラ、使わないimportをしようとすると憂鬱そうに色が陰る。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/cd55a1cf-bb76-d412-f507-a7daf616d5fa.png)

ここで、Git Graphなんてのを入れると、Gitが断然使いやすい。
コミットの履歴もかなりわかりやすいものになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/11e2336b-30a4-7602-1d9f-40e9e1b5b531.png)

開発に取り掛かろう。

# 終えるとき

バツっと消しても問題はないけど次にVisualstudioCodeを起動したときにそっから始まってくれたりするので、Close Remote Connectionで終わるときれい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439672/43e57f29-30f7-2617-48e1-3f9a694da516.png)


# 参考

https://qiita.com/nlog2n2/items/1d1358f6913249f3e186


※本記事はQmonus Value Streamの投稿キャンペーン記事です。

https://qiita.com/official-events/3648bc4e6cedb674491c