Azule＋Code ServerでVSCodeをブラウザで実行する Web App for Container編

<!— Azule＋Code ServerでVSCodeをブラウザで実行する Web App for Container編—>

Azureの App Serviceに、Code Serverをデプロイして、iPadや Chromebookなどのブラウザから、VS Codeを使うまでの道のりを紹介します。

Azureの無料サブスクリプションに登録

まずは、Azureのアカウントを作っておきましょう。クレジットカードの登録が必要ですが、初月は約25,000円分の無料枠が使え、さらにアカウントをアップグレードしない限りは、勝手に課金は発生しないので、割と安心して始められます。

登録は次のリンクから。
https://azure.microsoft.com/ja-jp/free/

WebAppにコンテナを作成

今回は、AzureポータルのCloud Shellから、コンテナベースのWebAppを作ります。

ポータルのCloud Shellアイコンをクリックし、「Bashl」モードに切り替えます。
※初回起動時は、ストレージアカウントの作成を求められるため作成を選択します。

コンソールが起動したら「B Shell」に次のコマンドで「docker compose」ファイルを作ります。

cat << EOD | tee codeserver.yaml
version: '3.3'

services:
  codeserver:
    image: 'codercom/code-server'
    restart: unless-stopped
    command: code-server
    ports:
      - "80:8443"
    environment:
      PASSWORD: "test"
    volumes:
      ./projects:/home/coder/project
      ./code-server:/home/coder/.local/share/code-server
EOD

Shellの変数に、リソースグループや、AppServie を作成するためのプラン・リージョン・価格タイプ（インスタンス）を定義しておきます。

# リソースグループ名
RESOURCE_GROUP="myresourse"

# リージョン（どこにデプロイするか）
# リージョンの一覧は「az account list-locations -o table」で確認できる
REGION="japanwest"

# AppService名(他のAzureユーザーも含めてユニークなサービス名である必要がある)
APP_NAME="cosesever-sample-xxxxx"

# AppServiceのプラン名
APP_PLAN_NAME="myPlan"

# インスタンスの種類
# F1:無料、B1〜3：Basic、S1〜3：Standard
# ※料金は「https://azure.microsoft.com/ja-jp/pricing/details/app-service/windows/」
INSTANCE="B1"

変数の準備ができたら、以降のコマンドを実行していってリソースを作成していきます。

まず、リソースグループを作成します。既にリソースグループを作成済みでそれを使う場合は以下のコマンドは実行不要です。

az group create --name $RESOURCE_GROUP --location $REGION

App Serviceのプランを作成します。

az appservice plan create \
  --name $APP_PLAN_NAME \
  --resource-group $RESOURCE_GROUP \
  --sku $INSTANCE \
  --is-linux

DockerコンテナのWeb Appを作成します。

az webapp create \
  --resource-group $RESOURCE_GROUP \
  --plan $APP_PLAN_NAME \
  --name $APP_NAME \
  --multicontainer-config-type compose \
  --multicontainer-config-file ~/codeserver.yaml

最後に、次のコマンドを実行して、永続的ストレージを有効化します。

az webapp config appsettings set \
  --resource-group $RESOURCE_GROUP \
  --name $APP_NAME \
  --settings WEBSITES_ENABLE_APP_SERVICE_STORAGE=TRUE

composeファイルを更新する

composeファイルを更新して、コンテナのデプロイを更新する場合は az webapp config containerコマンドを使用します。

az webapp config container set \
  --resource-group $RESOURCE_GROUP \
  --name $APP_NAME \
  --multicontainer-config-type compose \
  --multicontainer-config-file ~/codeserver.yaml

コンテナへSSHでアクセス

作成したコンテナへSSHでアクセスできるようにしておきましょう。

今回のような、composeを使用して作成したカスタム コンテナーの場合は、TCP トンネリングで、手元の発用マシンと Web App for Containers 間にネットワーク接続を作成できます。

まず、次のコマンドを実行して、リモート接続を開きます。$SUBSCRIPTION_ID、$RESOURCE_GROUP、$APP_NAMEは環境に合わせて変更します。

RESOURCE_GROUP="myresourse"
APP_NAME="cosesever-sample-xxxx"
SUBSCRIPTION_ID="xxxxxxxx-xxxx^xxxx^xxxx^xxxxxxxxxxxx"

az webapp create-remote-connection --subscription $SUBSCRIPTION_ID --resource-group $RESOURCE_GROUP -n $APP_NAME &

上のコマンドでエラーになった場合は、次のコマンドを入力してリモートデバッグを有効にします。

az webapp config set --resource-group $RESOURCE_GROUP -n $APP_NAME --remote-debugging-enabled=false

ログ記録の有効化

以下のコマンドでログ記録を有効化できます。ログを有効化するとログストリームからログをリアルタイムに確認できます。

az webapp log config --name $APP_NAME --resource-group $RESOURCE_GROUP --docker-container-logging filesystem

作成した環境の削除

リソースグループをまるごと削除することで、作成したリソース群をすべて削除できます。

az group delete --name $RESOURCE_GROUP

Web Appのみ個別に削除する場合は、次のコマンドを使用します。

Web Appの削除

az webapp delete --name $APP_NAME --resource-group $RESOURCE_GROUP

App Serviceプランの削除

az appservice plan delete --name $APP_PLAN_NAME  --resource-group $RESOURCE_GROUP