次の方法で共有


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

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

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

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

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

アルバム リスト UI マイクロサービスのスクリーンショット。

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

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

前提条件

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

セットアップ

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

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 CLI にサインインします。

az login
az acr login --name $ACR_NAME

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
    

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

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

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

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

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

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

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

    az acr login --name $ACR_NAME
    
  2. 次に、レジストリにイメージをプッシュします。

    
     docker push "$ACR_NAME.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 エンドポイント アドレスを照会します。

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

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

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

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

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 を示します。

Web サイトを表示する

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

アルバム リスト UI マイクロサービスのスクリーンショット。

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

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

注意事項

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

az group delete --name $RESOURCE_GROUP

ヒント

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

次のステップ