$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

jacoyutorius

November 20, 2021
Tweet

More Decks by jacoyutorius

Other Decks in Technology

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関連のリソースが追加されていない場合はそれらを追加するように言われるので従いましょう。


    認証時と非認証していない時用の2種類の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