我尝试运行 AWS Chime SDK Amplify版的官方演示!
当我有机会接触AWS Chime SDK并打算先试试看时，我发现AWS Chime官方已经发布了演示。
在众多包含本地完整的会议演示和聊天演示的中，我发现了令人着迷的 Amplify 字样，所以我决定尝试将其实际运行并记录下我的经验。
环境
按照README的指示试着运行一下。
请仅阅读以下大致注意事项，详细信息请参阅README文件补充。
请在您的计算机上安装amplify-cli。
npm install -g @aws-amplify/cli
克隆 AWS Chime 官方演示
git clone https://github.com/aws-samples/amazon-chime-sdk
打开克隆的亚马逊 Chime SDK 的 AmplifyDemo。
cd amazon-chime-sdk/apps/AmplifyDemo
安装软件包
npm i
如果您已经是一个拥有AdministratorAccess策略的IAM用户，并且已经配置了AWS CLI，您可以跳过创建Amplify CLI用户的步骤。
amplify configure
打开 AWS 登录界面时，浏览器会启动。
成功登录管理控制台后，返回终端，并按下 Enter 键。
###region: ap-northeast-1
2 user name: amplify-NFMHP
3 accessKeyId: ********************
4 secretAccessKey: ****************************************
This would update/create the AWS Profile in your local machine
5 Profile Name: amplify
-
- 2. 新しく作る IAM ユーザーの名前を選択 （任意）。マネコンに飛ばされるので IAM ユーザーを作成
-
- 特に何も考えず次へボタンを押していいと思う
-
- タグに Name:amplify-iam-user を設定しておくと後から楽になる
-
- ユーザーが作成されるとアクセスキーとかがみれるのでターミナルに戻って Enter
-
- 3.4. アクセスキーと シークレットアクセスキーを入力（ブラウザからコピペ）
-
- 5. プロファイル名を入力（default にすると–profile が要らなくなる）
-
- ここでプロファイルを設定した場合、移行の amplify コマンドの後ろに–profile <設定したプロファイル名>をつけること
- この記事では default で設定するので–profile は省略する
进行Amplify的初始设置。这将创建一个存在生成的后端资源配置的本地Amplify环境。
amplify init
1 Enter a name for the project amplifyDemo
2 Initialize the project with the above configuration? No
3 Enter a name for the environment dev
4 Choose your default editor: Visual Studio Code
5 Choose the type of app that you're building javascript
6 What javascript framework are you using react
7 Source Directory Path: src
8 Distribution Directory Path: dist
9 Build Command: npm run-script build
10 Start Command: npm run-script start
11 Select the authentication method you want to use: AWS profile
-
- 1. プロジェクト名を入力
3~20 文字の英数字のみ
2. プロジェクトインフォメーションが表示され、Initialize the project with the above configuration?と聞かれるけど、n を入力して Enter
8. dist に変更
11. configure の際にプロファイルを設定した物を選択
在本地增添 Lambda 函数到 Amplify 的环境中。
amplify add function
1 Select which capability you want to add: Lambda function (serverless function)
2 Provide an AWS Lambda function name: reactSampleLambda
3 Choose the runtime that you want to use: NodeJS
4 Choose the function template that you want to use: Hello World
5 Do you want to configure advanced settings? No
6 Do you want to edit the local lambda function now? Yes
-
- 2. 関数名を入力 必ず reactSampleLambda と入力
ただし後から出てくる schema.graphql に書かれてる reactSampleLambda を別のものに変える場合はその名前にする
全部終わると VSCode でamplify/backend/function/reactSampleLambda/src/index.jsが開かれるので、`./lambda/index.js で上書きして保存（後からでもできる）
在本地的Amplify环境中添加后端GraphQL。
amplify add api
1 Please select from one of the below mentioned services: GraphQL
2 Provide API name: reactSampleApi
3 Choose the default authorization type for the API API key
4 Enter a description for the API key:
5 After how many days from now the API key should expire (1-365): 7
6 Do you want to configure advanced settings for the GraphQL API No, I am done.
7 Do you have an annotated GraphQL schema? Yes
8 Provide your schema file path: schema.graphql
-
- 7. Yes を選択すると 8 の選択肢が出る
- 8. schema.graphql を指定
将在本地设置的内容同步到云端。
amplify push
结构需要花费时间
过了一会儿，会被问到是否要根据 schema.graphql 生成源代码。
1 Do you want to generate code for your newly created GraphQL API Yes
2 Choose the code generation language target typescript
3 Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.ts
4 Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
5 Enter maximum statement depth [increase from default if your schema is deeply nested] 2
6 Enter the file name for the generated code src/graphql/types.ts
-
- 2. typescript を指定
- 6. お好みだけどここでは src/graphql/types.ts を指定
在管理控制台中，将AmazonChimeFullAccess策略附加到Lambda的IAM角色上。
-
- 登录已创建环境的AWS帐户控制台
-
- 显示IAM
-
- 在侧边菜单中点击“角色”
-
- 点击以“reactSampleLambdaRole-XXX-dev”命名的角色
-
- 点击“附加策略”
-
- 在搜索框中输入“AmazonChimeFullAccess”
-
- 勾选“AmazonChimeFullAccess”
- 点击“附加策略”
确认
我们已经准备好了！让我们启动本地环境进行确认吧！
启动本地的 react 服务器
npm run start
请访问 http://localhost:3000
已经显示出来了！顺便说一下，同一个浏览器可以模拟多个人同时连接。
雖然功能簡單，但可以看出視頻和音頻都能夠很好地互動。
顺便说一句，这个演示样例（以及这个仓库的其他样例）都是使用 amazon-chime-sdk-component-library-react 创建的。这个库提供了方便创建 Chime 应用所需的 React 组件和 Hooks，因此推荐您使用！
我打算在不久的将来写一篇文章。
删除资源
我认为除非非常乱使用，否则不会产生费用，但如果想要整理一下的话，可以使用以下命令删除云上的资源。
amplify delete
请小心，因为会连同本地自动生成的文件一起消失。
结尾话
这次我们只是运行了官方的演示程序，虽然官方的 README 只有英文，但很容易理解，除了偶尔发生一些错误外，我们能够非常简单地完成构建。
最近其他的库也是一样，很多都有丰富的示例，非常感激！如果将来我要发布OSS库，我一定会下定决心好好做示例！
由于Chime本身不仅仅用于会议，还可以用于聊天等，所以我考虑逐步在这个演示中增加一些功能。
当事情基本上固定后，我打算写一篇文稿。
