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

## 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` します。

```sh
# 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` します。

```js: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;
```

<details><summary>参考: App.css</summary><div>

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

```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;
}
```
</div></details>

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

<img width="1392" alt="custom-ccp.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39362/46bb8fa7-2f89-1009-c3b7-8ea424280ed9.png">

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

---

### 参考

- [aws/amazon-connect-streams: Amazon Connect Streams - a browser-based contact center integration API, typically with CRM systems.](https://github.com/aws/amazon-connect-streams)
- [amazon-connect-streams/Documentation.md at master · aws/amazon-connect-streams](https://github.com/aws/amazon-connect-streams/blob/master/Documentation.md)
- [Amazon Connect Streamsの初期セットアップ手順 ｜ DevelopersIO](https://dev.classmethod.jp/cloud/aws/amazon-connect-streams-initial-setup-procedure/)