Home›VS Code / Dev Env›AzureでAWS Cloud9みたいなブラウザIDEを作ってみた(Azure ML × VS Code for the Web)
AzureでAWS Cloud9みたいなブラウザIDEを作ってみた(Azure ML × VS Code for the Web)

AzureでAWS Cloud9みたいなブラウザIDEを作ってみた(Azure ML × VS Code for the Web)Building an AWS Cloud9-Like Browser IDE on Azure with Azure ML and VS Code for the Web

元記事を読むRead original articleqiita.com(新しいタブで開きます)(opens in a new tab)
AI2 点サマリ2 key points
  • Azure Machine Learningのコンピューティング インスタンスは、VS Code for the Webから接続してAzure上のVMでコードを実行できる。
  • 2コア・4GBのStandard_F2s_v2は約0.11ドル/時で、Cloud9の代替を求める開発者に役立つ。
  • Azure ML compute instances connect to VS Code for the Web and run code on an Azure VM.
  • The 2-core, 4 GB Standard_F2s_v2 is about $0.11/hour, giving developers a Cloud9 alternative.

本ページの本文と要約は AI による自動生成です。日本語版と英語版は言語ごとに独立して生成されるため、表現や詳しさが異なる場合があります。正確性は元記事 (qiita.com) をご確認ください。The body and summaries are AI-generated independently for each language, so wording and detail may differ. Verify accuracy at the original source (qiita.com).

要約と収集メタデータに基づく AI 解説。元記事全文の転載・翻訳ではありません。AI explainer based on the summaries and collected metadata, not a copy or translation of the full source article.

ブラウザIDE

AWSのCloud9は、マネジメントコンソールから開き、ローカルに何も導入せずクラウド環境で開発できるブラウザIDEです。2024年7月に新規利用の受付を終了しており、AzureではAzure Machine Learningのコンピューティング インスタンスとVS Code for the Webを組み合わせることで、同様にブラウザから開発環境へ接続できます。

実行の仕組み

画面はブラウザのvscode.devで動作しますが、コードの実行やターミナル処理はAzure上のVMが担います。作業はAzureポータルとAzure ML StudioのGUI操作だけで進められます。ローカル側ではなく、コンピューティング インスタンス上でVS Code ServerやPythonを動かす構成です。

VMサイズ選択

使用するVMにはStandard_F2s_v2が選ばれています。2コア、4GBで、作業時点の表示価格は約0.11ドル/時間です。最安だったStandard_DS1_v2は1コア、3.5GBで約0.10ドル/時間でしたが、VS Code ServerとPythonを同時に動かすには余裕が少ないと判断されています。

Standard_F2s_v2でも、何もしていない状態でfree -hを確認すると2.3GBを使用していました。3.5GBでも動くとは考えられるものの、余裕はあまりなさそうだと説明されています。

Azureでの作成

まずAzureポータルの「リソース グループ」から「+作成」を選び、名前をrg-aml-vscode-demo、リージョンをJapan Eastとして作成します。続いてポータル上部の検索から「Azure Machine Learning」を開き、「+作成」で新しいワークスペースを作成します。

Browser IDE on Azure

This setup creates an AWS Cloud9-like browser IDE on Azure by combining Azure Machine Learning with VS Code for the Web. It provides an alternative for developers seeking a cloud development environment after AWS Cloud9 stopped accepting new users in July 2024.

Cloud9 can be opened directly from the AWS Management Console and allows development in a cloud environment without installing anything locally. The Azure approach similarly uses browser-based access, with all setup performed through graphical interfaces in the Azure portal and Azure ML Studio.

VS Code for the Web

Azure Machine Learning compute instances can be accessed through VS Code for the Web. The interface runs in the browser at vscode.dev, while code execution and terminal processes run on a virtual machine hosted on Azure.

This separates the browser-based editing screen from the underlying compute environment. No local installation is required for the described workflow, and the development workloads execute on the Azure VM rather than in the browser itself.

Standard_F2s_v2

The selected VM size was Standard_F2s_v2, providing two cores and 4 GB of memory for about $0.11 per hour. It was chosen by opening “Select from all options” on the creation screen and sorting the available VM sizes from lowest to highest cost.

Standard_DS1_v2 was the least expensive option shown, with one core, 3.5 GB of memory, and a price of about $0.10 per hour. However, one core and 3.5 GB were considered limited for running VS Code Server and Python simultaneously. Standard_F2s_v2 offered two cores and 4 GB for nearly the same price.

A later check with free -h showed 2.3 GB in use while the environment was idle. The author says 3.5 GB would probably work, but with little available headroom. These prices reflect what was displayed when the setup was performed.

Azure Machine Learning Workspace

The setup begins in the Azure portal by creating a resource group named rg-aml-vscode-demo in the Japan East region. The next step is to search for Azure Machine Learning from the top of the portal and create a new workspace.

ポコとTECHガイドPoko & TECH Guide

ポコと当サイトのTECHガイドが、記事の要約と収集した情報から読みどころを語るAI生成の対話です。Poko and TECH Dashboard's own TECH Guide discuss the article's highlights in an AI-generated conversation based on its summary and collected source details.

  1. ポコPokoCloud9が2024年7月に新規利用の受付を終えたんだね。これって大きい変化?Cloud9 stopped accepting new users in July 2024. Is that a big change?
  2. TECHガイドTECH Guide新しくCloud9を使いたい人には影響があるね。この記事では、Azure MLとVS Code for the Webを代わりの選択肢にしているよ。It matters for developers hoping to start using Cloud9. The article presents Azure ML with VS Code for the Web as an alternative.
  3. ポコPokoブラウザIDEって、コードもブラウザの中で動くの?Does a browser IDE run the code inside the browser too?
  4. TECHガイドTECH Guideここでは画面がブラウザで、コードの実行やターミナルはAzure上のVMが担当する仕組みだよ。Here, the interface runs in the browser, while code and terminal commands run on an Azure VM.
  5. ポコPokoぼくなら、端末に何も入れずにブラウザからPythonを試す場所にしたいな。I’d use it to try Python from a browser without installing anything locally.
  6. TECHガイドTECH Guideその使い方に合いそうだね。選んだ2コア・4GBのVMは約$0.11/時間で、価格は作業時点の表示だよ。That seems to fit. The chosen 2-core, 4 GB VM was about $0.11 per hour, based on the price shown when the setup was done.
記事情報・収集記録Article details & collection record
出典Source
Qiita VSCodeコミュニティCommunity
公開日時 (JST)Published (JST)
収集日時 (JST)Collected (JST)
配信形式Format
ブログBlog
原文言語Source language
JA
重要度の位置づけImportance in this lane
InfoInformational(VS Code / Dev Env 58件中、同等以上 58件)(58 of 58 VS Code / Dev Env entries are equal or higher)
出典の平均重要度(掲載直近 30 件・最大 30 件)Source average (last 30 listed, up to 30)
1.7 / 31=情報 · 2=中 · 3=高1=Info · 2=Medium · 3=High
情報の寿命Half-life
中期 (チュートリアル)Medium-term (tutorial)

🔷VS Code / Dev Env の他の記事More from VS Code / Dev Envもっと見る →View more →

ページ上部へScroll to top