はじめに

すでに一月以上経ってしまいましたが、2021年11月にAzure Container Appsのパブリックプレビュー版が公開されたので、試してみました。

まだ少ないですがすでにポータル上で試している記事はいくつか見かけたので、今回はazure-cliで構築してみようと思います。

デプロイするコンテナイメージのサンプルもありますが、自分でやった感を出すためにVue.jsのDockerアプリをデプロイしていきます。

基本的には公式のチュートリアルをなぞりながら、ちょっとアレンジを入れたり、気づきを書いています。

Azure Container Appsとは

詳しくは公式ドキュメントやしばやん様の記事を御覧ください。

• Azure Container Apps のドキュメント _ Microsoft Docs
• Container Apps カテゴリーの記事一覧 - しばやん雑記

要するに「サーバレスに複数コンテナをホストできるサービス」です。

Web App for ContainerとAzure Kubernetes Serviceの中間といった印象で、クラウドネイティブにマイクロサービスをより手軽に構築できそうな予感がします。

検証環境

• pc: macbook pro 13(2020)
• terminal: zsh
• azure-cli: v2.31.0
• docker: v20.10.8
• vue-cli: v4.5.15

事前準備 - Vue.jsのdockerイメージをACRにプッシュする

Container Appsを構築する前にデプロイするDockerイメージとイメージを収納するAzure Container Registoryを作成します。

コンテナイメージのサンプルを使うよ、すでにレジストリにあるイメージを使うよって人には関係ないので次の見出しまで読み飛ばしてください。

Vue3のアプリの作成

今回はVue.jsのDockerアプリをデプロイするのでまずはvue-cliで適当にアプリを作成します。

なんとなく使ったことがないのでバージョンはVue3でパッケージ管理にはyarnを選択しました。

vue-cli

 vue create testcontainerapps
 
 Vue CLI v4.5.15
? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)

ディレクトリが作成されたらyarn serveで確認しましょう。 localhost:8080でvueのデフォルトの画面が確認できます。

cd testcontainerapps
yarn serve

Dockerイメージの作成

vueアプリが準備できたらコンテナ化するためのDockerfileを作ります。

Vue.jsの公式ページからDockerfileを拝借して、npmのところをyarnに直します。

zsh

touch Dockerfile

Dockerfile

FROM node:lts-alpine
RUN yarn global add http-server
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY . .
RUN yarn build
EXPOSE 8080
CMD [ "http-server", "dist" ]

Dockerfileを作成したらdoker buildを実行しましょう。

sudo docker build --no-cache -t testcontainerapps.azurecr.io/testcontainerapps:01 ./

Azure Container Registoryの作成とイメージのプッシュ

dockerイメージが作成されたらイメージをプッシュするAzure Container Registoryを作成してdocker loginしておきましょう。

azure-cli

az acr create --name testcontainerapps --location japaneast --resource-group testcontainerapps --sku basic
az acr login --name testcontainerapps

ログインできたら、先程ビルドしたイメージをpushします。

sudo docker push testcontainerapps.azurecr.io/testcontainerapps:01

後々利用するので管理ユーザーを有効にしてパスワードを取得しておきます。

azure-cli

az acr update -n testcontainerapps --admin-enabled true
az acr credential show --name testcontainerapps

Azure ContainerAppsの作成

DockerイメージをACRに配置できたら、いよいよContainer Appsを構築していきます。

リソースグループを作成しておきましょう。

az group create --name "testcontainerapps" -l "JapanEast"

containerappコマンドの取得

まずはazure-cliでcontainerappを操作できるように拡張機能を入れます。

azure-cli

az upgrade
az extension add --source https://workerappscliextension.blob.core.windows.net/azure-cli-extension/containerapp-0.2.0-py2.py3-none-any.whl

リソースグループを作成

az group create --name "testcontainerapps" -l "JapanEast"

Log Analytics Workspaceの作成

Azure Container Appの環境にはログアナリティクスワークスペースが必須らしいので、作成します。

後でCustomerIDとClientSecretが必要になるので取得しておきます。

az monitor log-analytics workspace create \
  --resource-group testcontainerapps \
  --workspace-name testcontainerappslog

CustomerIDを取得

az monitor log-analytics workspace show --query customerId -g testcontainerapps -n testcontainerappslog --out tsv

ClientSecretを取得

az monitor log-analytics workspace get-shared-keys --query primarySharedKey -g testcontainerapps -n testcontainerappslog --out tsv

Container Apps Envの作成

containerapp envを作成します。

az containerapp env create \
  --name testcontainerappenv \
  --resource-group testcontainerapps \
  --logs-workspace-id  \
  --logs-workspace-key  \
  --location "canadacentral"

--logs-workspace-idと--logs-workspace-key は必須パラメータなので先程取得したLogAnalyticsWorkspaceのCustomerIDとClientSecretをそれぞれ入れましょう。

最初は脳死で東日本を指定したのですが、まだプレビューなので当然ですが対応していないようで下記のようなエラーが出ました。

LocationNotAvailableForResourceType: The provided location 'japaneast' is not available for resource type 'Microsoft.Web/kubeEnvironments'. List of available regions for the resource type is 'northcentralusstage,westcentralus,eastus,westeurope,jioindiawest,northeurope,canadacentral'.

対応リージョンは下記の通りらしいですが、ポータル上ではnortheuropeとcanadacentralしか選択できません。

• northcentralusstage
• westcentralus
• eastus
• westeurope
• jioindiawest
• northeurope
• canadacentral

今回はチュートリアルと同じcanadacentralにリソースを構築しました。

リソースが作成されると色々プロパティが表示されます。

"type": "Microsoft.Web/kubeenvironments"とあるように裏側でk8s的な何かが動いていそうなことが想像できますね。

Azure Container Appsのデプロイ

最後にいよいよコンテナアプリを作成します。

これまでに指定したACRのアクセス情報やcontainerapp envの情報を入れてコマンドを実行します。

Dockerのポートを8080にしていたので、target-portも8080を指定します。

az containerapp create \
  --name testcontainerapps \
  --resource-group testcontainerapps \
  --environment testcontainerappenv \
  --registry-login-server testcontainerapps.azurecr.io \
  --registry-password  \
  --registry-username testcontainerapps \
  --image testcontainerapps.azurecr.io/testcontainerapps:01 \
  --target-port 8080 \
  --ingress 'external' \
  --query configuration.ingress.fqdn

ContainerAppsの作成に成功するとazurecontainerapps.ioで終わるドメインが表示されます。 ブラウザでそのドメインにアクセスするとVue.jsのデフォルトの画面が表示され、無事アプリがデプロイされたことが確認できました。

リソースのクリーンアップ

一通り検証できたらリソースグループを消しておきましょう。

プレビュー版なので料金はかからないはずですが、なにげにContainer RegistoryややLog Analyticsがいるので課金されるはずです。

azure-cli

az group delete --name testcontainerapps

終わりに

今回はAzure Conatainer Appsのお試しがてらVue.jsのアプリをデプロイしてみました。

サーバレスな複数コンテナ実行環境ということで、AKSのPaaS版といった印象で非常に期待できるサービスだなと感じました。

じゃあ、複数コンテナデプロイはどうやるの〜とか、CI/CDはどうするの〜とか、ingressは〜とか、いろいろ気になるので、引き続き検証していこうと思います。

参考

• Azure Container Apps のドキュメント _ Microsoft Docs
• クイック スタート_ 最初のコンテナー アプリをデプロイする _ Microsoft Docs
• Container Apps カテゴリーの記事一覧 - しばやん雑記
• Azure Container Appsを試してみた - APC 技術ブログ
• github