OCI Cloud Shell でも VS Code を使いたい

## 動機は？
@moritalous　さんの[AWS CloudShell上でVSCodeを動かすという発明](https://qiita.com/moritalous/items/708d56d5c10c5832d169) という記事を見かけてせっかくなので OCI ユーザーの皆さんにも恩恵を享受してもらおうと真似してみました.....

https://qiita.com/moritalous/items/708d56d5c10c5832d169

と言いたいところですが __「AI First Editor の Cursor を OCI Cloud Shell で使いたい！」__ これが私の祈り、私の願い、さあ、かなえてよ！インキュベーター！！（魔法少女まどか☆マギカより）...が本当の動機です。でも残念なことに、現時点（2024年8月8日）では Cursor は サーバーモードをサポートしていないのです。きっといつか対応してくれると信じてそのときのための練習のメモです（Cloud Shell のコード・エディタに AI を搭載してもいいのですよ ⇒ OCIのサービス開発さん）

ところで、AWS Cloud9 ならアプリケーションプレビューという機能で VS Code をサーバーモードで使えますね。ハンズオンなどで参加者の環境のばらつきを無くしたいときにはとても便利ですよね。Cloud9 サ終 報道が出てすぐにこうした代替案を考えてくださる人がいるのはありがたいですね。密林の雲だけに層が厚い！

## 始める前に
__セキュリティ__ 上はこのような使い方はあまりおススメできませんので、お勉強用のテナントやコンパートメントでの利用に限定しましょう

## トンネル掘削ツール
インターネット　⇒　OCI Cloud Shell の通信はできませんので、OCI Cloud Shell 上で動作している VS Code サーバへ自宅のPCなどからアクセスするためには 
- Cloud Shell 側からどこかのゲートウェイにトンネルを掘る
- 自宅のPCからゲートウェイ経由でトンネルを通って Cloud Shell 上の VS Code サーバへアクセスする

という手順が必要になります

ゲートウェイは自分で立てるか、外部サービスを使うかの2択です。ここでは、2種類の外部サービスを使う方法を試してみます

### [Pinggy](https://pinggy.io/) 
上記の記事で紹介されているものです。インストール不要であるところがいいですね。以前、Gradio アプリにパブリックアクセスを可能とするライブラリ（Gradio謹製）が __あの有名なクラウドストライク__ にウィルスと誤検知されて使えなかったことがあるのでインストール不要はありがたいです。Pinggy には、Free、Pro、Enterprise の 3つの料金プランがあります。Free の場合には、トンネルは 60分でタイムアウトします

https://pinggy.io/

### [Localtunnel](https://theboroer.github.io/localtunnel-www/) 
 長年使われている有名どころですね。Localtunnel は、NodeJSのアプリケーションのインストールが必要です。タイムアウトは7日間です

 https://theboroer.github.io/localtunnel-www/

## 共通の手順
Pinggy と Localtunnel に共通した手順です
### Cloud Shell に VS Code CLI をインストール
#### Cloud Shell のアーキテクチャを確認
OCIコンソール右上の「開発者ツール」アイコンをクリックして、Cloud Shell を選択して、Cloud Shell を起動します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/5be40699-1c9c-5c5c-967f-737b5715ec2d.png)

Cloud Shell が起動したら緑色の帯の左端にある「アクション」から「アーキテクチャ」を選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/373360a8-8998-47ce-6682-407c2849c216.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/c32a83d9-c150-c741-9059-d76fbb4361ea.png)

これ例では ARM(aarch64) とありますので、アーキテクチャは Arm64 であるとわかります。
取消をクリックして、アーキテクチャウィンドウを閉じます

#### VS Code CLI をローカル（ご自宅のPCなど）にダウンロード
[VS Code ダウンロードサイト](https://code.visualstudio.com/download)から 上で確認したアーキテクチャの VS Code CLI をダウンロードします

https://code.visualstudio.com/download

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/ee7cc3d4-a993-31cb-4c24-6f0bb1f3f614.png)


上の例ではアーキテクチャは Arm64でしたので、CLI の Arm64 をクリックします。ご自身の環境に合わせて適切なものをダウンロードします。Arm64 の場合は `vscode_cli_alpine_arm64_cli.tar.gz` というファイルが落ちて来ます

#### VS Code CLI を Cloud Shell にアップロード
Cloud Shell の右上にある歯車マーク（Cloud Shell のメニュー）をクリックして、「アップロード」を選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/925860c8-1df5-97e9-f873-b28960104f06.png)

上でローカルにダウンロードした VS Code CLI の tar.gz をアップロードします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/2d2216a8-ed34-4be6-0a59-2d1904f1932b.png)

Cloud Shell で次のコマンドでアップロードした tar ball を解凍します（ファイル名は適宜読み替えてください）

```
tar zxvf vscode_cli_alpine_arm64_cli.tar.gz
```

## Pinggy の場合の手順

解凍された VS Code CLI の `code` を実行して VS Code をサーバモードで起動し、続けて、ssh で Pinggy のゲートウェイへトンネルを掘ります。

```
./code serve-web --without-connection-token --accept-server-license-terms & sleep 3 && ssh -p 443 -R0:localhost:8000 a.pinggy.io
```

トンネルを確立する過程で次のように聞かれますので `yes` と入力して Enter キーを押します

```
Are you sure you want to continue connecting (yes/no/[fingerprint])?
```

Pinggy へのトンネルが完成すると次のように表示されます

![piggy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/7102c1ef-54da-598f-36d4-231cbbd7f3e2.png)

https:// で始まる URL をクリックします

![piggy2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/7ddba19e-3cba-143e-4b9e-931224016005.png)

"Enter site" をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/f2577a63-eeea-f14c-cd15-f9c5333bfd30.png)

VS Code が使えるようになりました！

トンネルを閉じるには、 Cloud Shell で Shift キーを押しながら"q" を続けて2回打ちます

VS Code Server と node も片づけておきましょう
`ps` と `kill -9`
（もっとエレガントは方法ありそう...）

残っているプロセスがいると気持ち悪いので作業が終わったら Cloud Shell の「アクション」から再起動してしまうのがいいかもしれませんね。

__VS Code はターミナルを開くこともできますので第三者にアクセスされると大変です。トンネルがタイムアウトするまでの1時間は接続先のパブリックURLをネットに投稿したりしないように気を付けましょう！__

## Localtunnel の場合の手順
### Cloud Shell （から外に出ていくとき）の IP アドレスの確認

```
curl https://loca.lt/mytunnelpassword
```

この IP アドレスは、Localtunnel のパスワードとなります

### トンネルの確立と接続

次のコマンドで VS Code サーバを起動して、続けて npx コマンドで localtunnel のインストールとトンネル接続の確立を一気に行うことができます

```
./code serve-web --without-connection-token --accept-server-license-terms & sleep 3 && npx localtunnel --port 8000
```

トンネル接続が確立すると次のようにアクセス用の URL が表示されます。これをクリックします
```
your url is: https://xxxxxxxxxxxxxxx.loca.lt
```

![localtunnel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/835c62d9-e6cb-cfc5-8341-61e820e7a1cc.png)

"Tunnel Password" に、先程確認した Cloud Shell の IP アドレスを入力して、"Click to Submit" をクリックします

この IP アドレスは 7日間使用できるようです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74534/54f5d0aa-98a3-a74e-4a0d-b80e059160b5.png)

VS Code が使えるようになりました！

作業が終わったら Cloud Shell の「アクション」から再起動してしまへば何かプロセスが残っていたりする心配がなくていいかもしれません。

## えっと、あとがきです
Pinggy と Localtunnel を較べると Localtunnel の方が少し重いように感じます。また、最初の接続時に Bad Gateway が出て2回リロードしたら接続できました。Pinggy はインストールが不要な上、軽快に感じます。ただし、無償利用の場合は、接続時間は Localtunnel の方が長く使えます。Cursor がサーバモードに対応したら本格的に使ってみるかも...
それはそうと __くれぐれも Pinggy の URL や Localtunnel のパスワードを漏洩しないように気を付けないとですね！__

## おまけ

他にもいろいろ記事を書いていますので良かったらお立ち寄りください。

https://qiita.com/yuji-arakawa/items/28f30a5434ba429f3f16

https://qiita.com/yuji-arakawa/items/8d065ae3df536f5cd559

https://qiita.com/yuji-arakawa/items/fd4fd0c026ecfa664d97

https://qiita.com/yuji-arakawa/items/1a8cfeff8f81ba808389

https://qiita.com/yuji-arakawa/items/9cd485debd5b0d18aca2

https://qiita.com/yuji-arakawa/items/042937eaf16fa00cf491

https://qiita.com/yuji-arakawa/items/6d0299c505315bc3cdb0

https://qiita.com/yuji-arakawa/items/05e3455572d3b09a53dc

https://qiita.com/yuji-arakawa/items/2d4f6eff17a5410dba2d

https://qiita.com/yuji-arakawa/items/597c4bd9f3d5b4212b51

https://aws.amazon.com/jp/blogs/news/leveraging-pinecone-on-aws-marketplace-as-a-knowledge-base-for-amazon-bedrock/