Python 백 엔드와 함께 JavaScript 프런트 엔드를 사용하도록 채팅 앱 업데이트

채팅 앱은 Azure OpenAI 서비스를 사용하는 방법을 보여 주는 참조 애플리케이션입니다. 각 프로그래밍 언어 참조 아키텍처는 약간 다른 기능을 제공합니다. 이 문서에서는 Python 백 엔드와 함께 JavaScript 프런트 엔드를 사용하는 방법을 설명합니다.

프런트 엔드와 백 엔드를 혼합하고 일치시켜 두 세계의 최고를 사용하는 다국어 애플리케이션을 만들 수 있습니다.

이 문서는 Azure OpenAI Service 및 Azure AI Search를 사용하여 채팅 앱을 빌드하는 방법을 보여 주는 문서 모음의 일부입니다. 컬렉션의 다른 문서는 다음과 같습니다.

참고 항목

이 문서에서는 문서의 예제 및 지침에 대한 기준으로 하나 이상의 AI 앱 템플릿을 사용합니다. AI 앱 템플릿은 AI 앱의 고품질 시작 지점을 보장하는 데 도움이 되는 잘 유지 관리되고 배포하기 쉬운 참조 구현을 제공합니다.

필수 조건

다음 문서를 사용하여 두 참조 아키텍처를 배포합니다. 두 배포에 대해 동일한 구독 및 지역을 사용해야 합니다. 배포에는 최대 20분이 걸릴 수 있습니다. 배포를 그대로 둡니다. 이 문서를 완료할 때까지 리소스 정리 섹션을 완료하지 마세요.

두 참조 아키텍처를 배포한 후에는 두 개의 전체 스택 앱이 배포됩니다. Python 백 엔드와 함께 JavaScript 프런트 엔드를 사용하려면 JS 프런트 엔드 및 PY 백 엔드에 대한 URL을 가져와서 다른 앱에서 구성해야 합니다.

각 리포지토리는 Codespaces에서 로컬로 별도의 개발 환경에 있어야 합니다.

JavaScript 개발 환경에서 다음 명령을 실행하여 JavaScript 프런트 엔드에 대한 URL을 가져옵니다.
```
azd env get-values | grep WEBAPP_URI
```
이 명령은 변수에 대한 모든 클라우드 환경 변수 및 필터를 WEBAPP_URI 가져옵니다. URL이 슬래시 /로 끝나지 않는지 확인합니다.
URL을 복사합니다.
Python 개발 환경에서 다음 명령을 실행하여 JavaScript 프런트 엔드에 대한 URL을 설정합니다.
```
azd env set ALLOWED_ORIGIN <FRONTEND-URL>
```
Python 개발 환경에서 다음 명령을 실행하여 Python 백 엔드를 다시 배포합니다.
```
azd up
```

Python 개발 환경에서 다음 명령을 실행하여 Python 백 엔드에 대한 URL을 가져옵니다.
```
azd env get-values | grep BACKEND_URI
```
이 명령은 변수에 대한 모든 클라우드 환경 변수 및 필터를 WEBAPP_URI 가져옵니다. URL이 슬래시 /로 끝나지 않는지 확인합니다.
URL을 복사합니다.
JavaScript 개발 환경에서 다음 명령을 실행하여 Python 백 엔드에 대한 URL을 설정합니다.
```
azd env set BACKEND_URI <BACKEND_URI>
```
Python 개발 환경에서 Python 개발 환경에서 다음 명령을 실행하여 Python 백 엔드를 다시 배포합니다.
```
azd up
```

Python 앱은 HR 혜택 주제 영역을 사용하고 JavaScript 앱은 부동산 주제 영역을 사용합니다. 이제 앱이 연결되었으므로 프런트 엔드를 사용하여 HR 혜택에 대해 물어볼 수 있습니다. 제안된 질문은 다음과 같습니다.

앱을 완료하면 더 많은 요금이 발생하지 않도록 리소스를 삭제할 수 있습니다.