다음을 통해 공유

통신: Azure Communication Services 리소스 만들기

효과적인 통신은 성공적인 사용자 지정 비즈니스 애플리케이션에 필수적입니다. ACS(Azure Communication Services)를 사용하여 전화 통화, 라이브 채팅, 오디오/영상 통화, 이메일 및 SMS 메시징과 같은 기능을 애플리케이션에 추가할 수 있습니다. 앞서 Azure OpenAI가 전자 메일 및 SMS 메시지에 대한 완성을 생성하는 방법을 알아보았습니다. 이제 메시지를 보내는 방법을 알아봅니다. ACS와 OpenAI는 함께 통신을 간소화하고 상호 작용을 개선하며 비즈니스 생산성을 향상시켜 애플리케이션을 향상시킬 수 있습니다.

이 연습에서 다음을 수행합니다.

  • ACS(Azure Communication Services) 리소스를 만듭니다.
  • 통화 및 SMS 기능이 있는 무료 전화 번호를 추가합니다.
  • 전자 메일 도메인을 연결합니다.
  • 프로젝트의 .env 파일을 ACS 리소스의 값으로 업데이트합니다.

Microsoft 클라우드 시나리오 개요

Azure Communication Services 리소스 만들기

  1. 브라우저에서 Azure Portal 을 방문하여 아직 로그인하지 않은 경우 로그인합니다.

  2. 페이지 맨 위에 있는 검색 창에 통신 서비스를 입력하고 표시되는 옵션에서 Communication Services를 선택합니다.

    Azure Portal의 ACS

  3. 도구 모음에서 만들기 를 선택합니다.

  4. 다음 작업을 수행합니다.

    • Azure 구독을 선택합니다.
    • 사용할 리소스 그룹을 선택합니다(없는 경우 새 리소스 그룹 만들기).
    • ACS 리소스 이름을 입력합니다. 고유한 값이어야 합니다.
    • 데이터 위치를 선택합니다.

  5. 검토 + 만들기를 선택한 다음 만들기를 선택합니다.

  6. 새 Azure Communication Services 리소스를 성공적으로 만들었습니다. 다음으로 전화 통화 및 SMS 기능을 사용하도록 설정합니다. 또한 전자 메일 도메인을 리소스에 연결합니다.

전화 통화 및 SMS 기능 사용

  1. 전화 번호를 추가하고 전화 번호에 통화 기능이 사용하도록 설정되어 있는지 확인합니다. 이 전화 번호를 사용하여 앱에서 전화를 겁니다.

    • 리소스 메뉴에서 전화 통신 및 SMS -->전화 번호를 선택합니다.

    • 도구 모음에서 + 가져오기 를 선택하거나 숫자 가져오기 단추를 선택하고 다음 정보를 입력합니다.

      • 국가 또는 지역: United States
      • 숫자 유형: Toll-free

      비고

      무료 번호를 만들려면 Azure 구독에 신용 카드가 필요합니다. 파일에 카드가 없는 경우 전화 번호 추가를 건너뛰고 전자 메일 도메인을 연결하는 연습의 다음 섹션으로 이동하세요. 앱을 계속 사용할 수 있지만 전화 번호로 전화를 걸 수는 없습니다.

      • 번호: 나열된 전화 번호 중 하나에 대해 카트에 추가 를 선택합니다.

  2. 다음을 선택하고 전화 번호 세부 정보를 검토한 다음지금 구입을 선택합니다.

    비고

    이제 미국 및 캐나다에서 무료 번호에 대한 SMS 확인이 필수입니다. SMS 메시징을 사용하도록 설정하려면 전화 번호 구매 후 확인을 제출해야 합니다. 이 자습서는 해당 프로세스를 거치지 않지만 리소스 메뉴에서 전화 통신 및 SMS -->규제 문서를 선택하고 필요한 유효성 검사 설명서를 추가할 수 있습니다.

  3. 전화 번호가 만들어지면 이를 선택하여 기능 패널로 연결 합니다 . 다음 값이 설정되어 있는지 확인합니다(기본적으로 설정해야 합니다).

    • 통화 섹션에서 .를 선택합니다Make calls.
    • SMS 섹션에서 .를 선택합니다Send and receive SMS.
    • 저장을 선택합니다.

  4. 나중에 사용할 수 있는 파일로 전화 번호 값을 복사합니다. 전화 번호는 다음과 같은 일반적인 패턴을 +12345678900따라야 합니다.

전자 메일 도메인 연결

  1. 다음 작업을 수행하여 전자 메일을 보낼 수 있도록 ACS 리소스에 연결된 전자 메일 도메인을 만듭니다. 앱에서 전자 메일을 보내는 데 사용됩니다.

    • 리소스 메뉴에서 전자 메일 -->도메인 을 선택합니다.
    • 도구 모음에서 연결 도메인 을 선택합니다.
    • 구독 및 리소스 그룹을 선택합니다.
    • 전자 메일 서비스 드롭다운에서 .를 선택합니다Add an email service.
    • 전자 메일 서비스에 다음과 같은 acs-demo-email-service이름을 지정합니다.
    • 검토 + 만들기를 선택한 다음 만들기를 선택합니다.
    • 배포가 완료되면 선택하고 Go to resource무료 Azure 하위 도메인을 추가하도록 선택합니다 1-click add .
    • 하위 도메인이 추가된 후(배포하는 데 몇 분 정도 소요됨) 선택합니다.
    • AzureManagedDomain 화면이 표시되면 리소스 메뉴에서 메일 서비스 -->MailFrom 주소를 선택합니다.
    • MailFrom 값을 파일에 복사합니다. 나중에 .env 파일을 업데이트할 때 사용합니다.
    • Azure Communication Services 리소스로 돌아가서 리소스 메뉴에서 이메일 -->도메인 을 선택합니다.
    • 이전 단계의 Add domain 값을 선택하고 MailFrom 입력합니다(올바른 구독, 리소스 그룹 및 전자 메일 서비스를 선택했는지 확인). Connect 단추를 선택합니다.

.env 파일 업데이트

  1. 이제 ACS 전화 번호(통화 및 SMS 사용) 및 전자 메일 도메인이 준비되었으므로 프로젝트의 .env 파일에서 다음 키/값을 업데이트합니다.

    ACS_CONNECTION_STRING=<ACS_CONNECTION_STRING>
ACS_PHONE_NUMBER=<ACS_PHONE_NUMBER>
ACS_EMAIL_ADDRESS=<ACS_EMAIL_ADDRESS>
CUSTOMER_EMAIL_ADDRESS=<EMAIL_ADDRESS_TO_SEND_EMAIL_TO>
CUSTOMER_PHONE_NUMBER=<UNITED_STATES_BASED_NUMBER_TO_SEND_SMS_TO>

    • ACS_CONNECTION_STRING connection string: ACS 리소스의 키 섹션에 있는 값입니다.

    • ACS_PHONE_NUMBER: 무료 번호를 값에 ACS_PHONE_NUMBER 할당합니다.

    • ACS_EMAIL_ADDRESS: 전자 메일 "MailTo" 주소 값을 할당합니다.

    • CUSTOMER_EMAIL_ADDRESS: 앱에서 전자 메일을 보내려는 전자 메일 주소를 할당합니다(앱 데이터베이스의 고객 데이터는 샘플 데이터일 뿐이므로). 개인 전자 메일 주소를 사용할 수 있습니다.

    • CUSTOMER_PHONE_NUMBER: SMS 메시지를 보내기 위해 다른 국가/지역에서 필요한 추가 확인으로 인해 미국 기반 전화 번호(현재)를 제공해야 합니다. 미국 기반 번호가 없으면 비워 둘 수 있습니다.

애플리케이션 및 API 서버 시작/다시 시작

이 시점까지 완료한 연습에 따라 다음 단계 중 하나를 수행합니다.

  • 이전 연습에서 데이터베이스, API 서버 및 웹 서버를 시작한 경우 API 서버 및 웹 서버를 중지하고 다시 시작하여 .env 파일 변경 내용을 선택해야 합니다. 데이터베이스를 실행 상태로 둘 수 있습니다.

    API 서버 및 웹 서버를 실행하는 터미널 창을 찾아 Ctrl+C 를 눌러 중지합니다. 각 터미널 창에 입력하고 npm start Enter 키를 눌러 다시 시작 합니다. 다음 연습을 계속합니다.

  • 데이터베이스, API 서버 및 웹 서버를 아직 시작하지 않은 경우 다음 단계를 완료합니다.

    1. 다음 단계에서는 Visual Studio Code에서 세 개의 터미널 창을 만듭니다.

      Visual Studio Code의 터미널 창 3개

    2. Visual Studio Code 파일 목록에서 .env 파일을 마우스 오른쪽 단추로 클릭하고 통합 터미널에서 열기를 선택합니다. 계속하기 전에 터미널이 프로젝트의 루트인 openai-acs-msgraph 에 있는지 확인합니다.

    3. 다음 옵션 중 하나를 선택하여 PostgreSQL 데이터베이스를 시작합니다.

      • Docker Desktop을 설치하고 실행 중인 경우 터미널 창에서 실행하고 docker-compose upEnter 키를 누릅니다.

      • Podman-compose가 설치되고 실행 중인 Podman이 있는 경우 터미널 창에서 실행하고 podman-compose upEnter 키를 누릅니다.

      • Docker Desktop, Podman, nerdctl 또는 설치한 다른 컨테이너 런타임을 사용하여 PostgreSQL 컨테이너를 직접 실행하려면 터미널 창에서 다음 명령을 실행합니다.

        • Mac, Linux 또는 Linux용 Windows 하위 시스템(WSL):

          [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres

        • PowerShell이 있는 Windows:

          [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres

    4. 데이터베이스 컨테이너가 시작되면 Visual Studio Code +의 아이콘을 눌러 두 번째 터미널 창을 만듭니다.

      터미널 도구 모음의 Visual Studio Code + 아이콘입니다.

    5. cd 서버/typescript 폴더로 이동하고 다음 명령을 실행하여 종속성을 설치하고 API 서버를 시작합니다.

      • npm install
      • npm start

    6. + Visual Studio Code 터미널 도구 모음에서 아이콘을 다시 눌러 세 번째 터미널 창을 만듭니다.

    7. cd 클라이언트 폴더에 다음 명령을 실행하여 종속성을 설치하고 웹 서버를 시작합니다.

      • npm install
      • npm start

    8. 브라우저가 시작되고 이 브라우저로 이동 http://localhost:4200됩니다.

      Azure OpenAI를 사용하도록 설정된 애플리케이션 스크린샷

다음 단계

통신: 전화 걸기