produced by Classmethod ˗ˏˋ 技術とビジネスの祭典 ˎˊ˗ Classmethod ODYSSEY 事前登録受付中

[Amazon Connect]「サードパーティアプリケーション」のワークショップをやってみた

Amazon Connectの電話画面に埋め込める「サードパーティアプリケーション」機能のワークショップがあったので、早速やってみました

洲崎義人

2024.03.29

こんにちは、洲崎です。
Amazon Connect Agent Workspaceで利用できる「サードパーティアプリケーション」機能のワークショップがあったので、やってみました。

サードパーティアプリケーション機能とは

サードパーティアプリケーションとは、Amazon Connect Agent WorkspaceにWebページや独自のアプリケーションを表示することができる機能です。
2024/3/26にGA（一般公開）され、誰でも利用できるようになりました。
詳細については、こちらの記事をご確認ください。

このサードパーティアプリケーションのワークショップがありましたので、早速やってみました。

ワークショップの前提

本ワークショップを行うにあたり、下記の作成が完了していることが前提となります。

AWSアカウントの作成
Amazon Connectインスタンスの作成
Amazon Connect ユーザーの作成

また、本ワークショップはAWS CloudFormationを利用しますが、以下のリソースが作成されます。

Amazon S3：Webサイトのコンテンツを保存する用
AWS Lambda:ウェブサイトのコンテンツをS3バケットにコピーするためのLambda関数
AWS CloudFront:ウェブページをホストし、インターネット経由でS3バケットのコンテンツにアクセスできるようにする用

やってみる

CloudFormationのデプロイ

ワークショップにあるCloudFormationテンプレートをローカルにダウンロードします。

AWSマネジメントコンソールから、CloudFormationのページにいき、スタックの作成で以下を選択します。

テンプレートの準備
- テンプレートの準備完了
テンプレートの指定
- テンプレートファイルのアップロード
- ローカルにダウンロードしたyamlファイルをアップロードします

スタック名は任意の名前を入力します。（例：third-party-workshop）

スタックオプションの設定はデフォルトのままで次に進みます。

「AWS CloudFormation によって IAM リソースが作成される場合があることを承認します。」にチェックをいれて、「送信」をクリックします。

5分ほど待つと、デプロイが完了します。ステータスが「CREATE_COMPLETE」になっていることを確認します。

出力タブにある「WebsiteURL」のCloudFrontのドメインを確認し、クリックします。

以下の画面がでることを確認します。

CloudFormationで作成されたリソースを見てみる

設定を進めていく前に、CloudFormationで作成されたリソースをざっと見てみました。

作成されたリソースは以下です。

Amazon S3
- コンテンツ保存用のS3バケット
- バケットポリシー
Lambda
- CloudFormationのデプロイをトリガーとしたLambda トリガー
- Webサイトのファイルをダウンロードし、S3バケットにアップロードするLambda関数
CloudFront
- コンテンツ公開用のディストリビューション
- OAI
IAM
- Lambda用のIAMロール

Lambda関数は中身をざっと見ると、S3バケットにコンテンツを格納するのが目的で、スポット的な利用用途でした。
以下コードの抜粋です。

def download_from_cloudfront(cloudfront_url, object_key):
    try:
        cloudfront_url = cloudfront_url.rstrip('/')
        url = f"{cloudfront_url}/{object_key}"
        with urllib.request.urlopen(url) as response:
            return response.read()
    except Exception as e:
        logger.error(f"Error downloading {object_key} from CloudFront: {e}")
        raise

def upload_to_s3(s3_resource, destination_bucket, object_key, content, content_type):
    try:
        s3_object = s3_resource.Object(destination_bucket, object_key)
        s3_object.put(Body=content, ContentType=content_type)
    except Exception as e:
        logger.error(f"Error uploading {object_key} to S3: {e}")
        raise

今回のソリューションはS3バケットのコンテンツの中身がメインですね。
作成されたS3バケットを見ると、index.htmlを含めた複数のファイルが格納されていることを確認できます。
staticの中身をみると、cssとjsにそれぞれ肝となるコードが格納されています。
より興味のある方は覗いてみてください。（Reactが使われていました）