Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

jacoyutorius
November 20, 2021

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

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

    がもらえました。 (CC BY - SA 2.5 Copyright © 2006, Yukihiro Matsumoto ) 2
  3. Contents w)PXUPEFWFMPQ3FBMUJNFUSBOTMBUJPSXJUI"NQMJGZ w4FOEMPHTUP$MPVE8BUDI-PHTGSPN"NQMJGZ-PHHFS Amplify で翻訳アプリを作った話と CloudWatchLogsにアプリケーションのログをカジュアルに送る方法について話します。 3

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

  5. Solution w8FC4QFFDI"1* "NB[PO5SBOTMBUF w3FBMUJNFUSBOTMBUPS📻 Web Speech API と AWS Translateで

    リアルタイム翻訳アプリ作れるのでは? 5
  6. 構成はこんな感じです。 w #VJMEJOHXJUI"NQMJGZ 7VF w 5SBOTDSJCFVUUFSBODFCZ8FC 4QFFDI"1* w 5SBOTMBUFUIFUFYU KQFO

    CZ "NB[PO5SBOTMBUF w 4FOEUIFSFTVMUUP$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 )FMMPUPBMMPGZPVXIPBSFXBUDIJOHKBXTQBOLSBUJPO 5IJTJT0HJ *USJFEUPNBLFBUSBOTMBUJPOBQQVTJOHXFCTQFFDIBQJBOEBNB[PO USBOTMBUF 5IFSFTVMUJTBTZPVDBOTFF 5IFSFJTOPQSPCMFNXJUIUIFUSBOTMBUJPOBDDVSBDZPGBNB[POUSBOTBMBUF  CVUUIFIFBSJOHSFTVMUTBSFEJTBQQPJOUJOH "DUVBMMZ

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

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

  17. .ZNJTVOEFSTUBOEJOH😇 w lBNQMJGZMPHHFSzTFOETMPHTUP$MPVE8BUDI-PHT  w /P TJNQMZEJTQMBZTUPDPOTPMF 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🔥 UPBWPJEUIJTJTTVF QVUB fi STUMPHPGMPHTUSFBNGSPN.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関連のリソースが追加されていない場合はそれらを追加するように言われるので従いましょう。

    認証時と非認証していない時用の2種類のIAMロールが作成されます(authRole, unAuthRole) wBNQMJGZBQQOFFET*".SPMFGPSBDDFTTUP"84SFTPVSDFT FH4 (FP 5SBOTMBUFʜ  wJGZPVXFSFOPUBEE"VUISFTPVSDFT ZPVTIPVMEBEESVOlBNQMJGZBEEBVUIz  w*".3PMFXFSFDSFBUFE BVUI3PMF VO"VUI3PMF 25
  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
  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