AWS Amplify で翻訳アプリを作った話とAmplifyからカジュアルにCloudWatchLogsにログを送る方法について

JAWS Pankration 2021 にて発表した資料です。
AWS Amplify で翻訳アプリを作った話とAmplifyからカジュアルにCloudWatchLogsにログを送る方法について話しました。

紹介した翻訳アプリはこちら
https://webspeechtranslate.yutoogi.com/

1. Realtime-transate with Web Speech API but… @jacoyutorius 1
2. w 3VCZJTU
   w +"846(
   )BNBNBUTV
   w 'BWPSJUF
   "84
   $-*
   
   DPQJMPU
   DMJ খ໦༔ే !KBDPZVUPSJVT 安いリプロダクト椅子を使っていましたが、 仕事がリモートワークに切り替わってオフィスが解約されて余ったいい感じの椅子 がもらえました。 (CC BY - SA 2.5 Copyright © 2006, Yukihiro Matsumoto ) 2
3. Contents w)PX
   UP
   EFWFMPQ
   3FBMUJNF
   USBOTMBUJPS
   XJUI
   "NQMJGZ
   w4FOE
   MPHT
   UP
   $MPVE8BUDI-PHT
   GSPN
   "NQMJGZ
   -PHHFS Amplify で翻訳アプリを作った話と CloudWatchLogsにアプリケーションのログをカジュアルに送る方法について話します。 3
4. Why? +"84
   1BOLSBUJPO 🧐
   w
   IPVST
   
   TQFBLFST
   GSPN
   PWFS
   UIF
   XPSME
   w$SB[Z😇
   w
   BOE
   *
   DBO`U
   TQFBL
   &OHMJTIʜ
   頭おかしぃ。。。 4
5. Solution w8FC
   4QFFDI
   "1*
   
   "NB[PO
   5SBOTMBUF
   w
   3FBMUJNF
   USBOTMBUPS
   📻 Web Speech API と AWS Translateで リアルタイム翻訳アプリ作れるのでは？ 5
6. 構成はこんな感じです。 w #VJMEJOH
   XJUI
   "NQMJGZ
   
   7VF
   w 5SBOTDSJCF
   VUUFSBODF
   CZ
   8FC
   4QFFDI
   "1*
   w 5SBOTMBUF
   UIF
   UFYU
   KQ
   
   FO
   CZ
   "NB[PO
   5SBOTMBUF
   w 4FOE
   UIF
   SFTVMU
   UP
   $MPVE8BUDI
   -PHT 6
7. Chromeじゃないとイマイチ調子悪い。 7
8. こんな感じのJavascriptで発話内容をテキストとして取得することができます。 Web Speech API 8
9. amplify predictions には既にAmazon Transcribeも統合されていますが、 日本語には未対応だったので今回は使っていません (2021/11) Yes, amplify predictions already integrated with Amazon Transcribe. but Japanese was not. 9
10. Amazon Translateも Amplifyに統合されているので、 10
11. Amplify CLIから add predictions コマンドを実行することでアプリケーションに組 み込むことができます。 How to add Amazon Translate to Amplify 11
12. こちらもたった10行くらいのJavascriptで翻訳結果を受け取ることができます。 How to add Amazon Translate to Amplify 12
13. では出来上がったものを見てみましょう。 Demo https://webspeechtranslate.yutoogi.com/ 13
14. 14 )FMMP
    UP
    BMM
    PG
    ZPV
    XIP
    BSF
    XBUDIJOH
    KBXT
    QBOLSBUJPO
    5IJT
    JT
    0HJ
    *
    USJFE
    UP
    NBLF
    B
    USBOTMBUJPO
    BQQ
    VTJOH
    XFC
    TQFFDI
    BQJ
    BOE
    BNB[PO
    USBOTMBUF
    5IF
    SFTVMU
    JT
    BT
    ZPV
    DBO
    TFF
    5IFSF
    JT
    OP
    QSPCMFN
    XJUI
    UIF
    USBOTMBUJPO
    BDDVSBDZ
    PG
    BNB[PO
    USBOTBMBUF
    CVU
    UIF
    IFBSJOH
    SFTVMUT
    BSF
    EJTBQQPJOUJOH
    "DUVBMMZ
    *
    UIPVHIU
    JU
    XPVME
    CF
    OJDF
    JG
    *
    DPVME
    VTF
    UIJT
    UP
    USBOTDSJCF
    B
    NFFUJOH
    *OTUFBE
    PG
    B
    NFFUJOH
    UIF
    SFTVMU
    XBT
    MJLFMZ
    UP
    CF
    B
    RVBSSFM
    *
    UIJOL
    JUT
    TUJMM
    B
    MPOH
    XBZ
    UP
    VTF
    JU
    JO
    CVTJOFTT
    
15. デバッグのためにログを出したいことはよくあることです。 We wants to output logs for debugging. 15
16. AmplifyにはLoggerがあります 16
17. .Z
    NJTVOEFSTUBOEJOH😇
    w lBNQMJGZ
    MPHHFSz
    TFOET
    MPHT
    UP
    $MPVE8BUDI-PHT
    
    w /P
    TJNQMZ
    EJTQMBZT
    UP
    DPOTPMF AmplifyにはLoggerがあります AmplifyにはLoggerがあります ただし、Amplify Loggerはログをコンソールに出力するだけです。 17
18. issueを漁っていたらこれぞ僕が欲しいと思っていた機能のプルリクエストがあり、 しかもマージされていました。 Finaly, I found this pull-request 18
19. AWSCloudWatchProviderを使うことで Amplify LoggerからCloudWatchにログを送信することができるようです。 Moreover, already merged. 19
20. ということでやってみます！ 使い方はプルリクエストのページに書いてあります。 Do it!! 20
21. Vueだったらこのような感じでインスタンスプロパティにLoggerを登録しておけば コンポーネントのどこからでも呼べて便利。 Do it!! 21
22. CloudWatchLogsログストリームの最初のログはSDKからだとエラーになる様子.. マネジメントコンソールから手作業で最初のログを登録した。 Failed🔥 UP
    BWPJE
    UIJT
    JTTVF
    QVU
    B
    fi STU
    MPH
    PG
    MPHTUSFBN
    GSPN
    .BOBHFNFOU$POTPMF 22
23. バグのようです。 It seems a bug 23
24. やったぜ！ I did it! 24
25. By the way, amplify cli returns the following message AmplifyにAuth関連のリソースが追加されていない場合はそれらを追加するように言われるので従いましょう。 認証時と非認証していない時用の２種類のIAMロールが作成されます(authRole, unAuthRole) wBNQMJGZ
    BQQ
    OFFET
    *".
    SPMF
    GPS
    BDDFTT
    UP
    "84
    SFTPVSDFT
    FH
    4
    (FP
    5SBOTMBUFʜ
    wJG
    ZPV
    XFSF
    OPU
    BEE
    "VUI
    SFTPVSDFT
    ZPV
    TIPVME
    BEE
    SVO
    lBNQMJGZ
    BEE
    BVUIz
    w
    *".
    3PMF
    XFSF
    DSFBUFE
    BVUI3PMF
    VO"VUI3PMF 25
26. 作成されたIAMロールに対してCloudWatchLogsへの書き込みを許可するアクションを設定します。 （IAMポリシーとして定義しておくと便利） BMMPX
    GPMMPXJOH
    BDUJPOT
    ‣ MPHT$SFBUF-PH4USFBN
    ‣ MPHT%FTDSJCF-PH(SPVQT
    ‣ MPHT%FTDSJCF-PH4USFBNT
    ‣ MPHT$SFBUF-PH(SPVQ
    ‣ MPHT1VU-PH&WFOUT allow IAMRole to put logs to CloudWatchLogs Important#1 26
27. allowUnAuthenticatedIdentitiesプロパティは、認証されていないユーザーに対してAWSリソースの利用 を許可するためのフラグです。 allowUnAuthenticatedIdentities Important#2 ./amplify/#current-cloud-backend/auth/amplifyapp/parameters.json 27
28. allowUnAuthenticatedIdentities Important#2 これがtrueになっていないとエラーになります。 28
29. Amplifyは簡単にデプロイできて楽しいけど 使い込んでいくとハマるポイントがあったりするので皆で知見を共有していき ましょう！！ Amplify is powerful & useful. easy to deploy, easy to integrate AWS services to your app. but if you use amplify heavy, you may encounts unfortunate error. so lets share your knowledge with everyone!! IUUQTRJJUBDPNBEWFOUDBMFOEBSBNQMJGZ
    29
30. おわり。 thank you! 30