AWS CloudShell上でVSCodeを動かすという発明

思いつきでやってみたらできました。

:::note warn
やってみたらできただけです。用法・用量を守って正しく使いましょう！
:::

## 使用するもの

* VSCode

おなじみのIDEです。VSCodeには、サーバーとして起動するオプションが用意されていますので、今回はその仕組を利用します。

* pinggy

プライベートネットワーク内のポートを一時的にパブリック公開するプロキシーをサービスとして提供しています。無料で利用することも可能です。

https://pinggy.io/

## 手順

1. AWS CloudShell( https://ap-northeast-1.console.aws.amazon.com/cloudshell/home )にアクセスします

    ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/63661a28-c2d0-e292-8255-a3c26ec15e0d.png)

1. VSCodeをインストールします

    ```shell
    curl -L "https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64" -o vscode_cli_alpine_x64_cli.tar.gz
    tar zxvf vscode_cli_alpine_x64_cli.tar.gz
    mkdir -p ~/.local/bin
    mv code ~/.local/bin/
    ```

1. VSCodeをサーバーとして起動します

    ```shell
    code serve-web --without-connection-token --accept-server-license-terms
    ```

    ```
    *
    * Visual Studio Code Server
    *
    * By using the software, you agree to
    * the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and
    * the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement).
    *
    Web UI available at http://127.0.0.1:8000
    ```

    8000番ポートで起動していることが確認できます

1. Pinggyを使い、8000番ポートに一時的なパブリックURLを付与します
    CloudShellウィンドウ内で、新しいターミナルを起動します（リージョン名のとなりの「＋」ボタンから追加できます

    ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/fa870f89-b550-3384-26e3-af141e74fe06.png)

    以下のコマンドを実行します

    ```shell
    ssh -p 443 -R0:localhost:8000 a.pinggy.io
    ```

    以下の質問には「yes」で回答します

    ```text
    The authenticity of host '[a.pinggy.io]:443 ([139.162.8.164]:443)' can't be established.
    RSA key fingerprint is SHA256:nFd5rfJMGuZXvfeRzJ/BtT3TfksAxTWMajcrHRcI7AM.
    This key is not known by any other names
    Are you sure you want to continue connecting (yes/no/[fingerprint])? 
    ```

    以下のように、URLが表示されます

    ```text
    You are not authenticated.
    Your tunnel will expire in 60 minutes. Upgrade to Pinggy Pro to get unrestricted tunnels. https://dashboard.pinggy.io
    
    http://rnmri-13-231-121-66.a.free.pinggy.link
    https://rnmri-13-231-121-66.a.free.pinggy.link
    ```

1. 表示されたhttpsで始まるURLにアクセスします
    注意書きが表示されるので、確認後「Enter site」をクリックします

    ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/04dbc306-5be6-8988-6985-181bfa9c886e.png)

    ブラウザ内で、VSCodeが表示されます

    ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/05e0f19d-003b-90c9-af05-60238000d501.png)

## さらに

同じ仕組みを使って、VSCode上でStreamlitを起動し、Pinggyで一時的にパブリックURLを付与することも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/f55f74a4-b6c3-8b35-9032-b786fc37cff9.png)


## CloudShellのリセット

CloudShellをもとの状態に戻したい場合は「アクション」メニューの「削除」を選択すると環境が綺麗サッパリなくなります。

![ap-northeast-1.console.aws.amazon.com_cloudshell_home_region=ap-northeast-1 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/24c164cc-66da-919c-c471-d4c821457ced.png)


## 注意点

CloudShellは、一定時間で自動停止されます。ちょっと試した感じではVSCodeが起動している間は停止しないような気もしますが、停止してしまう可能性がありますので注意してご利用ください。

https://docs.aws.amazon.com/cloudshell/latest/userguide/limits.html#session-lifecycle-limitations

Pinggyの無料プランでは、60分でタイムアウトになります。

https://pinggy.io/#prices