はじめに
当初やりたかったこと
Visual Studio Online が使いたかった
結果
ログインがうまくできないのか、この画面から進まない
Sign inを押してログインしても必ずこの画面に戻る。
さて、何が悪いのかわからない。
あえて言うなら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を追加。
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 > 作成
ポイントとしては、インスタンスの詳細で以下のようにすること。
| 項目名 | 内容 |
|---|---|
| 公開 | Docker コンテナ― |
| オペレーティングシステム | Linux |
| 地域 | File Storegeの地域に合わせる |
プランはできればB2がよいでしょう。
試すだけならB1で十分かな？
あとはあまり深く考えずに作成。
作成したApp Serviceの設定
App Serviceを開き、「設定」 > 「構成」と選択します。
ポートの設定
code-serverのポートは8080なのですが、
App Serviceは80または443しか受け付けないため内部的にポートフォワードをしてあげます。
「アプリケーション設定」から、新しい設定を追加します。
| 項目 | 内容 |
|---|---|
| 名前 | WEBSITE_PORT |
| 値 | 8080 |
パスワードの設定
code-serverにアクセスするためのパスワードを設定します。
ポート情報同様に、アプリケーション設定を追加します。
| 項目 | 内容 |
|---|---|
| 名前 | PASSWORD |
| 値 | 好きなパスワード |
ストレージの設定
今度は、ストレージのマウントをします。
マウントは、同じ「構成」メニューに「パスのマッピング」という項目があります。
以下の要領で、先ほど作成したディレクトリのマウントをしましょう。
| ストレージコンテナー | マウントパス |
|---|---|
| projects | /home/code/project |
| share | /home/coder/.local/share/code-server |
設定が終わったら
念のため、一度再起動しましょう。
「概要」のメニューを選択すれば再起動するためのアイコンが見えます。
ブラウザからアクセス
さて、ブラウザからアクセスしてみましょう。
URLは、<<アプリ名>>.azurewebsites.net です。
(概要メニューから確認できます。)
パスワードを入れて、以下の画面に遷移したら準備完了です。
ストレージのチェック
さて、これでデータが消えたりしたら悲しくて泣いてしまいます。
きちんとマウントされているか確認しましょう。
/home/coder/projects 内に適当なディレクトリを作成し、
適当なファイルを作成します。
この状態で、Azure Storage Explorerを開きます。
きちんと保存されていますね。
使い勝手について
案外大丈夫そうです。
今はRe:VIEWの執筆環境として活用しています。
(本当に書くだけで、Azure DevOpsのPipelineに任せます)
あえて問題があるとすれば、ポートの問題があるのでWebアプリの開発には使えないということくらいでしょうか。
VSCodeのカスタマイズについて
さて、今回作成した環境には何も入っていないので、
一からいれてあげる必要があります。
なーんて思ってたら
すごいちょうどいいAdvent Calendarがあったので、
勝手に参加させていただきました。
ここを参考にDocker Imageのカスタマイズをしていただければよいかと思います。