Visual Studio OnlineにうまくログインできないのでAzureにCode Server建てた話

## はじめに

### 当初やりたかったこと

Visual Studio Online が使いたかった

### 結果

ログインがうまくできないのか、この画面から進まない

Sign inを押してログインしても必ずこの画面に戻る。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97156/0e3c16ab-7b2d-d044-1ccc-b87e191a790d.png)


さて、何が悪いのかわからない。
あえて言うならVisual Studio Enterprise MSDNのライセンスがあるくらい。


## その後・・・

男はこう考えた。

**「そうだ、自分で建てればいい――――」**

男は知っていた。

「Coder」というサービスがあるということを。

男は知っていた。

Azure App ServiceでDockerイメージを起動できることを。

## というわけで立ててみた

### 前提条件

#### どんな人が立てるか

- もはやエディタはVSCodeしか使わない勢
- Azureのサービスを立ち上げることに躊躇がない

#### 今の状況

VSCodeを使いたいんだけど、
手持ちにはイ〇シスで買った低スぺWinタブしかない。

### 用意するもの

- Azureのアカウント
- ブラウザ

### 使用したサービス

#### Azure App Service

VSCodeを実行するためのコンテナサービスを実行させる。

#### Azure File Storage

プロジェクトデータなどの保存を行う。

## 手順

### File Storageの準備

Azure Portalから「ストレージ　アカウント」を作成。

作成後、エクスプローラーを起動し以下のように2つのFile Sharesを追加。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97156/ef58eeed-d6c8-e8b3-bebc-a8928d81f662.png)


### App Serviceの準備

次に、App Serviceを起動します。

App Serviceのゴールとしては、以下のdocker runをトレースすること。

```shell
docker run -it \
   -p 127.0.0.1:8080:8080 \
   -v "${HOME}/.local/share/code-server:/home/coder/.local/share/code-server" \
   -v "$PWD:/home/coder/project" \
    codercom/code-server:v2
```

※このコマンドは[Github](https://github.com/cdr/code-server)より拝借。


#### App Serviceを作成

あまり深く考えずに作成します。

Azure Portal > App Service > 作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97156/4c28bd1a-299c-25ba-4f4f-52c36cf016c1.png)

ポイントとしては、インスタンスの詳細で以下のようにすること。

| 項目名| 内容 |
|---|---|
|公開| Docker コンテナ―|
|オペレーティングシステム| Linux |
|地域 | File Storegeの地域に合わせる |

プランはできればB2がよいでしょう。
試すだけならB1で十分かな？

あとはあまり深く考えずに作成。

### 作成したApp Serviceの設定

App Serviceを開き、「設定」 > 「構成」と選択します。

#### ポートの設定

code-serverのポートは8080なのですが、
App Serviceは80または443しか受け付けないため内部的にポートフォワードをしてあげます。

「アプリケーション設定」から、新しい設定を追加します。



| 項目 | 内容 |
|---|---|
| 名前 |WEBSITE_PORT|
| 値 |8080|


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97156/1a5c5d26-d06e-199a-54b1-b1f730ec95b8.png)

#### パスワードの設定

code-serverにアクセスするためのパスワードを設定します。
ポート情報同様に、アプリケーション設定を追加します。


|項目|内容|
|---|---|
|名前|PASSWORD|
|値|好きなパスワード|

#### ストレージの設定

今度は、ストレージのマウントをします。
マウントは、同じ「構成」メニューに「パスのマッピング」という項目があります。

以下の要領で、先ほど作成したディレクトリのマウントをしましょう。

|ストレージコンテナー|マウントパス|
|---|---|
|projects|/home/code/project|
|share|/home/coder/.local/share/code-server|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97156/3a4ef2fb-5ade-cc16-99f5-e37b6dcbf403.png)


### 設定が終わったら

念のため、一度再起動しましょう。

「概要」のメニューを選択すれば再起動するためのアイコンが見えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97156/59c25ec0-5bdc-63b1-c36e-a50c606ecdf4.png)


## ブラウザからアクセス

さて、ブラウザからアクセスしてみましょう。
URLは、<<アプリ名>>.azurewebsites.net です。
(概要メニューから確認できます。)

パスワードを入れて、以下の画面に遷移したら準備完了です。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f39373135362f33306264323737352d333136322d353037612d646636622d3933343430323962343562362e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97156/95e324d4-f919-d20f-f6d1-a65f7a15e8b8.png)

## ストレージのチェック

さて、これでデータが消えたりしたら悲しくて泣いてしまいます。
きちんとマウントされているか確認しましょう。

/home/coder/projects 内に適当なディレクトリを作成し、
適当なファイルを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97156/718bf4b4-0945-9f64-7cd6-e39272285771.png)

この状態で、Azure Storage Explorerを開きます。

きちんと保存されていますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97156/6f0ce6f3-e5df-a7ad-09ff-ed5b97e59c64.png)

## 使い勝手について

案外大丈夫そうです。
今はRe:VIEWの執筆環境として活用しています。
(本当に書くだけで、Azure DevOpsのPipelineに任せます)

あえて問題があるとすれば、ポートの問題があるのでWebアプリの開発には使えないということくらいでしょうか。

## VSCodeのカスタマイズについて

さて、今回作成した環境には何も入っていないので、
一からいれてあげる必要があります。

なーんて思ってたら

すごいちょうどいいAdvent Calendarがあったので、
勝手に参加させていただきました。

ここを参考にDocker Imageのカスタマイズをしていただければよいかと思います。

https://qiita.com/advent-calendar/2019/code-server