かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Visual Studio Online Public preview 試してみた!

変更履歴

  • サービス名を Visual Studio Code Online と間違えて書いていたので Visual Studio Online に修正しました。
  • セルフホストについて追記しました
  • 環境のカスタマイズについての記事へのリンクを追加

本文

Microsoft Ignite 2019 のキーノート見てたらまさかの!!ということで以下のページから試してみました。

online.visualstudio.com

f:id:okazuki:20191105004131p:plain

サインインして環境を作る

開始するを選ぶとサインインする画面になります。

f:id:okazuki:20191105004211p:plain

以下のように Azure サブスクリプションとかを選ぶようになったのですが課金は Azure いるのかなぁ???Azure サブスクリプション持ってない人がどういうフローになるのか気になる…。

f:id:okazuki:20191105005304p:plain

環境のカスタマイズとかは VS Code のリモート開発の devcontainer.json とかで出来るみたい!

docs.microsoft.com

とりあえず今回はそのまま作ってみた。そして、環境を作ります。Create environment ボタンから。ここで強いマシンか弱いマシンが選べます。弱いマシンでも Linux 4 cores, 8 GB RAM なのでとりあえず困らなさそう。

f:id:okazuki:20191105010152p:plain

ちなみに Azure ポータルを覗いてみたら VS Online のリソースが作られてました。

f:id:okazuki:20191105010325p:plain

料金

フルマネージドの環境を使う場合は課金されるという感じなので、無料で使える感じではないですね。

azure.microsoft.com

100 時間アクティブに使って月額 6,000 円いかないくらいが想定されてるみたいです。20 日稼働で毎日 6 時間開いたとしたら 120 時間なので、まぁもうちょっと行きそうかな?

自分のマシンの Visual Studio Code に Visual Studio Online 拡張機能を入れることで自分のマシンをセルフホストとして登録できるので、それを使うと0円運用もできますが、起動しておかないといけないのがちょっとネックかな。

開いてみよう

プランを作ると、こんな感じになるのでクリックすると…

f:id:okazuki:20191105010517p:plain

そのまんま Visual Studio Code の画面!ターミナルを開くショートカットやコマンドパレットのショートカットも効きます。

f:id:okazuki:20191105010613p:plain

なんとなく dotnet コマンド叩いてみると .NET Core 2.1 が入ってた。

f:id:okazuki:20191105010722p:plain

OS が気になったので確認してみたら Debian GNU.Linux 9 らしいです。

vsonline:~$ cat /usr/lib/os-release
PRETTY_NAME="Debian GNU/Linux 9 (stretch)"
NAME="Debian GNU/Linux"
VERSION_ID="9"
VERSION="9 (stretch)"
VERSION_CODENAME=stretch
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"

ローカルの VS Code の設定を同期

Settings Sync 拡張機能で設定を同期してるのですが、VS Online で Settings Sync を入れて LOGIN WITH GITHUB するとうまくできませんでした。なので Download Public Gist から Gist ID を指定して入れました。Gist ID は自分の Settings Sync で同期に使ってる Gist の URL の最後のランダムな文字列部分です。 (最初 URL をそのまま貼ってしまい失敗しました。)

こんな感じで色々勝手にインストールしてローカル環境と揃えてくれるのでありがたいです。

f:id:okazuki:20191105012318p:plain

.NET Core 3.0 を入れてみよう

なんとなく入れてみました。

dotnet.microsoft.com

ここらへんを手動でやったけど、devcontainer.json とかをちゃんと準備してるとやらなくていい感じなんだろうなぁきっと。 ということで入りました。

f:id:okazuki:20191105011549p:plain

せっかくなので Blazor のプロジェクトを作って実行してみたいと思います。

vsonline:~/workspace$ dotnet new blazor -o HelloBlazor

コマンドパレットから Open Folder を実行して開きます。

f:id:okazuki:20191105013010p:plain

ちゃんと C# 拡張機能が仕事してます。

f:id:okazuki:20191105013127p:plain

念のため Reload Window して、適当なファイルを開いてインテリセンスを試してみるとちゃんと動いてる。

f:id:okazuki:20191105013245p:plain

おもむろに F5 キーを押してデバッグしてみます。 自動的にポートフォワーディングしてくれそうな雰囲気を見せつつ、なんかダメでした。

f:id:okazuki:20191105013401p:plain

ちゃんと設定は出来てるっぽいのになぁ。後でドキュメント見てみよう。

f:id:okazuki:20191105013601p:plain

ということで、ローカルの Visual Studio Code に Visual Studio Online 拡張機能を入れて VS ONLINE に繋いてみました。VS Code Online の先にリモート開発機能でつないでる感じですね。

f:id:okazuki:20191105013700p:plain

こっちは普通のリモート開発と同じ要領で実行とデバッグ出来ました。

f:id:okazuki:20191105014026p:plain

感想

ブラウザーで VS Code が動くのはまじで便利ですね!iPad とかでも開発がはかどりそう(iPad Pro 手放しちゃった!!無念!!) まぁでも、普通はローカルの VS Code からリモート開発で使うかな。ブラウザーは補助的な立ち位置。何故なら当然の動作なのですがフォーカスの位置がブラウザーのウィンドウの方に行ってる状態で VS Code のショートカットを気持ちよくたたくとブラウザーがリフレッシュしたりプリントダイアログが出てきたりして、ちょっと悲しい気持ちになったりしたので、可能であるならローカルの VS Code を使った方が快適なのは間違いないです。

でも VS Code が入らない端末や、ほかの人のマシンのプライベートブラウズからでも自分の環境を触ろうと思えば触れるのは素敵。

ということでやってみたブログでした!

環境のカスタマイズとか

素敵記事があったのでリンク!

tsunomur.hateblo.jp