Amazon Chime SDK React Component Libraryのデモを動かしてみた件(ver3.7.0)
概要
ReactのアプリケーションでAmazon Chimeを使う場合はamazon-chime-sdk-component-library-reactを使うことになるかと思います。
デモも用意されており、下記のように動かし方まで丁寧に解説していただいている記事がありました。
当該の記事はv1.5.0のバージョンのデモの動かし方で、この方法でv2系のある程度のバージョンまでは動作確認できます。
ただ、最新系であるv3ではデモアプリケーションの構成がだいぶ異なってきているため、その時の手順をまとめました。
※デモアプリの大まかな画面構成は変わっていないため解説は省きます。あくまで新しいバージョンにおけるでもアプリの起動のさせ方の解説記事です。
※デモアプリの起動に必要なローカルのcredenditalsの設定は済んでいるものとします。
構成
v3系ではamazon-chime-sdk-component-library-reactのリポジトリにはデモアプリのコードの実態はなく、amazon-chime-sdk側に移っています。具体的には下記のディレクトリです。
ここのpackage.jsonを見てみると以下のような記述が確認できます。
"amazon-chime-sdk-component-library-react": "file:../../amazon-chime-sdk-component-library-react",
従って、amazon-chime-sdkのディレクトリ配下にamazon-chime-sdk-component-library-reactを用意して、それを参照する方式となっているようです。
アバウトですが、以下のような構成になります。
amazon-chime-sdk
- apps
- meeting(デモアプリ本体)
- amazon-chime-sdk-component-library-react(別途cloneしてくる)
手順
上記の通り、2種類のリポジトリが必要になります。
amazon-chime-sdkのclone
まずはamazon-chime-sdkをcloneします。
cloneしたらとりあえずカレントを移動します。
git clone https://github.com/aws-samples/amazon-chime-sdk.git
cd amazon-chime-sdk
amazon-chime-sdk-component-library-reactのclone
続いてamazon-chime-sdk直下にamazon-chime-sdk-component-library-reactをcloneしてきます。
今回は記事執筆時点で最新バージョンであるv3.7.0を使用したいため、ブランチも切り替えます。
git clone https://github.com/aws/amazon-chime-sdk-component-library-react.git
cd amazon-chime-sdk-component-library-react
git checkout amazon-chime-sdk-component-library-react@3.7.0
完了したら再びカレントをamazon-chime-sdkにします。
cd ..
デモアプリ(apps/meeting)のセットアップ
続いてデモアプリのディレクトリへ移動して必要なライブラリをインストールします。
cd apps/meeting
npm install
これで準備完了です。
起動
そのまま起動します。
npm start
0.0.0.0:9000でアプリが立ち上がれば成功です。
まとめ
今回はamazon-chime-sdk-component-library-reactのv3.7.0でのデモアプリの起動方法についてまとめました。
v2系までと比べると少し手順が煩雑になっているので、動かしたいバージョンを事前にチェックしておくといいかなと思います。
この記事が少しでも役立ちましたら幸いです。
Discussion