49
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

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

使用するもの

  • VSCode

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

  • pinggy

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

手順

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

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

    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/
    
  3. VSCodeをサーバーとして起動します

    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番ポートで起動していることが確認できます

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

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

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

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

    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が表示されます

    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
    
  5. 表示されたhttpsで始まるURLにアクセスします
    注意書きが表示されるので、確認後「Enter site」をクリックします

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

さらに

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

image.png

CloudShellのリセット

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

ap-northeast-1.console.aws.amazon.com_cloudshell_home_region=ap-northeast-1 (2).png

注意点

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

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

49
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
49
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?