AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ

1. Takayuki Shimizu Solutions Architect, Amazon Data Services Japan, K.K. 2015/4/10 AWS Lambda ハンズオン　2-‐‑‒Tier アーキテクチャで未来へ

2. ⾃自⼰己紹介 !  清⽔水崇之 •  ソリューションアーキテクト（WEST 担当） •  ⼤大阪のお客様にもプライム対応で参上します •  Web サービス全般、モバイル、ゲームなど •  AWS 芸⼈人 (詳しくは slideshare)

3. アジェンダ !   AWS Lambdaとは？ !   ⽬目的とゴール •  2-‐‑‒Tier アーキテクチャ •  画像アップロードの概要 !   ハンズオンの注意点 !   Part１ •  MCにログイン •  S3バケットの作成 •  Lambda Exec Role の作成 •  Node.js プログラムの作成 •  Lambda Function の作成 •  動作確認 !   Part２ •  Cognito Identity Pool の作成 •  Cognito Unauth Role の修正 •  画像アップロード⽤用 HTML を S3 でホスティング •  画像アップロード⽤用バケットの CORS 対応 •  動作確認 !   Part３ •  DynamoDB の作成 •  Lambda Exec Role の修正 •  Node.js プログラムの修正 •  Cognito Unauth Role の修正 •  HTML の修正 •  動作確認

4. 事前準備 ※Node.js をインストールされていない⽅方は実施してください

5. 5 Node.js インストール (Max OS X) !   http://nodejs.jp/nodejs.org_̲ja/docs/v0.10/download/

6. 6 サポートバージョン !   http://docs.aws.amazon.com/ja_̲jp/lambda/latest/dg/current-‐‑‒supported-‐‑‒ versions.html

7. 7 Node.js インストール (Max OS X) node-v0.10.xx.pkg

8. 8 Node.js インストール (Max OS X) ! Node.js が正しくインストールされたか確認します。 •  以下のコマンドを実⾏行行して Node.js のバージョンを確認します。 $ node -‐‑‒-‐‑‒version

10. AWS Lambda とは

11. AWS Lambdaとは !   クラウド上で、イベントをトリガーに独⾃自のコードを稼働させる Computeサービス •  EC2インスタンスやOS等インフラの管理理作業が不不要 •  毎⽇日数件から毎秒数千件のリクエストまで⾃自動的にスケール •  従量量課⾦金金、実際にコードが稼働した時間に対してのお⽀支払 •  新たに追加された情報(イベント)に対して即座に応答するアプリケーションを、特別な仕組みなく簡単に実装できる •  2014年年11⽉月に発表され、現在はPreviewとして提供

12. 特徴

13. インフラの管理理が不不要 !   ビジネスロジックにフォーカスできる !   コードをアップロードするだけで、あとはAWS Lambdaが以下をハンドリング •  キャパシティ •  スケール •  デプロイ •  耐障害性 •  モニタリング •  ロギング •  セキュリティパッチの適⽤用

14. オートスケール •  イベントの発⽣生レートに合わせて⾃自動でスケール •  プロビジョニング中や完了了を気にする必要なし •  コードが稼働した分だけのお⽀支払い

15. Bring your own code ! Node.jsで書かれたコードを実⾏行行 !   コード内では以下も可能 •  スレッド/プロセスの⽣生成 •  バッチスクリプトや何らかの実⾏行行ファイルの実⾏行行 •  /tmpのread/write !   各種ライブラリも利利⽤用可能 •  ネイティブライブラリも可能 •  利利⽤用するライブラリを⼀一緒にアップロード

16. 細やかな料料⾦金金体系 •  100ミリ秒単位でのコンピュート時間に対する価格設定 •  リクエストに対する低額の課⾦金金 •  ⼗十分な無料料枠

17. ユースケース

18. イメージリサイズ、サムネイル⽣生成 !  S3に画像がアップロードされたときにサムネイルの⽣生成やリサイズを実⾏行行 AWS LambdaAmazon S3 Bucket イベント元画像サムネイル画像 1 2 3

19. 値チェックや別テーブルへのコピー ! DynamoDBへの書き込みに応じて値チェックをしつつ別テーブルの更更新やプッシュ通知を実⾏行行 AWS Lambda Amazon DynamoDB Table and Stream プッシュ通知別テーブルを更新

20. 監査と通知 !  S3に保管されるCloudTrailのログを分析し、怪しい⾏行行動や異異常を検知したら通知する AWS APIコール AWS CloudTrail Logs AWS Lambda Bucketイベントプッシュ通知

21. ⼝口コミアプリ !   投稿の書き込み/表⽰示はDynamoDBと直接 !   レートの計算はモバイルアプリから直接Lambdaを実⾏行行し⾮非同期で実⾏行行 1. 認証・認可・ FBアプリと連携 Cognito DynamoDBApp with AWS Mobile SDK 2. ⼝口コミの投稿・投稿内容とレーティング 4. 過去の全データを元に平均値の計算と　　結果のDynamoDBへの登録等 3. Lambda functionの起動 Lambda

22. Followers 写真共有モバイルアプリ 4. メタデータをDynamoDBに登録 -‐‑‒ タイトル、コメント等 1. 認証・認可・ FBアプリと連携 6. Push通知 -‐‑‒ フレンドやフォロワーに通知 Cognito Mobile Analytics DynamoDB S3 SNS7. 画像をポストしたことをAnalyticsに登録 3. 画像のリサイズ 2. S3への画像アップロード 5. 結果をSNSへ通知 App with AWS Mobile SDK

24. ⽬目的とゴール

25. 25 ⽬目的：2-‐‑‒Tier アーキテクチャ ü AWS Lambda ⎼  サーバーレス、EC2レス ü Amazon Cognito ⎼  テンポラリクレデンシャル発⾏行行 ü Amazon S3、Amazon DynamoDB ⎼  Lambdaを中⼼心に各種サービスを連携したシステム構築

26. 26 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential ゴール：画像アップローダ 7. メタ情報 1. HTML 8. ⼀一覧取得 S3 HTML

27. 27 ゴール：画像アップローダ画像をアップロードできる画像⼀一覧を取得できる実⼨寸で表⽰示サムネイルで表⽰示

29. ハンズオンの注意点

30. ハンズオンの注意点 !   以下の URL から Asset_̲20150410.zip をダウンロードしてください。 •  https://s3-‐‑‒ap-‐‑‒northeast-‐‑‒1.amazonaws.com/shimiz-‐‑‒training/ LambdaHandson_̲20150410/Asset_̲20150410.zip !   ディレクトリ構成 Asset_̲20150410 |-‐‑‒Part1.txt |-‐‑‒Part2.txt |-‐‑‒Part3.txt |-‐‑‒images |-‐‑‒test1.png |-‐‑‒test2.jpg ・・・

31. ハンズオンの注意点 !   資料料/コード中に記載される [xxx] という部分はすべて⾃自⾝身で独⾃自に決めた⽂文字列列に置き換えてください 1. [xxx-‐‑‒image-‐‑‒uploader] と⼊入⼒力力・・・ "Eﬀect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::xxx-‐‑‒image-‐‑‒uploader/*" ] } ・・・・・・ "Eﬀect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::takayuki-‐‑‒image-‐‑‒uploader/*" ] } ・・・例例）タカユキさんの場合 xxx = takayuki takayuki-image-uploader 資料料/コード中の記載実際に⼊入⼒力力する値

32. ハンズオンの注意点 !   コードは Asset に内包されている txt ファイルからコピペしてください。 !   この資料料（PDF）をコピペすると、改⾏行行コードなど不不要な⽂文字列列が混⼊入する場合があります。資料料(PDF) からコピペしない txt ファイルからコピペする

34. Part１

35. 35 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML 8. ⼀一覧取得 S3 HTML

36. 36 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML 8. ⼀一覧取得 S3 HTML

37. マネージメントコンソールログイン

38. 38 AWS Management Consoleにログインする ! AWSのホームページ（http://aws.amazon.com/）から、管理理コンソール「AWS Management Console」にログインします。 1. [アカウント] をクリック 2. [AWS マネジメントコンソール] をクリック

39. 39 AWS Management Consoleにログインする !   作成したAWSアカウント情報を⼊入⼒力力してサインインします。 1. メールアドレス⼊入⼒力力 3. パスワード⼊入⼒力力 4. クリックしてサインイン 2. クリック

40. 40 AWS Management Consoleにログインする !   MFA を設定しているアカウントは Authentication Code を⼊入⼒力力します。 •  MFAの詳細は以下URLを参照　http://aws.amazon.com/jp/iam/details/mfa/ 1. Authentication Code を⼊入⼒力力 2. クリックしてサインイン

41. 41 リージョンを変更更する ! US East（N. Virginia）リージョンに変更更します。 2. [US East (N.Virginia)] を選択 1. リージョン選択メニュー注意現時点でLambdaは東京リージョン未対応です。このハンズオンは全て N. Virginia で実施します。

42. S3 バケットの作成

43. 43 S3 HTML 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 7. メタ情報 1. HTML 画像アップローダ S3バケットを作成し設定します

44. 44 S3 を選択する !   サービス⼀一覧を表⽰示して S3 を選択します。 1. [サービス⼀一覧] ボタン 2. [S3]をクリック

45. 45 オリジナル画像⽤用バケットを作成する !   オリジナル画像⽤用バケットを作成します。 1. [Create Bucket] をクリック

46. 46 オリジナル画像⽤用バケットを作成する !   [xxx-‐‑‒image-‐‑‒uploader] というバケット名で [US Standard] に作成する。 1. [xxx-‐‑‒image-‐‑‒uploader] と⼊入⼒力力 2. [US Standard] を選択 3. [Create] をクリック注意この資料料でこの先に出てくる全てのプレフィックス(xxxの部分)は⾃自⾝身で独⾃自に決めた⽂文字列列に置き換えてください。例例）タカユキさんの場合 takayuki-‐‑‒image-‐‑‒uploader

47. 47 オリジナル画像⽤用バケットをウェブホスティングする !   Static Web Hosting 機能を Enable にします。 1. [xxx-‐‑‒image-‐‑‒uploader] を選択 2. [Properties] をクリック 3. [Static Website Hosting] をクリック 3. [Enable website hosting] を選択 4. [index.html] と⼊入⼒力力 5. [Save] をクリック

48. 48 オリジナル画像⽤用バケットのバケットポリシーを修正する !   誰でも閲覧できるように Bucket Policy を修正します。 1. [xxx-‐‑‒image-‐‑‒uploader] を選択 2. [Properties] をクリック 3. [Permissions] をクリック 4. [Add(Edit) bucket policy] をクリック

49. 49 オリジナル画像⽤用バケットのバケットポリシーを修正する !   誰でも閲覧できるように Bucket Policy を修正します。 1. 次ページの内容を⼊入⼒力力 2. [Save] をクリック

50. 50 オリジナル画像⽤用バケットのバケットポリシーを修正する { "Version":"2012-‐‑‒10-‐‑‒17", "Statement":[{ "Sid":"AddPerm", "Eﬀect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::xxx-‐‑‒image-‐‑‒uploader/*" ] } ] } ※ xxx-‐‑‒image-‐‑‒uploader の部分は⾃自⾝身のS3バケット名を⼊入⼒力力します。 xxxの部分は⾃自⾝身の⽂文字列列に置き換えてくださいコードスニペット：　[Asset] > [Part1.txt] > [Section1] 注意このPDFからコードをコピペしないでください。改⾏行行コードなど不不要な⽂文字列列が混⼊入する場合があります。 Asset に内包された txt ファイルの該当箇所からコピペしてください。

51. 51 サムネイル画像⽤用バケットを作成する !   サムネイル画像⽤用バケットを作成します。 1. [Create Bucket] をクリック

52. 52 サムネイル画像⽤用バケットを作成する !   [xxx-‐‑‒image-‐‑‒uploader-‐‑‒thumbnail] というバケット名で [US Standard] に作成する。 1. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒thumbnail] と⼊入⼒力力 2. [US Standard] を選択 3. [Create] をクリック xxxの部分は⾃自⾝身の⽂文字列列に置き換えてください

53. 53 サムネイル画像⽤用バケットをウェブホスティングする !   Static Web Hosting 機能を Enable にします。 1. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒thumbnail] を選択 2. [Properties] をクリック 3. [Static Website Hosting] をクリック 3. [Enable website hosting] を選択 4. [index.html] と⼊入⼒力力 5. [Save] をクリック

54. 54 サムネイル画像⽤用バケットのバケットポリシーを修正する !   誰でも閲覧できるように Bucket Policy を修正します。 1. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒thumbnail] を選択 2. [Properties] をクリック 3. [Permissions] をクリック 4. [Add(Edit) bucket policy] をクリック

55. 55 サムネイル画像⽤用バケットのバケットポリシーを修正する !   誰でも閲覧できるように Bucket Policy を修正します。 1. 次ページの内容を⼊入⼒力力 2. [Save] をクリック

56. 56 サムネイル画像⽤用バケットのバケットポリシーを修正する { "Version":"2012-‐‑‒10-‐‑‒17", "Statement":[{ "Sid":"AddPerm", "Eﬀect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::xxx-‐‑‒image-‐‑‒uploader-‐‑‒thumbnail/*" ] } ] } ※ xxx-‐‑‒image-‐‑‒uploader-‐‑‒thumbnail の部分は⾃自⾝身のS3バケット名を⼊入⼒力力します。 xxxの部分は⾃自⾝身の⽂文字列列に置き換えてくださいコードスニペット：　[Asset] > [Part1.txt] > [Section2]

57. Lambda Exec Role の作成

58. 58 S3 HTML Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 7. メタ情報 1. HTML 画像アップローダ s3:GetObject s3:PutObject logs:* Invoke Role Exec Role Lambda が S3 の Put Get およびログ出⼒力力するための権限を与える

59. 59 IAM を選択する !   サービス⼀一覧を表⽰示して IAM を選択します。 1. [サービス⼀一覧] ボタン 2. [Identity & Access Management] をクリック

60. 60 Exec Role を作成する !   Exec Role を作成します。 2. [Create New Role] をクリック 1. [Roles] をクリック

61. 61 Exec Role を作成する !   Exec Role 名を⼊入⼒力力します。 1. [image_̲uploader_̲exec_̲role] と⼊入⼒力力 2. [Next Step] をクリック

62. 62 Exec Role を作成する !   Role Type を選択します。 2. [AWS Lambda] をクリック 1. [AWS Service Roles] を選択

63. 63 Exec Role を作成する !   Policy は選択せず次のステップへ 1. [Next Step] をクリック

64. 64 Exec Role を作成する !   Exec Role を作成します。 1. [Create Role] をクリック

65. 65 Exec Role の Policy を修正する !   作成した Exec Role を選択します。 1. [image_̲uploader_̲exec_̲role] をクリック

66. 66 Exec Role の Policy を修正する !   Inline Policy を作成します。 1. [∨] をクリック 2. [click here] をクリック

67. 67 Exec Role の Policy を修正する !   Custom Policy を選択します。 1. [Custom Policy] を選択 2. [Select] をクリック

68. 68 Exec Role の Policy を修正する !   内容を⼊入⼒力力します。 1. [image_̲uploader_̲exec_̲policy] と⼊入⼒力力 2. [次ページの内容] を⼊入⼒力力 3. [Apply Policy] をクリック

69. 69 image_̲uploader_̲exec_̲policy の内容 { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "logs:*" ], "Resource": "arn:aws:logs:*:*:*" }, { "Effect": "Allow", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::xxx-image-uploader/*" ] }, { "Effect": "Allow", "Action": [ "s3:PutObject" ], "Resource": [ "arn:aws:s3:::xxx-image-uploader-thumbnail/*" ] } ] } ※ xxx-‐‑‒image-‐‑‒uploader-‐‑‒… の部分は⾃自⾝身のS3バケット名を⼊入⼒力力します。 xxxの部分は⾃自⾝身の⽂文字列列に置き換えてください xxxの部分は⾃自⾝身の⽂文字列列に置き換えてくださいコードスニペット：　[Asset] > [Part1.txt] > [Section3]

70. Node.js プログラムの作成

71. 71 S3 HTML 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 7. メタ情報 1. HTML 画像アップローダ Node.js プログラム Lambda にデプロイするプログラムを作成します

72. 72 Node.js プログラムを作成する !   プログラムを格納するディレクトリを作成し、モジュールをインストールします。 $ cd ~∼/Desktop $ mkdir ImageUploader $ cd ImageUploader $ npm install async gm npm http GET https://registry.npmjs.org/gm npm http GET https://registry.npmjs.org/async ... npm http 200 https://registry.npmjs.org/array-series/-/array-series-0.1.5.tgz async@0.9.0 node_modules/async gm@1.17.0 node_modules/gm ├── array-parallel@0.1.3 ├── array-series@0.1.5 ├── through@2.3.6 └── debug@0.7.0 async および gm モジュールを利利⽤用します

73. 73 Node.js プログラムを作成する !   メインプログラムを実装します。 !   vi を編集モード（Insert）へ移⾏行行します。 !   次ページの内容をコピペします。 !   vi をコマンドモードへ移⾏行行します。 !   vi を保存して終了了します。 $ vi ImageUploader.js i :wq ESC

74. 74 //dependencies varasync=require('async'); varAWS=require('aws-sdk'); vargm=require('gm') .subClass({imageMagick:true});//EnableImageMagickintegration. varutil=require('util'); //constants varMAX_WIDTH=100; varMAX_HEIGHT=100; //getreferencetoS3client vars3=newAWS.S3(); exports.handler=function(event,context){ //Readoptionsfromtheevent. console.log("Readingoptionsfromevent:n",util.inspect(event,{depth:5})); varsrcBucket=event.Records[0].s3.bucket.name; varsrcKey=event.Records[0].s3.object.key; vardstBucket=srcBucket+"-thumbnail"; vardstKey="thumbnail-"+srcKey; //Sanitycheck:validatethatsourceanddestinationaredifferentbuckets. if(srcBucket==dstBucket){ console.error("Destinationbucketmustnotmatchsourcebucket."); return; } //Infertheimagetype. vartypeMatch=srcKey.match(/.([^.]*)$/); if(!typeMatch){ console.error('unabletoinferimagetypeforkey'+srcKey); return; } varimageType=typeMatch[1]; if(imageType!="jpg"&&imageType!="png"){ console.log('skippingnon-image'+srcKey); return; } //DownloadtheimagefromS3,transform,anduploadtoadifferentS3bucket. async.waterfall([ functiondownload(next){ //DownloadtheimagefromS3intoabuffer. s3.getObject({ Bucket:srcBucket, Key:srcKey }, next); }, functiontranform(response,next){ gm(response.Body).size(function(err,size){ //Inferthescalingfactortoavoidstretchingtheimageunnaturally. varscalingFactor=Math.min( MAX_WIDTH/size.width, MAX_HEIGHT/size.height ); varwidth=scalingFactor*size.width; varheight=scalingFactor*size.height; //Transformtheimagebufferinmemory. this.resize(width,height) .toBuffer(imageType,function(err,buffer){ if(err){ next(err); }else{ next(null,response.ContentType,buffer); } }); }); }, functionupload(contentType,data,next){ //StreamthetransformedimagetoadifferentS3bucket. s3.putObject({ Bucket:dstBucket, Key:dstKey, Body:data, ContentType:contentType }, next); } ],function(err){ if(err){ console.error( 'Unabletoresize'+srcBucket+'/'+srcKey+ 'anduploadto'+dstBucket+'/'+dstKey+ 'duetoanerror:'+err ); }else{ console.log( 'Successfullyresized'+srcBucket+'/'+srcKey+ 'anduploadedto'+dstBucket+'/'+dstKey ); } context.done(); } ); }; コードスニペット：　[Asset] > [Part1.txt] > [Section4] ImageUploader.js の内容

75. 75 Node.js プログラムをアーカイブする ! ImageUploader.js と node_̲modules をアーカイブします。 •  ImageUploader ディレクトリ内で以下コマンドを実⾏行行します。 !   ディレクトリ構造 ImageUploader.zip |-‐‑‒ ImageUploader.js |-‐‑‒ node_̲modules |-‐‑‒ async |-‐‑‒ gm $ zip -r ImageUploader.zip ImageUploader.js node_modules

76. Lambda Function の作成

77. 77 S3 HTML 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 7. メタ情報 1. HTML 画像アップローダ Lambda Function を作成してプログラムを設置します

78. 78 Lambda を選択する !   サービス⼀一覧を表⽰示して Lambda を選択します。 1. [サービス⼀一覧] ボタン 2. [Lambda]をクリック

79. 79 Lambda Function を作成する !   Lambda Function を作成します。 1. [Create a Lambda function] をクリック初利利⽤用の場合は以下のようなページが表⽰示される

80. 80 Lambda Function を作成する !   Lambda Function を作成します。 1. [ImageUploader] と⼊入⼒力力 2. [Upload a .ZIP ﬁle] を選択

81. 81 Lambda Function を作成する !   [ImageUploader.zip] をアップロードします。 1. [Upload] をクリック 2. [ImageUploader.zip] を選択 3. [Open] をクリック

82. 82 Lambda Function を作成する !   その他の設定を⼊入⼒力力します。 1. [ImageUploader.js] と⼊入⼒力力 3. [image_̲uploader_̲exec_̲role] を選択 4. [128] を選択 2. [handler] と⼊入⼒力力 5. [60] を選択 6. [Create Lambda function] をクリック

83. 83 Event Source を設定する !   Event Source を設定します。 1. [○] をクリック 2. [Add event source] をクリック

84. 84 Event Source を設定する !   xxx-‐‑‒image-‐‑‒uploader をイベントソースとして設定します。 2. [xxx-‐‑‒image-‐‑‒uploader] を選択 3. [Put] を選択 4. [Submit] をクリック 1. [S3] を選択

85. 動作確認

86. 86 S3 HTML 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 7. メタ情報 1. HTML 画像アップローダここまでの作業で枠内を作成した

87. 87 マネージメントコンソールから画像をアップする !   サービス⼀一覧を表⽰示して S3 を選択します。 1. [サービス⼀一覧] ボタン 2. [S3]をクリック

88. 88 マネージメントコンソールから画像をアップする !   xxx-‐‑‒image-‐‑‒uploader を選択します。 1. [xxx-‐‑‒image-‐‑‒uploader] をクリック

89. 89 マネージメントコンソールから画像をアップする !   [Upload] をクリックします。 1. [Upload] をクリック

90. 90 マネージメントコンソールから画像をアップする !   画像をアップロードします。 1. [Add Files] をクリック 2. [test.png] を選択 3. [Open] をクリック 4. [Start Upload] をクリック画像ファイル名にスペースや記号などがあると正常動作しないので注意してください .png, .jpgのみ対応

91. 91 サムネイルが作成されたことを確認する !   xxx-‐‑‒image-‐‑‒uploader-‐‑‒thumbnail を選択します。 1. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒thumbnail] をクリック

92. 92 サムネイルが作成されたことを確認する !   thumbnail-‐‑‒test.png が作成されていることを確認します。 1. [thumbnail-‐‑‒test.png] を選択 2. [Properties] をクリック３. [url] をクリック

93. 93 サムネイルが作成されたことを確認する !   thumbnail-‐‑‒test.png を表⽰示して width が 100px になるように縮⼩小されていることを確認します。オリジナル test.png（640x480）サムネイル thumbnail-‐‑‒test.png（100x75）

94. 94 ログが出⼒力力されていることを確認する !   ログが出⼒力力されていることを確認します。 1. [logs] をクリック 2. ログを確認正常に動作しないときはログを確認してください。 1. LambdaFunctionが実⾏行行されてからログが出⼒力力されるまで数⼗十秒くらいかかりますので、あせらずにデバッグしてくさい。 2. (Invoke Role, Exec Role) において xxx の部分を間違って設定している可能性があります。 3. ImageUploader.js の作成や、zip の圧縮に失敗している可能性があります。 4. 画像ファイル名にスペースや記号が⼊入っている場合は正常動作しません。

96. Part２

97. 97 S3 HTML 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 7. メタ情報 1. HTML 画像アップローダ

98. 98 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML S3 HTML 画像をマネージメントコンソールからアップロードするのではなく、HTML(Javascript)からアップロードできるようにする

99. Cognito Identity Pool の作成

100. 100 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML S3 HTML 直接HTML(JavaScript)からS3に画像をアップロードできるように Cognito で identity (テンポラリクレデンシャル) を発⾏行行する

101. 101 Cognito を選択する !   サービス⼀一覧を表⽰示して Cognito を選択します。 1. [サービス⼀一覧] ボタン 2. [Cognito] をクリック

102. 102 Identity Pool を作成する !   Identity Pool を作成します。 1. [Create new identity pool] をクリック

103. 103 Identity Pool を作成する !   Identity Pool の設定をします。 2. [Enable access to unauthenticated identities] をチェック 1. [ImageUploader] と⼊入⼒力力 3. [Create Pool] をクリック

104. 104 Identity Pool を作成する 1. [Decide later] を選択 2. [Create a new IAM role] を選択 3. [Cognito_̲ImageUploaderUnauth_̲DefaultRole] と⼊入⼒力力 4. [Update roles] をクリック

105. Cognito Unauth Role の修正

106. 106 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML s3:PutObject Unauth_̲Role S3 HTML HTML(JavaScript)からS3に画像をアップロードできる権限を与える

107. 107 Cognito_̲ImageUploaderUnauth_̲DefaultRole を修正する !   サービス⼀一覧を表⽰示して IAM を選択します。 1. [サービス⼀一覧] ボタン 2. [Identity & Access Management] をクリック

108. 108 Cognito_̲ImageUploaderUnauth_̲DefaultRole を修正する ! Cognito_̲ImageUploaderUnauth_̲DefaultRole を選択します。 2. [Cognito_̲ImageUploaderUnauth_̲Default] を選択 1. [Roles] をクリック

109. 109 Cognito_̲ImageUploaderUnauth_̲DefaultRole を修正する ! Cognito_̲ImageUploaderUnauth_̲DefaultRole にポリシーを追加します。 1. [Create Role Policy] をクリック

110. 110 Cognito_̲ImageUploaderUnauth_̲DefaultRole を修正する !   サービス⼀一覧を表⽰示して Lambda を選択します。 2. [Cognito_̲ImageUploaderUnauth_̲Default] を選択 1. [Roles] をクリック 1. [Custom Policy] を選択 2. [Select] をクリック

111. 111 Cognito_̲ImageUploaderUnauth_̲DefaultRole を修正する !   サービス⼀一覧を表⽰示して Lambda を選択します。 1. [image_̲uploader_̲html_̲policy] と⼊入⼒力力 2. 次ページの内容を⼊入⼒力力 3. [Apply Policy] をクリック

112. 112 image_̲uploader_̲html_̲policy の内容 { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:PutObject", "s3:PutObjectAcl" ], "Resource": [ "arn:aws:s3:::xxx-image-uploader/*" ] } ] } ※ xxx-‐‑‒image-‐‑‒uploader の部分は⾃自⾝身のS3バケット名を⼊入⼒力力します。 xxxの部分は⾃自⾝身の⽂文字列列に置き換えてくださいコードスニペット：　[Asset] > [Part2.txt] > [Section1]

113. 画像アップロード⽤用 HTML を S3 でホスティング

114. 114 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML index.html S3 HTML 画像をアップロードするための HTML を作成する Webホスティングするための S3バケットも作成する

115. 115 画像アップロード HTML ⽤用バケットを作成する !   サービス⼀一覧を表⽰示して S3 を選択します。 1. [サービス⼀一覧] ボタン 2. [S3]をクリック

116. 116 画像アップロード HTML ⽤用バケットを作成する !   HTML ホスティング⽤用バケットを作成します。 1. [Create Bucket] をクリック

117. 117 画像アップロード HTML ⽤用バケットを作成する !   HTML ホスティング⽤用バケットを作成します。 1. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒html] と⼊入⼒力力 2. [US Standard] を選択 3. [Create] をクリック xxxの部分は⾃自⾝身の⽂文字列列に置き換えてください

118. 118 !   オリジナル画像⽤用バケットを作成します。画像アップロード HTML ⽤用バケットを作成する 1. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒html] を選択 2. [Properties] を選択 4. [Enable website hosting] を選択 5. [index.html] と⼊入⼒力力 3. [Static Website Hosting] を選択 6. [Save] をクリック

119. 119 画像アップロード HTML ⽤用バケットのバケットポリシーを修正する !   誰でも閲覧できるように Bucket Policy を修正します。 1. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒html] を選択 2. [Properties] をクリック 3. [Permissions] をクリック 4. [Add(Edit) bucket policy] をクリック

120. 120 画像アップロード HTML ⽤用バケットのバケットポリシーを修正する !   誰でも閲覧できるように Bucket Policy を修正します。 1. 次ページの内容を⼊入⼒力力 2. [Save] をクリック

121. 121 画像アップロード HTML ⽤用バケットのバケットポリシーを修正する { "Version":"2012-‐‑‒10-‐‑‒17", "Statement":[{ "Sid":"AddPerm", "Eﬀect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::xxx-‐‑‒image-‐‑‒uploader-‐‑‒html/*" ] } ] } ※ xxx-‐‑‒image-‐‑‒uploader-‐‑‒html の部分は⾃自⾝身のS3バケット名を⼊入⼒力力します。 xxxの部分は⾃自⾝身の⽂文字列列に置き換えてくださいコードスニペット：　[Asset] > [Part2.txt] > [Section2]

122. 122 AccountId を確認する IdentityPoolId を確認する

123. 123 <!DOCTYPE html> <html><head> <meta charset="UTF-8"><title>ImageUploader</title> <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.21.min.js"></script> </head><body> <script> // Cognito var params = { AccountId: "634266xxxxxx", // Please modify RoleArn: "arn:aws:iam::634266xxxxxx:role/Cognito_ImageUploaderUnauth_DefaultRole", // Please modify IdentityPoolId: "us-east-1:0cxxxxxx-eexx-46xx-88xx-12dfc2xxxxxx" // Please modify }; AWS.config.region = "us-east-1"; AWS.config.credentials = new AWS.CognitoIdentityCredentials(params); AWS.config.credentials.get( function (err) { if (err) { console.log(err); } else { console.log("Successfully authorized. ID:" + AWS.config.credentials.identityId); } }); // S3 Upload function upload () { console.log("Now uploading..."); var s3 = new AWS.S3({params:{Bucket:"xxx-image-uploader"}}); // Please modify var file = document.getElementById("fileToUpload").files[0]; if (file) { s3.putObject({ Key:file.name, ContentType:file.type, Body:file, ACL:"public-read" }, function (err, data) { if (err) { console.log(err); } else { console.log("Successfully uploaded."); } }); } } </script> <input type="file" name="fileToUpload" id="fileToUpload"> <input type="submit" value="upload" onclick="upload()"> </body></html> 画像アップロード HTML を作成する（index.html） xxxの部分は⾃自⾝身の⽂文字列列を⼊入⼒力力してください。⾃自⾝身の AccountId を⼊入⼒力力作成したCognitoIdentityPool の IdentityPoolId コードスニペット：　[Asset] > [Part2.txt] > [Section3] ⾃自⾝身の AccountId を⼊入⼒力力

124. 124 バケットに HTML をアップする !   サービス⼀一覧を表⽰示して S3 を選択します。 1. [サービス⼀一覧] ボタン 2. [S3]をクリック

125. 125 バケットに HTML をアップする 1. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒html] をクリック !   xxx-‐‑‒image-‐‑‒uploader-‐‑‒html バケットに HTML をアップロードします。

126. 126 !   xxx-‐‑‒image-‐‑‒uploader-‐‑‒html バケットに HTML をアップロードします。バケットに HTML をアップする 1. [Upload] をクリック 2. [Add Files] をクリック 3. [index.html] をクリック 4. [Open] をクリック 5. [Start Upload] をクリック

127. 画像アップロード⽤用バケットの CORS対応

128. 128 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 S3 HTML 1. HTML CORS の対応が必要

129. 129 CORSとは !   CORS(Cross-‐‑‒Origin Resource Sharing)は、ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得する仕組みです。 !   各社ブラウザには、クロスドメイン通信を拒否する仕組みが実装されています。これは、クロスサイトスクリプティングを防⽌止するためです。ブラウザリクエスト html, js, css レスポンスヘッダで制御 Access-Control-Allow-Origin: * Access-Control-Allow-Headers: * Access-Control-Allow-Methods: GET, POST, DELETE, PUT Ajax S3 Origin S3 HTML

130. 130 画像アップロード⽤用バケットのCORSを設定する !   CORSを設定します。 1. [xxx-‐‑‒image-‐‑‒uploader] を選択 2. [Properties] を選択 3. [Permissions] を選択 4. [Add(Edit) CORS Conﬁguration] をクリック

131. 131 画像アップロード⽤用バケットのCORSを設定する !   CORSを設定します。 1. 次ページの内容を⼊入⼒力力 2. [Save] をクリック

132. 132 CORS Conﬁguration <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration> コードスニペット：　[Asset] > [Part2.txt] > [Section4]

133. 動作確認

134. 134 サイトを確認する !   サイトを確認します。 1. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒html] を選択 3. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒html.s3-‐‑‒website-‐‑‒ us-‐‑‒east-‐‑‒1.amazonaws.com] をブラウザで開く 2. [Static Website Hosting] を選択

135. 135 サイトを確認する !   画像を選択してアップロードできることを確認します。 1. [Browse] をクリックして画像(test2.png)を選択 2. [upload] をクリックして送信 3. Console にログが出⼒力力 test2.png

136. 136 バケットにオリジナルとサムネイルが作成されていることを確認する !   xxx-‐‑‒image-‐‑‒uploader にオリジナル(test2.png)がアップロードされます。 !   xxx-‐‑‒image-‐‑‒uploader-‐‑‒thumbnail にサムネイル(thumbnail-‐‑‒test2.png)が作成されます。 test2.png thumbnail-test2.png

138. Part３

139. 139 8. ⼀一覧取得 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML S3 HTML

140. 140 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML 8. ⼀一覧取得 S3 HTML DynamoDB で画像ファイルを管理理する

141. DynamoDB の作成

142. 142 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML 8. ⼀一覧取得 S3 HTML DynamoDB のテーブルを作成する

143. 143 テーブルを作成する !   サービス⼀一覧を表⽰示して DynamoDB を選択します。 2. [DynamoDB] をクリック 1. [サービス⼀一覧] ボタン

144. 144 テーブルを作成する ! ImageUploader という名称でテーブルを作成します。 1. [Create Table] をクリック

145. 145 テーブルを作成する !   “Hash and Range” Primary Key Type でテーブルを作成します。 7. [Continue] をクリック 1. [ImageUploader] と⼊入⼒力力 2. [Hash and Range] を選択 3. [String] を選択 4. [id] と⼊入⼒力力 5. [Number] を選択 6. [timestamp] と⼊入⼒力力

146. 146 テーブルを作成する !   インデックスは不不要です。 1. [Continue] をクリック

147. 147 テーブルを作成する !   スループットを指定します。 3. [Continue] をクリック 1. [5] と⼊入⼒力力 2. [5] と⼊入⼒力力

148. 148 テーブルを作成する !   アラームははずします。 2. [Continue] をクリック 1. [Use Basic Alarms] のチェックをはずす

149. 149 テーブルを作成する !   テーブルを作成します。 1. [Create] をクリック

150. 150 テーブルを確認する !   テーブルを確認します。 1. [ImageUploader] テーブルが作成されたことを確認

151. Lambda Exec Role の修正

152. 152 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 7. メタ情報 1. HTML 画像アップローダ s3:GetObject s3:PutObject logs:* Exec Role dynamodb:PutItem 8. ⼀一覧取得 S3 HTML Lambda が DynamoDB に PutItem する権限を与える

153. 153 image_̲uploader_̲exec_̲policy を修正する !   サービス⼀一覧を表⽰示して IAM を選択します。 1. [サービス⼀一覧] ボタン 2. [Identity & Access Management] をクリック

154. 154 image_̲uploader_̲exec_̲policy を修正する ! image_̲uploader_̲exec_̲policy を修正します。 1. [ImageUploader] テーブルが作成されたことを確認 2. [image_̲uploader_̲exec_̲role] をクリック 1. [Roles] を選択

155. 155 image_̲uploader_̲exec_̲policy を修正する ! image_̲uploader_̲exec_̲policy を修正します。 1. [ImageUploader] テーブルが作成されたことを確認 1. [Edit Policy] をクリック

156. 156 image_̲uploader_̲exec_̲policy を修正する ! image_̲uploader_̲exec_̲policy を修正します。 1. 次ページの内容を追記 2. [Apply Policy] をクリック

157. 157 image_̲uploader_̲exec_̲policy の内容 { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "logs:*" ], "Resource": "arn:aws:logs:*:*:*" }, { "Effect": "Allow", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::xxx-image-uploader/*" ] }, { "Effect": "Allow", "Action": [ "s3:PutObject" ], "Resource": [ "arn:aws:s3:::xxx-image-uploader-thumbnail/*" ] }, { "Effect": "Allow", "Action": [ "dynamodb:PutItem" ], "Resource": [ "arn:aws:dynamodb:*:*:table/ImageUploader" ] } ] } xxxの部分は⾃自⾝身の⽂文字列列に置き換えてください xxxの部分は⾃自⾝身の⽂文字列列に置き換えてくださいこの部分を追記するコードスニペット：　[Asset] > [Part3.txt] > [Section1]

158. Node.js プログラムの修正

159. 159 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML Node.js プログラム 8. ⼀一覧取得 S3 HTML DynamoDB にデータ登録するようにプログラムを修正する

160. 160 Node.js プログラムの修正・・・・・・ function upload(contentType, data, next) { // Stream the transformed image to a different S3 bucket. s3.putObject({ Bucket: dstBucket, Key: dstKey, Body: data, ContentType: contentType }, next); }, function putItem(response, next) { var time = String(new Date().getTime()); dynamodb.putItem({ TableName: 'ImageUploader', Item:{ id: {S:'ImageUploader'}, timestamp :{N: time}, original :{S: srcBucket + '.s3-website-us-east-1.amazonaws.com/' + srcKey}, thumbnail :{S: dstBucket + '.s3-website-us-east-1.amazonaws.com/' + dstKey} } }, next); } ], function (err) { if (err) { console.error( 'Unable to resize ' + srcBucket + '/' + srcKey + ' and upload to ' + dstBucket + '/' + dstKey + ' due to an error: ' + err ); } else { console.log( 'Successfully resized ' + srcBucket + '/' + srcKey + ' and uploaded to ' + dstBucket + '/' + dstKey ・・・・・・・この部分を追記するコードスニペット：　[Asset] > [Part3.txt] > [Section2]

161. 161 Node.js プログラムをアーカイブする ! ImageUploader.js と node_̲modules をアーカイブします。 •  ImageUploader ディレクトリ内で以下コマンドを実⾏行行します。 $ zip -r ImageUploader.zip ImageUploader.js node_modules

162. 162 Lambda を選択する !   サービス⼀一覧を表⽰示して Lambda を選択します。 1. [サービス⼀一覧] ボタン 2. [Lambda]をクリック

163. 163 1. [○] をクリック 2. [Edit/Test] をクリック Lambda Function を修正する !   Edit/Test をクリックします。

164. 164 Lambda Function を修正する !   修正したプログラムをアップロードします。 1. [ImageUploader] テーブルが作成されたことを確認 1. [Upload] をクリック 2. [ImageUploader.zip] を選択 3. [Open] をクリック 4. [Save] をクリック

165. 念念のため動作確認

166. 166 DynamoDBの動作を確認する !   画像を選択してアップロードできることを確認します。 1. [Browse] をクリックして画像(test3.png)を選択 2. [upload] をクリックして送信 3. Console にログが出⼒力力 test3.png

167. 167 DynamoDBのデータを確認する !   サービス⼀一覧を表⽰示して DynamoDB を選択します。 2. [DynamoDB] をクリック 1. [サービス⼀一覧] ボタン

168. 168 DynamoDBのデータを確認する 1. [ImageUploader] を選択 2. [Explore Table] をクリック

169. 169 DynamoDBのデータを確認する 1. [Scan] を選択 2. [Go] をクリック 3. 検索索された Item をチェック 4. データが登録されていることを確認

170. Cognito Unauth Role の修正

171. 171 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML 8. ⼀一覧取得 s3:PutObject Unauth_̲Role Dynamodb:Query S3 HTML HTML(JavaScript)が DynamoDB からデータを取得する権限を与える

172. 172 Cognito_̲ImageUploaderUnauth_̲DefaultRole を修正する !   サービス⼀一覧を表⽰示して IAM を選択します。 1. [サービス⼀一覧] ボタン 2. [Identity & Access Management] をクリック

173. 173 Cognito_̲ImageUploaderUnauth_̲DefaultRole を修正する 1. [Roles] を選択 2. [Cognito_̲ImageUploaderUnauth_̲DefaultRole] をクリック

174. 174 Cognito_̲ImageUploaderUnauth_̲DefaultRole を修正する 1. image_̲uploader_̲html_̲policy の [Edit Policy] をクリック

175. 175 Cognito_̲ImageUploaderUnauth_̲DefaultRole を修正する 1. 次ページの内容を追記 2. [Apply Policy] をクリック

176. 176 image_̲uploader_̲html_̲policy の内容 { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:PutObject", "s3:PutObjectAcl" ], "Resource": [ "arn:aws:s3:::xxx-image-uploader/*" ] }, { "Effect": "Allow", "Action": [ "dynamodb:Query" ], "Resource": [ "arn:aws:dynamodb:*:*:table/ImageUploader" ] } ] } この部分を追記する xxxの部分は⾃自⾝身の⽂文字列列に置き換えてくださいコードスニペット：　[Asset] > [Part3.txt] > [Section3]

177. HTML の修正

178. 178 Lambda 4. 画像アップロード S3 Thumbnail S3 Origin 6. 画像リサイズ 5. ファンクション実⾏行行 CloudWatch ログ DynamoDB 2. ゲスト認証 Cognito 3. Temporary Credential 画像アップローダ 7. メタ情報 1. HTML 8. ⼀一覧取得 index.html S3 HTML HTML(JavaScript)が DynamoDB からデータを取得できるように修正 HTML(JavaScript)が DynamoDB からデータを取得できるように修正

179. 179 <!DOCTYPE html> <html><head> <meta charset="UTF-‐‑‒8"><title>ImageUploader</title> <script src="https://sdk.amazonaws.com/js/aws-‐‑‒sdk-‐‑‒2.1.21.min.js"></script> </head><body> <script> // Cognito var params = { AccountId: "634266xxxxxx", RoleArn: "arn:aws:iam::634266xxxxxx:role/Cognito_̲ImageUploaderUnauth_̲DefaultRole", IdentityPoolId: "us-‐‑‒east-‐‑‒1:0xxxxxx-‐‑‒eexx-‐‑‒46xx-‐‑‒88xx-‐‑‒12dfc2xxxxxx" }; AWS.config.region = "us-‐‑‒east-‐‑‒1"; AWS.config.credentials = new AWS.CognitoIdentityCredentials(params); AWS.config.credentials.get( function (err) { if (err) { console.log(err); } else { console.log("Successfully authorized. ID:" + AWS.config.credentials.identityId); } }); // S3 Upload function upload () { console.log("Now uploading..."); var s3 = new AWS.S3({params:{Bucket:”xxx-‐‑‒image-‐‑‒uploader"}}); var file = document.getElementById("fileToUpload").files[0]; if (file) { s3.putObject({ Key:file.name, ContentType:file.type, Body:file, ACL:"public-‐‑‒read" }, function (err, data) { if (err) { console.log(err); } else { console.log("Successfully uploaded."); } }); } } //DynamoDB Query function download () { console.log("Now loading..."); var dynamodb = new AWS.DynamoDB({params: {TableName: "ImageUploader"}}); dynamodb.query({ AttributesToGet : ['original','thumbnail'], KeyConditions: { id : { AttributeValueList: [ {S: "ImageUploader", }], "ComparisonOperator": "EQ" } }, ScanIndexForward: false }, function(err, data) { if (err) { console.log(err); } else { var wrapper = document.getElementById('imageList'); wrapper.innerHTML = ''; data.Items.map(function(item) { var a = document.createElement('a'); a.href = "http://" + item.original.S; var img = document.createElement('img'); img.src = "http://" + item.thumbnail.S; a.appendChild(img); return a; }).forEach(function(a) { wrapper.appendChild(a); wrapper.appendChild(document.createElement('br')); }); console.log("Successfully loaded."); } }); } </script> <input type="file" name="fileToUpload" id="fileToUpload"> <input type="submit" value="upload" onclick="upload()"> <input type="submit" value="download" onclick="download()"> <hr><div id="imageList"></div> </body></html> 画像アップロード HTML を修正する（index.html）この部分を追記する⾚赤字の部分は⾃自⾝身の⽂文字列列に置き換えてください⾚赤字の部分は⾃自⾝身の⽂文字列列に置き換えてくださいこの部分を追記するコードスニペット：　[Asset] > [Part3.txt] > [Section4]

180. 180 HTML を再アップする !   サービス⼀一覧を表⽰示して S3 を選択します。 1. [サービス⼀一覧] ボタン 2. [S3]をクリック

181. 181 HTML を再アップする 1. [xxx-‐‑‒image-‐‑‒uploader-‐‑‒html] をクリック !   xxx-‐‑‒image-‐‑‒uploader-‐‑‒html バケットに HTML をアップロードします。

182. 182 !   xxx-‐‑‒image-‐‑‒uploader-‐‑‒html バケットに HTML をアップロードします。 HTML を再アップする 1. [Upload] をクリック 2. [Add Files] をクリック 3. [index.html] をクリック 4. [Open] をクリック 5. [Start Upload] をクリック

183. 動作確認

184. 184 動作確認 !   xxx-‐‑‒image-‐‑‒uploader-‐‑‒html.s3-‐‑‒website-‐‑‒us-‐‑‒east-‐‑‒1.amazonaws.com にアクセスして動作確認します。 1. [download] をクリック 2. [サムネイル画像] をクリック 3. [オリジナル画像] が表⽰示される注意） JavaScriptは最低限しか実装していません。エラー処理理などはご⾃自⾝身で実装してください。

185. お疲れ様でした AWSで作業した環境の⽚片付けをおねがいします（そのままにしておくと、課⾦金金が発⽣生します）

AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ

Amazon Web Services Japan

Transcript