Reactアプリにamazon-connect-streamsを組み込む #React

amazon-connect-streamsとは？

Amazon Connect Streams API（Streams）を使用すると、既存のWebアプリケーションをAmazon Connectと統合することができます。Streamsを使用すると、Contact Control Panel（CCP）UIコンポーネントをページに埋め込むことや、エージェントおよびコンタクト状態イベントを直接処理することで、オブジェクト指向のイベント駆動型インタフェースを通じてエージェントおよびコンタクト状態を制御できます。

https://github.com/aws/amazon-connect-streams

単純なサンプルはネット上で見つかりますが、Reactアプリに組み込んで使用するには試行錯誤が必要でしたので、手順をまとめます。

環境

OS: macOS Mojave (10.14.5)
Node: v11.15.0 (v12だとamazon-connect-streamsのbuildでエラーが発生)
npm: v6.10.1
create-react-app: v3.0.1

事前作業

Amazon S3にバケットを作成し、CloudFront経由で公開し、URLを承認済みオリジンに登録します。 (HTTPSでアクセスする必要があるため)

参考: AmazonConnectをシステム上に埋め込んで活用してみた (https://qiita.com/miTsuKow/items/2ec4feec6dc6bc7d6c8b)

手順

Reactプロジェクトを作成しamazon-connect-streamsをインストール

GitHubからamazon-connect-streamsをcloneしてbuildします。 (2019/7/15現在、npmで公開されていません)
ローカルでbuildしたモジュールを npm install します。

# Reactのプロジェクトを作成
$ create-react-app custom-ccp
$ cd custom-ccp

# Reactのプロジェクト配下にamazon-connect-streamsをclone
$ git clone git@github.com:aws/amazon-connect-streams.git

# .gitignoreに/amazon-connect-streamsを追加しておく
$ echo /amazon-connect-streams >> .gitignore

# amazon-connect-streamsをbuild
$ cd amazon-connect-streams
$ npm install
$ npx gulp

# buildしたファイルをamazon-connect-streams直下に移動
$ cp release/connect-streams.js ./index.js
$ cp src/index.d.ts ./

# buildしたamazon-connect-streamsをインストール
$ cd ..
$ npm install ./amazon-connect-streams

Reactアプリの実装

App.js にてbuildした amazon-connect-streams を import します。

App.js

import React, { Component } from 'react';
import 'amazon-connect-streams';
import pkg from '../package.json';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.containerDiv = React.createRef();
  }

  componentDidMount() {
    // CCPの読み込み処理
    // eslint-disable-next-line no-undef
    connect.core.initCCP(this.containerDiv.current, {
      ccpUrl: 'https://{YOUR_INSTANCE_NAME}.awsapps.com/connect/ccp#/',
    });
  }

  render() {
    return (
      <div className="App">
        <main>
          <div className="ccp">
            {/* ccp */}
            <div
              className="containerDiv"
              ref={this.containerDiv}
            />
          </div>
          <div className="content" />
        </main>
        <footer>
          <p className="version">version: {pkg.version}</p>
        </footer>
      </div>
    );
  }
}

export default App;

参考: App.css

あまり今回の件とは関係ありませんが、参考までに App.css の内容も記載しておきます。

App.css

.App {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

main {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  overflow: auto;
}

.ccp {
  width: 330px;
  min-width: 200px;
  height: calc(100vh - 40px);
}

.containerDiv {
  width: 320px;
  min-width: 200px;
  min-height: 400px;
  height: 465px;
}

.content {
  flex: 1;
}

footer {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  background-color: #ececec;
}

.version {
  font-size: small;
  color: #666;
  padding-right: 10px;
}

npm run build して生成される内容をAmazon S3のバケットにアップロードしてHTTPSでアクセスすると、以下のような画面が表示されます。

これで Reactアプリにamazon-connect-streamsを埋め込むことができました。