자습서: Azure Container Apps의 마이크로 서비스 간 통신
수신이 활성화된 경우 Azure Container Apps는 도메인 이름을 통해 각 컨테이너 앱을 노출합니다. 외부 환경 내의 컨테이너 앱에 대한 수신 엔드포인트는 공개적으로 액세스할 수 있거나 동일한 환경에 있는 다른 컨테이너 앱에서만 사용할 수 있습니다.
지정된 컨테이너 앱의 정규화된 도메인 이름을 알고 있으면 공유 환경 내의 다른 컨테이너 앱에서 서비스를 직접 호출할 수 있습니다.
이 자습서에서는 Azure Container Apps에 코드 배포 빠른 시작에서 배포된 API에 대한 서비스를 직접 호출하는 두 번째 컨테이너 앱을 배포합니다.
다음 스크린샷에서는 이 문서의 끝에서 컨테이너 앱에 배포되는 UI 마이크로 서비스를 보여줍니다.
이 자습서에서는 다음을 알아봅니다.
- Azure Container Apps에 프런트 엔드 애플리케이션 배포
- 프런트 엔드 앱을 이전 빠른 시작에서 배포된 API 엔드포인트에 연결
- 프런트 엔드 앱에서 백 엔드 API와 통신할 수 있는지 확인
필수 조건
코드-클라우드 빠른 시작에서는 음악 앨범 목록을 반환하기 위해 백 엔드 웹 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 리포지토리 준비
새 브라우저 탭에서 UI 애플리케이션용 리포지토리로 이동하고, 페이지 위쪽의 Fork(포크) 단추를 선택하여 리포지토리를 계정에 포크합니다.
GitHub의 프롬프트에 따라 리포지토리를 포크하고, 작업이 완료되면 여기로 돌아옵니다.
code-to-cloud 폴더의 부모 폴더로 이동합니다. 아직 code-to-cloud/src 디렉터리에 있는 경우 아래 명령을 사용하여 부모 폴더로 돌아갈 수 있습니다.
cd ../..다음 git 명령을 사용하여 포크된 리포지토리를 code-to-cloud-ui 폴더에 복제합니다.
git clone https://github.com/$GITHUB_USERNAME/containerapps-albumui.git code-to-cloud-ui참고 항목
clone명령이 실패하면 리포지토리를 성공적으로 포크했는지 확인합니다.다음으로, 디렉터리를 복제된 리포지토리의 src 폴더로 변경합니다.
cd code-to-cloud-ui/src
프런트 엔드 애플리케이션 빌드
az acr build --registry $ACR_NAME --image albumapp-ui .
az acr build 명령의 출력에서 Azure에 대한 소스 코드의 업로드 진행률과 docker build 작업의 세부 정보를 표시합니다.
다음 명령에서는 앨범 UI에 대한 컨테이너 이미지를 빌드하고 ACR 로그인 서버의 정규화된 이름으로 태그를 지정합니다. 명령 끝에 있는
.는 docker 빌드 컨텍스트를 나타냅니다. 즉, 이 명령은 Dockerfile이 있는 src 폴더 내에서 이 명령을 실행해야 합니다.docker build --tag "$ACR_NAME.azurecr.io/albumapp-ui" .
ACR 레지스트리에 이미지 푸시
먼저 Azure Container Registry에 로그인합니다.
az acr login --name $ACR_NAME이제 이미지를 레지스트리에 푸시합니다.
docker push "$ACR_NAME.azurecr.io/albumapp-ui"
컨테이너 앱 간 통신
이전 빠른 시작에서는 컨테이너 앱을 만들고 외부 수신을 사용하도록 설정하여 앨범 API를 배포했습니다. 컨테이너 앱의 수신이 external(외부)로 설정되면 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을 표시합니다.
웹 사이트 보기
컨테이너 앱의 FQDN을 사용하여 웹 사이트를 봅니다. 페이지는 다음 스크린샷과 유사합니다.
리소스 정리
이 애플리케이션을 계속 사용하지 않으려면 다음 명령을 실행하여 이 빠른 시작에서 만든 모든 리소스와 함께 리소스 그룹을 삭제합니다.
주의
이 명령은 지정된 리소스 그룹과 그 안에 포함된 모든 리소스를 삭제합니다. 지정된 리소스 그룹에 이 자습서의 범위에 속하지 않는 리소스가 포함된 경우 해당 리소스도 삭제됩니다.
az group delete --name $RESOURCE_GROUP
팁
문제가 있나요? Azure Container Apps 리포지토리에서 문제를 열어 GitHub에 알려주세요.