LoginSignup
3
4

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-07

はじめに

当初やりたかったこと

Visual Studio Online が使いたかった

結果

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

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

image.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

App Serviceの準備

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

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

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より拝借。

App Serviceを作成

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

Azure Portal > App Service > 作成

image.png

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

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

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

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

作成したApp Serviceの設定

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

ポートの設定

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

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

項目 内容
名前 WEBSITE_PORT
8080

image.png

パスワードの設定

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

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

ストレージの設定

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

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

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

image.png

設定が終わったら

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

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

image.png

ブラウザからアクセス

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

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f39373135362f33306264323737352d333136322d353037612d646636622d3933343430323962343562362e706e67.png

ストレージのチェック

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

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

image.png

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

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

image.png

使い勝手について

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

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

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

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

なーんて思ってたら

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

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

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4