チュートリアル: Azure Container Apps でのマイクロサービス間の通信

イングレスが有効になっている場合、Azure Container Apps によりドメイン名を通して各コンテナー アプリが公開されます。 外部環境内のコンテナー アプリのイングレス エンドポイントは、パブリックにアクセスできるか、同じ環境内の他のコンテナー アプリでのみ使用できます。

特定のコンテナー アプリの完全修飾ドメイン名がわかったら、共有環境内の他のコンテナー アプリからサービスを直接呼び出すことができます。

このチュートリアルでは、「Azure Container Apps にコードをデプロイする」クイック スタートでデプロイされた API に対して直接サービス呼び出しを行う 2 つ目のコンテナー アプリをデプロイします。

次のスクリーンショットは、この記事の最後にあるコンテナー アプリへの UI マイクロサービスのデプロイを示しています。

このチュートリアルで学習する内容は次のとおりです。

• Azure Container Apps にフロントエンド アプリケーションをデプロイする
• 前のクイック スタートでデプロイした API エンドポイントにフロントエンド アプリをリンクする
• フロントエンド アプリがバックエンド API と通信できることを確認する

前提条件

コードからクラウドへのクイック スタートでは、音楽アルバムの一覧を返すバックエンド Web API がデプロイされます。 アルバム API マイクロサービスをデプロイしなかった場合は、Azure Container Apps へのコードのデプロイのクイック スタートに戻って続行します。

セットアップ

現在 Azure に対して認証されていて、クイック スタートから定義されている環境変数がある場合は、次の手順をスキップして、「GitHub リポジトリを準備する」セクションに直接進んでください。

Bash

bash シェルで次の変数を定義します。

RESOURCE_GROUP="album-containerapps"
LOCATION="canadacentral"
ENVIRONMENT="env-album-containerapps"
API_NAME="album-api"
FRONTEND_NAME="album-ui"
GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"

このコマンドを実行する前に、必ず <YOUR_GITHUB_USERNAME> を GitHub ユーザー名に置き換えてください。

次に、一意のコンテナー レジストリ名を定義します。

ACR_NAME="acaalbums"$GITHUB_USERNAME

Azure PowerShell

PowerShell コンソールで次の変数を定義します。

$ResourceGroup = "album-containerapps"
$Location = "canadacentral"
$Environment = "env-album-containerapps"
$APIName="album-api"
$FrontendName="album-ui"
$GITHUB_USERNAME = "<YOUR_GITHUB_USERNAME>"

このコマンドを実行する前に、必ず <YOUR_GITHUB_USERNAME> を GitHub ユーザー名に置き換えてください。

次に、一意のコンテナー レジストリ名を定義します。

$ACRName = "acaalbums"+$GITHUB_USERNAME

Azure CLI にサインインします。

Bash

az login

Azure PowerShell

Connect-AzAccount

Bash

az acr login --name $ACR_NAME

Azure PowerShell

az acr login --name $ACRName

GitHub リポジトリを準備する

1. 新しいブラウザー タブで、UI アプリケーションのリポジトリに移動し、ページの上部にある [フォーク] ボタンを選択して、リポジトリをアカウントにフォークします。

   GitHub の指示に従ってリポジトリをフォークし、操作が完了したらここに戻ります。

2. code-to-cloud フォルダーの親に移動します。 まだ code-to-cloud/src ディレクトリにいる場合は、次のコマンドを使用して親フォルダーに戻ることができます。

   cd ../..
   

3. 次の git コマンドを使用して、フォークされたリポジトリを code-to-cloud-ui フォルダーに複製します。

   git clone https://github.com/$GITHUB_USERNAME/containerapps-albumui.git code-to-cloud-ui
   

   注意

   clone コマンドが失敗した場合は、リポジトリが正常にフォークされたことを確認します。

4. 次に、複製されたリポジトリの src フォルダーにディレクトリを変更します。

   cd code-to-cloud-ui/src
   

フロントエンド アプリケーションをビルドする

Bash

az acr build --registry $ACR_NAME --image albumapp-ui .

Azure PowerShell

az acr build --registry $ACRName --image albumapp-ui .

az acr build コマンドからの出力には、ソース コードの Azure へのアップロードの進行状況と docker build 操作の詳細が表示されます。

1. 次のコマンドでは、アルバム UI のコンテナー イメージをビルドし、ACR ログイン サーバーの完全修飾名でタグ付けします。 コマンドの末尾の . は Docker ビルド コンテキストを表します。つまり、このコマンドは Dockerfile が配置されている src フォルダー内で実行する必要があります。

   Bash

   docker build --tag "$ACR_NAME.azurecr.io/albumapp-ui" . 
   

   Azure PowerShell

   docker build --tag "$ACRName.azurecr.io/albumapp-ui" . 
   

イメージを ACR レジストリにプッシュする

1. まず、Azure Container Registry にサインインします。

   Bash

   az acr login --name $ACR_NAME
   

   Azure PowerShell

   az acr login --name $ACRName
   

2. 次に、レジストリにイメージをプッシュします。

   Bash

   
    docker push "$ACR_NAME.azurecr.io/albumapp-ui" 
   

   Azure PowerShell

   
   docker push "$ACRName.azurecr.io/albumapp-ui"
   

コンテナー アプリ間で通信する

前のクイック スタートでは、コンテナー アプリを作成し、外部イングレスを有効にすることで、アルバム API がデプロイされました。 コンテナー アプリのイングレスを "外部" に設定すると、その HTTP エンドポイント URL が一般公開されました。

次の手順に従って、API エンドポイントを呼び出すフロントエンド アプリケーションを構成できます。

• API アプリケーションの完全修飾ドメイン名 (FQDN) を照会します。
• UI アプリがコード内でアルバム API 呼び出しのベース URL を設定できるように、API FQDN を環境変数として az containerapp create に渡します。

UI アプリケーションでは、提供されたエンドポイントを使用してアルバム API を呼び出します。 次のコードは、routes > index.js ファイルで使用されるコードからの抜粋です。

const api = axios.create({
  baseURL: process.env.API_BASE_URL,
  params: {},
  timeout: process.env.TIMEOUT || 5000,
});

baseURL プロパティの値を API_BASE_URL 環境変数から取得する方法に注目してください。

次のコマンドを実行して、API エンドポイント アドレスを照会します。

Bash

API_BASE_URL=$(az containerapp show --resource-group $RESOURCE_GROUP --name $API_NAME --query properties.configuration.ingress.fqdn -o tsv)

Azure PowerShell

$APIBaseURL = (Get-AzContainerApp -Name $APIName -ResourceGroupName $ResourceGroup).IngressFqdn

これでアルバム API の FQDN で API_BASE_URL 変数が設定されたので、それをフロントエンド コンテナー アプリに環境変数として指定できます。

フロントエンド アプリケーションをデプロイする

次のコマンドを使用して、コンテナー アプリを作成してデプロイします。

Bash

az containerapp create \
  --name $FRONTEND_NAME \
  --resource-group $RESOURCE_GROUP \
  --environment $ENVIRONMENT \
  --image $ACR_NAME.azurecr.io/albumapp-ui  \
  --target-port 3000 \
  --env-vars API_BASE_URL=https://$API_BASE_URL \
  --ingress external \
  --registry-server $ACR_NAME.azurecr.io \
  --query properties.configuration.ingress.fqdn

引数 --env-vars "API_BASE_URL=https://$API_ENDPOINT" を az containerapp create に追加することで、フロントエンド アプリケーションの環境変数を定義します。 この構文では、API_BASE_URL という名前の環境変数が API の FQDN に設定されます。

az containerapp create コマンドの出力は、フロントエンド アプリケーションの URL を示します。

Azure PowerShell

コンテナー アプリを作成するには、New-AzContainerApp コマンドに引数として渡すテンプレート オブジェクトを作成します。

コンテナー イメージ パラメーターを定義するテンプレート オブジェクトを作成します。 API_BASE_URL という名前の環境変数が API の FQDN に設定されます。

$EnvVars = New-AzContainerAppEnvironmentVarObject -Name API_BASE_URL -Value https://$APIBaseURL

$ContainerArgs = @{
  Name = $FrontendName
  Image = $ACRName + '.azurecr.io/albumapp-ui'
  Env = $EnvVars
}
$ContainerObj = New-AzContainerAppTemplateObject @ContainerArgs

レジストリ資格情報を取得するには、次のコマンドを実行します。

$RegistryCredentials = Get-AzContainerRegistryCredential -Name $ACRName -ResourceGroupName $ResourceGroup

レジストリ情報を定義するレジストリ資格情報オブジェクトと、レジストリ パスワードを定義するシークレット オブジェクトを作成します。 $RegistryObj の PasswordSecretRef は、$SecretObj の Name を参照します。

$RegistryArgs = @{
    Server = $ACRName + '.azurecr.io'
    PasswordSecretRef = 'registrysecret'
    Username = $RegistryCredentials.Username
}
$RegistryObj = New-AzContainerAppRegistryCredentialObject @RegistryArgs

$SecretObj = New-AzContainerAppSecretObject -Name 'registrysecret' -Value $RegistryCredentials.Password

環境 ID を取得します。

$EnvId = (Get-AzContainerAppManagedEnv -EnvName $Environment -ResourceGroup $ResourceGroup).Id

コンテナー アプリを作成します。

$AppArgs = @{
    Name = $FrontendName
    Location = $Location
    ResourceGroupName = $ResourceGroup
    ManagedEnvironmentId = $EnvId
    TemplateContainer = $ContainerObj
    ConfigurationRegistry = $RegistryObj
    ConfigurationSecret = $SecretObj
    IngressTargetPort = 3000
    IngressExternal = $true
}
$FrontEndApp = New-AzContainerApp @AppArgs

# show the app's FQDN

$FrontEndApp.IngressFqdn

Web サイトを表示する

コンテナー アプリの FQDN を使用して、Web サイトを表示します。 ページは次のスクリーンショットのようになります。

リソースをクリーンアップする

このアプリケーションの使用を継続しない場合は、次のコマンドを実行して、このクイックスタートで作成したすべてのリソースと共にリソース グループを削除します。

注意事項

次のコマンドを実行すると、指定したリソース グループとそれに含まれるすべてのリソースが削除されます。 指定したリソース グループにこのチュートリアルの範囲外のリソースが含まれている場合、それらも削除されます。

Bash

az group delete --name $RESOURCE_GROUP

Azure PowerShell

Remove-AzResourceGroup -Name $ResourceGroup -Force

ヒント

問題がある場合は、 GitHub の Azure Container Apps リポジトリでイシューを開いて、お知らせください。

次のステップ

Azure Container Apps の環境