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

少し前ですが、VSCodeがオンラインで使える「Visual Studio Online」が[Public Preview](https://jp.techcrunch.com/2019/11/05/2019-11-05-you-can-now-try-microsofts-web-based-version-of-visual-studio/)になりました。 

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

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

> [CoderでオンラインVSCode環境を作る](https://tech.naitwo.me/entry/VSCode_Coder)


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

Self-hosted環境とは、VSCodeをインストールした環境をオンライン経由で使う構成。
ローカルにインストールしたVSCodeや、ブラウザからリモートのVSCode（Self-hosted環境）にアクセスできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/07cdb5b0-23cd-b2e1-e416-79d17c56113a.png)

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

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

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

![スクリーンショット 2019-12-10 22.11.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/93e25730-720b-c3c2-756b-ffb117a97dbc.png)
![スクリーンショット 2019-12-10 22.11.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/f59caeed-05a1-fb72-8c4d-2154962ff357.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/c7abb39c-9603-d81b-c05e-d50efd42c679.png)
## 2．VSCodeをインストール・設定
### リモート環境作業
Self-hosted環境としてVSCodeをホストする環境の作業です。

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

2．拡張機能[「Visual Studio Online」](https://marketplace.visualstudio.com/items?itemName=MS-vsonline.vsonline)をインストールします。


3．Command Panelを表示し「VS Online:Register Local Enviroment」を選択します。
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/7122669a-b939-7ebd-c4c5-0c8844cd38d6.png)
4．画面右下に以下の画面が表示されるので、ホームディレクトリとして使用するディレクトリを指定します。
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/b6e1322f-c3dc-8305-ac82-f78dfb6a50c8.png)
5．任意のSelf-hosted環境名を指定します。
※今回は<b>dev</b>としています
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/867ebfd7-9472-dbd7-1b7d-32621ab2741f.png)

6．以下の画面が表示されるので「OpenLink」をクリックし、Azureアカウントで認証を行います。
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/073a35ce-ccd1-be41-7c24-a9853ada9b31.png)

7．「1．プランの作成」で作成したプランを選択します。
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/1bb7ce11-0959-e09e-80dc-1dbadead7605.png)
### ローカル環境作業
Self-hosted環境へ接続するローカル環境の作業です。

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

2．拡張機能[「Visual Studio Online」](https://marketplace.visualstudio.com/items?itemName=MS-vsonline.vsonline)をインストールします。

3．インストールした拡張機能のアイコンが表示されるので、クリックし「Sign in to view environments...」をクリックします。
![スクリーンショット 2019-12-10 21.41.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/20291c61-185a-dadb-d364-ef36fe35b4cb.png)
4．以下の画面が表示されるので「OpenLink」をクリックし、Azureアカウントで認証を行います。
![スクリーンショット 2019-12-10 21.41.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/7a7dc004-dda7-5cea-b256-ca1182ca36ac.png)
5．”Self-hosted environments”に”リモート環境作業”で作成した環境名が表示されます。
![スクリーンショット 2019-12-10 21.41.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/f9b39314-cf7b-ddfd-844f-193b78e0ec35.png)
6．環境名を右クリックするとメニューが表示されるので、「Connect to Environment」をクリックします。
![スクリーンショット 2019-12-10 21.42.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/d72b5acf-9a84-bc71-8bcf-4dfc560cf720.png)
7．しばらくすると、Self-hosted環境のローカルファイルが表示され、接続が完了します。
![スクリーンショット 2019-12-10 21.42.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/5322b9ad-e31a-6ee2-e071-264a5044cef0.png)
画面左下に接続している環境名が表示されます。
![スクリーンショット 2019-12-10 21.58.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/bc72bf92-7c00-25d1-54da-505d6002ef2e.png)
8.拡張機能を表示すると、ローカルとリモート（Self-hosted環境）でインストールしている機能がそれぞれ表示されます。
![スクリーンショット 2019-12-10 21.42.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/3c797d8b-6739-0c90-e2e0-0b62b8249dc2.png)

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

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

　https://online.visualstudio.com/environments
![スクリーンショット 2019-12-10 21.43.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/8b5ea281-e62f-bb25-4b01-d280b39bd529.png)

2．下記画面のアイコンをクリックすると、メニューが表示されるので「Connect」をクリックします。
![スクリーンショット 2019-12-10 21.44.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/90046226-9f92-1734-e079-85f4472a63b6.png)

3．ブラウザでVSCodeが起動します。
![スクリーンショット 2019-12-10 21.44.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34809/b9f6b946-26c9-6e36-6428-1c74d97fe8d8.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/