AWS Amazon Connect App @amazon-connect/app 설정

Amazon Connect Agent Workspace의 document를 참고하였고  React에 올려서 테스트하였다.

 

1. React app 생성

https://seokbong.tistory.com/116

React node로 react app 만들기 및 실행

 

2. Amazon-connect/app설치

// 생성한 React app 내부 진입 후
npm install --save @amazon-connect/app

 

3. AmazonConnectApp 불러오기

생성한 React App 내부 path : ./src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 초기 설정된 Index.js 에서 하단 코드 추가 =======================
import { AmazonConnectApp } from "@amazon-connect/app";

const { connectApp } = AmazonConnectApp.init({
  onCreate: (event) => {
    const { appInstanceId } = event.context;
    console.log('App initialized: ', appInstanceId);
  },
  onDestroy: (event) => {
    console.log('App being destroyed');
  },
});
// =========================================================

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

4. 실행

npm start

 

 

5. 콘솔 확인

AWS Connect에 올리지 않은 경우(일반적인 로컬 환경에서는) 아래와 같은 경고문구 발생

(해당 에러가 발생해야 정상적으로 작동하는 것)

Ref [2]의 하단 참조

 

 

6. build

npm run build

---

Ref.

[1] https://docs.aws.amazon.com/agentworkspace/latest/devguide/getting-started-create-application.html

Creating your application - Agent Workspace

[2] https://docs.aws.amazon.com/agentworkspace/latest/devguide/getting-started-initialize-sdk.html

Initialize the SDK in your application - Agent Workspace