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

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

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

Transcript

1. Realtime-transate with Web Speech API
   
   
   but…
   @jacoyutorius
   1
   

   View Slide

2. w 3VCZJTU
   w +"846()BNBNBUTV
   w 'BWPSJUF"84$-*DPQJMPUDMJ
   খ໦༔ే !KBDPZVUPSJVT
   
   安いリプロダクト椅子を使っていましたが、
   
   
   仕事がリモートワークに切り替わってオフィスが解約されて余ったいい感じの椅子
   がもらえました。
   (CC BY
   -
   SA 2.5 Copyright © 2006, Yukihiro Matsumoto )
   2
   

   View Slide

3. Contents
   w)PXUPEFWFMPQ3FBMUJNFUSBOTMBUJPSXJUI"NQMJGZ
   w4FOEMPHTUP$MPVE8BUDI-PHTGSPN"NQMJGZ-PHHFS
   Amplify で翻訳アプリを作った話と
   
   
   CloudWatchLogsにアプリケーションのログをカジュアルに送る方法について話します。
   3
   

   View Slide

4. Why?
   +"841BOLSBUJPO 🧐
   wIPVSTTQFBLFSTGSPNPWFSUIFXPSME
   w$SB[Z😇
   w BOE*DBO`UTQFBL&OHMJTIʜ
   
   頭おかしぃ。。。
   4
   

   View Slide

5. Solution
   w8FC4QFFDI"1*"NB[PO5SBOTMBUF
   w3FBMUJNFUSBOTMBUPS📻
   Web Speech API と AWS Translateで
   
   
   リアルタイム翻訳アプリ作れるのでは？
   5
   

   View Slide

6. 構成はこんな感じです。
   w #VJMEJOHXJUI"NQMJGZ7VF
   w 5SBOTDSJCFVUUFSBODFCZ8FC
   4QFFDI"1*
   w 5SBOTMBUFUIFUFYU KQFO
   CZ
   "NB[PO5SBOTMBUF
   w 4FOEUIFSFTVMUUP$MPVE8BUDI-PHT
   6
   

   View Slide

7. Chromeじゃないとイマイチ調子悪い。
   7
   

   View Slide

8. こんな感じのJavascriptで発話内容をテキストとして取得することができます。
   Web Speech API
   8
   

   View Slide

9. amplify predictions には既にAmazon Transcribeも統合されていますが、
   
   
   日本語には未対応だったので今回は使っていません (2021/11)
   Yes, amplify predictions already integrated
   
   
   with Amazon Transcribe.
   
   
   but Japanese was not.
   9
   

   View Slide

10. Amazon Translateも Amplifyに統合されているので、
    10
    

    View Slide

11. Amplify CLIから add predictions コマンドを実行することでアプリケーションに組
    み込むことができます。
    How to add Amazon Translate to Amplify
    11
    

    View Slide

12. こちらもたった10行くらいのJavascriptで翻訳結果を受け取ることができます。
    How to add Amazon Translate to Amplify
    12
    

    View Slide

13. では出来上がったものを見てみましょう。
    Demo
    https://webspeechtranslate.yutoogi.com/
    13
    

    View Slide

14. 14
    )FMMPUPBMMPGZPVXIPBSFXBUDIJOHKBXTQBOLSBUJPO
    5IJTJT0HJ
    *USJFEUPNBLFBUSBOTMBUJPOBQQVTJOHXFCTQFFDIBQJBOEBNB[PO
    USBOTMBUF
    5IFSFTVMUJTBTZPVDBOTFF
    5IFSFJTOPQSPCMFNXJUIUIFUSBOTMBUJPOBDDVSBDZPGBNB[POUSBOTBMBUF
    CVUUIFIFBSJOHSFTVMUTBSFEJTBQQPJOUJOH
    "DUVBMMZ *UIPVHIUJUXPVMECFOJDFJG*DPVMEVTFUIJTUPUSBOTDSJCFB
    NFFUJOH
    *OTUFBEPGBNFFUJOH UIFSFTVMUXBTMJLFMZUPCFBRVBSSFM
    *UIJOLJUTTUJMMBMPOHXBZUPVTFJUJOCVTJOFTT
    

    View Slide

15. デバッグのためにログを出したいことはよくあることです。
    We wants to output logs for debugging.
    15
    

    View Slide

16. AmplifyにはLoggerがあります
    16
    

    View Slide

17. .ZNJTVOEFSTUBOEJOH😇
    w lBNQMJGZMPHHFSzTFOETMPHTUP$MPVE8BUDI-PHT
    w /P TJNQMZEJTQMBZTUPDPOTPMF
    AmplifyにはLoggerがあります
    AmplifyにはLoggerがあります
    ただし、Amplify Loggerはログをコンソールに出力するだけです。
    17
    

    View Slide

18. issueを漁っていたらこれぞ僕が欲しいと思っていた機能のプルリクエストがあり、
    
    
    しかもマージされていました。
    Finaly, I found this pull-request
    18
    

    View Slide

19. AWSCloudWatchProviderを使うことで
    
    
    Amplify LoggerからCloudWatchにログを送信することができるようです。
    Moreover, already merged.
    19
    

    View Slide

20. ということでやってみます！
    
    
    使い方はプルリクエストのページに書いてあります。
    Do it!!
    20
    

    View Slide

21. Vueだったらこのような感じでインスタンスプロパティにLoggerを登録しておけば
    
    
    コンポーネントのどこからでも呼べて便利。
    Do it!!
    21
    

    View Slide

22. CloudWatchLogsログストリームの最初のログはSDKからだとエラーになる様子..
    
    
    マネジメントコンソールから手作業で最初のログを登録した。
    Failed🔥
    UPBWPJEUIJTJTTVF QVUB
    fi
    STUMPHPGMPHTUSFBNGSPN.BOBHFNFOU$POTPMF
    22
    

    View Slide

23. バグのようです。
    It seems a bug
    23
    

    View Slide

24. やったぜ！
    I did it!
    24
    

    View Slide

25. By the way,
    
    
    amplify cli returns the following message
    AmplifyにAuth関連のリソースが追加されていない場合はそれらを追加するように言われるので従いましょう。
    
    
    認証時と非認証していない時用の２種類のIAMロールが作成されます(authRole, unAuthRole)
    
    
    wBNQMJGZBQQOFFET*".SPMFGPSBDDFTTUP"84SFTPVSDFT FH4 (FP 5SBOTMBUFʜ
    
    wJGZPVXFSFOPUBEE"VUISFTPVSDFT ZPVTIPVMEBEESVOlBNQMJGZBEEBVUIz
    w*".3PMFXFSFDSFBUFE BVUI3PMF VO"VUI3PMF
    
    25
    

    View Slide

26. 作成されたIAMロールに対してCloudWatchLogsへの書き込みを許可するアクションを設定します。
    
    
    （IAMポリシーとして定義しておくと便利）
    BMMPXGPMMPXJOHBDUJPOT
    ‣ 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
    

    View Slide

27. allowUnAuthenticatedIdentitiesプロパティは、認証されていないユーザーに対してAWSリソースの利用
    を許可するためのフラグです。
    allowUnAuthenticatedIdentities
    Important#2
    ./amplify/#current-cloud-backend/auth/amplifyapp/parameters.json
    27
    

    View Slide

28. allowUnAuthenticatedIdentities
    Important#2
    これがtrueになっていないとエラーになります。
    28
    

    View Slide

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
    

    View Slide

30. おわり。
    thank you!
    30
    

    View Slide