Help us understand the problem. What is going on with this article?

「Visual Studio Online」をSelf-hosted環境で使う

少し前ですが、VSCodeがオンラインで使える「Visual Studio Online」がPublic Previewになりました。 

「Visual Studio Online」を使うことで、クラウドにホストされたVSCodeを使うことができ、ブラウザがあればどこにいても同じ開発環境にアクセスできるのが魅力です。

以前「Coder」というサービスを紹介しましたが、本家がオンライン版を出してくるとは・・。

CoderでオンラインVSCode環境を作る

SELF HOSTED環境

「Visual Studio Online」はクラウドにホストすることが基本ですが、Self-hosted(セルフホステッド)環境でも利用可能です。

Self-hosted環境とは、VSCodeをインストールした環境をオンライン経由で使う構成。
ローカルにインストールしたVSCodeや、ブラウザからリモートのVSCode(Self-hosted環境)にアクセスできます。
image.png

価格は?

ちなみに価格はこんな感じです。(米国西部2リージョンの場合)
クラウドホスト環境の場合はそれなりの費用がかかりますが、Self-hosted環境の場合は無料です。
※もちろん、クラウドに立てたサーバ等にホストする場合はその費用がかかります

クラウドでホストされた環境の場合、各環境インスタンスは消費された "環境ユニット" の数に基づいて課金されます。環境ユニットは、環境のインスタンス サイズ、環境がアクティブになっていた合計時間 (つまり、ユーザーがブラウザー ベースのエディターまたは Visual Studio Code などのクライアントから接続していた時間)、環境の合計有効期間 (基本ユニット) に従って計算されます。

環境ユニットの価格は ¥0.4032 です。

スクリーンショット 2019-12-10 22.11.00.png
スクリーンショット 2019-12-10 22.11.06.png
https://azure.microsoft.com/ja-jp/pricing/details/visual-studio-online/

今回はSelf-hosted環境で「Visual Studio Online」を利用する方法を紹介します。
*Azureアカウント作成後の手順から書いてます(アカウントない方は作ってください!!)

手順

それでは以下手順です。

1.プランの作成

*この作業をしないとSelf-hosted環境の登録ができません

1.以下のURLにアクセスして”Subscription”と"Location"を選択し、「Create」をクリックします。

 https://online.visualstudio.com/environments/plan

スクリーンショット 2019-12-10 21.35.31.png

2.VSCodeをインストール・設定

リモート環境作業

Self-hosted環境としてVSCodeをホストする環境の作業です。

1.端末やサーバ(Self-hosted環境として使用する端末)にVSCodeをインストールします。

2.拡張機能「Visual Studio Online」をインストールします。

3.Command Panelを表示し「VS Online:Register Local Enviroment」を選択します。
001.png
4.画面右下に以下の画面が表示されるので、ホームディレクトリとして使用するディレクトリを指定します。
002.png
5.任意のSelf-hosted環境名を指定します。
※今回はdevとしています
003.png

6.以下の画面が表示されるので「OpenLink」をクリックし、Azureアカウントで認証を行います。
004.png

7.「1.プランの作成」で作成したプランを選択します。
005.png

ローカル環境作業

Self-hosted環境へ接続するローカル環境の作業です。

1.端末にVSCodeをインストールします。

2.拡張機能「Visual Studio Online」をインストールします。

3.インストールした拡張機能のアイコンが表示されるので、クリックし「Sign in to view environments...」をクリックします。
スクリーンショット 2019-12-10 21.41.02.png
4.以下の画面が表示されるので「OpenLink」をクリックし、Azureアカウントで認証を行います。
スクリーンショット 2019-12-10 21.41.20.png
5.”Self-hosted environments”に”リモート環境作業”で作成した環境名が表示されます。
スクリーンショット 2019-12-10 21.41.56.png
6.環境名を右クリックするとメニューが表示されるので、「Connect to Environment」をクリックします。
スクリーンショット 2019-12-10 21.42.08.png
7.しばらくすると、Self-hosted環境のローカルファイルが表示され、接続が完了します。
スクリーンショット 2019-12-10 21.42.38.png
画面左下に接続している環境名が表示されます。
スクリーンショット 2019-12-10 21.58.54.png
8.拡張機能を表示すると、ローカルとリモート(Self-hosted環境)でインストールしている機能がそれぞれ表示されます。
スクリーンショット 2019-12-10 21.42.52.png

ブラウザで接続

ブラウザで接続する方法です。
これでインターネット環境とブラウザがあれば、どこからでもVSCode環境を利用できます。

1.下記URLにアクセスすると、作成した環境が表示されます。

 https://online.visualstudio.com/environments
スクリーンショット 2019-12-10 21.43.59.png

2.下記画面のアイコンをクリックすると、メニューが表示されるので「Connect」をクリックします。
スクリーンショット 2019-12-10 21.44.13.png

3.ブラウザでVSCodeが起動します。
スクリーンショット 2019-12-10 21.44.55.png

参考リンク

■What is Visual Studio Online?
https://docs.microsoft.com/en-us/visualstudio/online/overview/what-is-vsonline

■Visual Studio Online
https://online.visualstudio.com/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away